View source for JavaScript Obfuscation and Ad Blocking Detection

<table border="0" cellspacing="0" width="100%"><tr>
<td width="20%">[[Filling Blocked Ads with Ad Reinsertion|Previous]]<td align="center">[[Ad Blocking Survival|Table of Contents]]<td width="20%" align="right">[[Displaying Ad Blocker Removal Requests - A Tutorial|Next]]</td>
<tr>
<td width="20%">Filling Blocked Ads with Ad Reinsertion<td align="center"><td width="20%" align="right">Displaying Ad Blocker Removal Requests - A Tutorial</td>
</table>
<hr>


<htmlet>ab_survival</htmlet>


In  the same way that visitors to a website can view the HTML used to construct a page by selecting a view source option within the browser window, it is also possible to view the JavaScript code embedded within a page. To avoid this, the JavaScript code should be obfuscated. 

In this chapter we will explore the concept of JavaScript obfuscation and the ways in which it can be used as part of an overall strategy to deal with ad blocking.
<htmlet>ab_survival</htmlet>
== What is JavaScript Obfuscation? ==

The JavaScript contained within a web page is viewable to any visitor that decides to look for it. Even when the JavaScript is contained within a .js file that is imported into a web page, that file can be downloaded and viewed at will.

JavaScript obfuscation refers to a technique that is commonly used to obscure the operation and intent of JavaScript code contained within a web page. Consider, for example, the JavaScript detection code introduced in the [http://www.ebookfrenzy.com/AdBlocking/index.html Ad Blocker Detection Techniques] chapter of this book:

<pre>
(function() {

        var detector = function() {
            setTimeout(function() {

                if(!document.getElementsByClassName) return;
                var ads = 
			document.getElementsByClassName('banner_ad'),
                    ad  = ads[ads.length - 1];

                if(!ad || ad.innerHTML.length == 0 
				|| ad.clientHeight === 0) {
                    console.log('Ad Blocker Detected');
                } else {
                    console.log('No Ad Blocker');
                }
            }, 2000);
        }

        /* Add a page load listener */
        if(window.addEventListener) {
            window.addEventListener('load', detector, false);
        }
})();
</pre>

It will be clear to anyone with moderate JavaScript skills that the above code is performing some form of ad blocker detection. Consider, however, the same code after it has been obfuscated:

<pre>
var _0x65ff=["\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x43\x6C\x61\x73\x73\x4E\x61\x6D\x65","\x62\x61\x6E\x6E\x65\x72\x5F\x61\x64",
"\x6C\x65\x6E\x67\x74\x68","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x63\x6C\x69\x65\x6E\x74\x48\x65\x69\x67\x68\x74",
"\x41\x64\x20\x42\x6C\x6F\x63\x6B\x65\x72\x20\x44\x65\x74\x65\x63\x74\x65\x64","\x6C\x6F\x67",
"\x4E\x6F\x20\x41\x64\x20\x42\x6C\x6F\x63\x6B\x65\x72","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72",
"\x6C\x6F\x61\x64"];(function(){var _0x64b7x1=function(){setTimeout(function(){if(!document[_0x65ff[0]]){return};var _0x64b7x2=document[_0x65ff[0]](_0x65ff[1]),_0x64b7x3=_0x64b7x2[_0x64b7x2[_0x65ff[2]]-1];if(!_0x64b7x3||_0x64b7x3[_0x65ff[3]]
[_0x65ff[2]]==0||_0x64b7x3[_0x65ff[4]]===0){console[_0x65ff[6]](_0x65ff[5])}else {console[_0x65ff[6]](_0x65ff[7])}},2000)};
if(window[_0x65ff[8]]){window[_0x65ff[8]](_0x65ff[9],_0x64b7x1,false)}})()
</pre>

Clearly it is very difficult to decipher the purpose of the code once it has been obfuscated. The most that can be inferred from the code now is that it checks some aspect of the document and outputs something to the JavaScript console.
<htmlet>ab_survival</htmlet>
== How JavaScript Obfuscation Works ==

JavaScript is obfuscated by passing the original code through an obfuscator which outputs the obfuscated equivalent code which can then be embedded into a web page. JavaScript obfuscation techniques vary from one obfuscator to another but generally perform the following steps:

1. Rename variables to short meaningless names.
2. Remove unnecessary whitespace and line breaks.
3. Make parts of the code self-generating so that the first execution generates the actual code which is then executed to perform the intended task.
4. Use character codes and string manipulation along with the eval function to construct the real JavaScript code.
<htmlet>ab_survival</htmlet>
== JavaScript Obfuscation vs. Minifying ==

It is important to note that JavaScript obfuscation should not be confused with minified or compressed JavaScript. JavaScript compression is the process of reducing the size of JavaScript code so that it downloads faster when a web page loads. In general terms, steps 1 and 2 outlined above are performed when JavaScript is minified. The following code, for example, lists the same ad blocker detection code after it has been minified:

<pre>
!function(){var e=function(){setTimeout(function(){if(document.getElementsByClassName){var e=document.getElementsByClassName("banner_ad"),n=e[e.length-1];n&&0!=n.innerHTML.length&&0!==n.clientHeight?console.log("No Ad Blocker"):console.log("Ad Blocker Detected")}},2e3)};window.addEventListener&&window.addEventListener("load",e,!1)}();
</pre>

Although the JavaScript code now takes up less space, the intent and purpose of the code is still clear without the additional obfuscation steps.

== JavaScript Obfuscation and Ad Blocking ==

When taking steps to address ad blocking behavior it is important, even when taking passive steps, to perform these tasks as discretely as possible. This is of particular importance when using strategies such as ad reinsertion as outlined in the previous chapter. When it comes to addressing ad blocking, the less the outside world knows about your activities the better, and JavaScript obfuscation is a useful tool in this context.

One potential problem with using code obfuscation is that some malware detectors will flag a warning when a user loads a web page containing obfuscated code. This is not, however, a common occurrence, nor does it mean the code is necessarily malicious. Rather, it simply means the code is so well obfuscated that the malware detector cannot ascertain what the code actually does. 
<htmlet>ab_survival</htmlet>
== How to Obfuscate JavaScript Code ==

An internet search will list a number of free online JavaScript obfuscators, any of which can be used to effectively obfuscate your JavaScript code. One widely used service worth exploring is called JavaScript Obfuscator and is available online at [https://javascriptobfuscator.com https://javascriptobfuscator.com].


[[Image:javascript_obfuscation.png|A JavaScript obfuscation example]]
 
Figure 7-1


Most of these services allow you to paste your JavaScript code into a window and then perform the obfuscation by clicking on a button.

== Summary ==

Just as visitors to a website can view the HTML used to construct a page by selecting a view source option within the browser window, it is also possible to view the JavaScript code embedded within a website. The term JavaScript obfuscation refers to the process of obscuring the intent and purpose of JavaScript code within a web page, a technique that can be of particular use when taking steps to address ad blocking, particularly when adopting strategies such as ad reinsertion. JavaScript code can be obfuscated using any one of a number of free services provided online.  


<htmlet>ab_survival</htmlet>


<hr>
<table border="0" cellspacing="0" width="100%"><tr>
<td width="20%">[[Filling Blocked Ads with Ad Reinsertion|Previous]]<td align="center">[[Ad Blocking Survival|Table of Contents]]<td width="20%" align="right">[[Displaying Ad Blocker Removal Requests - A Tutorial|Next]]</td>
<tr>
<td width="20%">Filling Blocked Ads with Ad Reinsertion<td align="center"><td width="20%" align="right">Displaying Ad Blocker Removal Requests - A Tutorial</td>
</table>