Html Theft Prevention
Solution 1:
HTML Obfuscation is a transformational tool that both preserves the code and prevents it from being reverse-engineered. You can find out more about it here.
Here is an example of obfuscated code.
This is extremely simple HTML code:
<ahref="mailto:someone@domain.com">Mail me</a>
This can be turned into this:
<scripttype="text/javascript"><!--
var s="=b!isfg>#nbjmup;tpnfpofAepnbjo/dpn#?Nbjm!nf=0b?";
m=""; for (i=0; i<s.length; i++).m+=String.fromCharCode(s.charCodeAt(i)-1); document.write(m);
//--></script><noscript>

<a href="mailto:someone@domain.com">Mail me</a>
</noscript>
This is called Combined
obfuscation.
<scripttype="text/javascript"><!--
var s="=b!isfg>#nbjmup;tpnfpofAepnbjo/dpn#?Nbjm!nf=0b?";
m=""; for (i=0; i<s.length; i++) m+=String.fromCharCode(s.charCodeAt(i)-1); document.write(m);
//--></script><noscript>
You must enable JavaScript to see this text.
</noscript>
This is called JavaScript
obfuscation.

<a href="mailto:someone@domain.com">Mail me</a>

This is called Character Entities
obfuscation.
All of these methods are entirely free on that website, and let you keep all your code private.
EDIT:
After further research, I found another website, JSF**K, which lets you encode items using a series of brackets, parentheses, exclamations and plus signs. Below is how it encodes a simple item:
alert(1)
becomes:
[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+[+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])()
This is practically impossible to crack, as you'd need to "fuzz" the website with data to obtain the character codes and then use regular expressions to build a decoder.
Solution 2:
@JBDouble05 gave a great answer to your question and I totally recommend it. I wanted to share an example that I threw together for fun, that employs some of the techniques he described. It uses HTML obfuscation via zero-width whitespace characters. I also threw in JSF*CK to really make the source code interesting :D
First, the URL which is serving the obfuscated code: http://jackpattishall.com/obfuscated.html
(Uses padStart
, so you'll need to view in a browser that supports that!)
If you view the source (using Chrome), you'll notice that 98% or so of the markup visible is JSF*CK (basically all those()
and []
):
If you scroll long enough, you'll see a variable
that seems to be assigned nothing:
The var m
is actually assigned the following zero-width
whitespace characters:
const m = "";
Try copy/pasting the previous line in Chrome console. You should get something like:
(Any text editor that shows special characters will do the same!)
The massive
JSF*CK code is basically the following (but minified):
const zero_regex = newRegExp(zero, 'g');
const one_regex = newRegExp(one, 'g');
constbinToText = text => {
let str = text.replace(zero_regex, '0').replace(one_regex, '1');
if (str.match(/[10]{8}/g)) {
return str.match(/([10]{8}|\s+)/g).map(val => {
returnString.fromCharCode(parseInt(val, 2));
}).join('');
}
}
The script
responsible for the obfuscation looks like:
// Our zero-width whitespace charsconst zero = '';
const one = '';
consttextToBin = text => {
let len = text.length;
let output = [];
let i = 0;
for (; i < len; i++) {
output.push(text[i].charCodeAt().toString(2).padStart(8, '0'));
}
return output.join('').replace(/0/g, zero).replace(/1/g, one);
}
Here's a JSFiddle that shows a bit more of the magic
:
Hope this was helpful. Have fun with JavaScript! And please never do this in Production :)
Resources:
Post a Comment for "Html Theft Prevention"