Skip to content Skip to sidebar Skip to footer

Html Theft Prevention

I'm working on designing a website, and I want to make sure that no one can steal the code. I would like to prevent the code from being taken out of the website, and display an err

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>
&#13&#10&#60&#97&#32&#104&#114&#101&#102&#61&#34&#109&#97&#105&#108&#116&#111&#58&#115&#111&#109&#101&#111&#110&#101&#64&#100&#111&#109&#97&#105&#110&#46&#99&#111&#109&#34&#62&#77&#97&#105&#108&#32&#109&#101&#60&#47&#97&#62
</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.

&#13&#10&#60&#97&#32&#104&#114&#101&#102&#61&#34&#109&#97&#105&#108&#116&#111&#58&#115&#111&#109&#101&#111&#110&#101&#64&#100&#111&#109&#97&#105&#110&#46&#99&#111&#109&#34&#62&#77&#97&#105&#108&#32&#109&#101&#60&#47&#97&#62&#13&#10

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 []):

eval all the way down

If you scroll long enough, you'll see a variable that seems to be assigned nothing:

what is this sorcery!?

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:

the man behind the curtain!

(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:

http://jsfiddle.net/z5gu4bq1/

Hope this was helpful. Have fun with JavaScript! And please never do this in Production :)

Resources:

  1. JSF*CK
  2. White-space Obfuscation Reference

Post a Comment for "Html Theft Prevention"