Elements Tab Obfuscator
About

Elements Tab Obfuscator is a JavaScript application that obfuscates the text displayed in the Elements tab of Developer Tools.

NOTICE: Elements Tab Obfuscator does NOT obfuscate the source code of the webpage. To obfuscate the source code, use an HTML obfuscator such as Online HTML Obfuscator.

▼ The Elements tab of Developer Tools
Features

Elements Tab Obfuscator performs the following three types of obfuscation in the Elements tab of Developer Tools:

  • Obfuscates all text within <body>. (Note: The text will no longer be selectable.)
  • Removes all <script> elements.
  • Removes all <!-- comment blocks -->.
▼ Obfuscated text
Demo

The Elements tab of this webpage is obfuscated by Elements Tab Obfuscator. To verify the obfuscation result, open the Elements tab in Developer Tools.

To open the Elements tab, right-click on any part of this webpage and select Inspect or Inspect Element from the context menu.

▼ Select Inspect
Installation

To install Elements Tab Obfuscator on your webpage, follow these steps:

  1. Locate the JavaScript file etobf.js in the ZIP file you downloaded.
  2. Upload etobf.js to your website.
  3. Add the following JavaScript tag to your webpage. Make sure to correctly adjust the path to the JavaScript file. 

    <script src="http://path/to/the/JavaScript/file/etobf.js" charset="UTF-8"></script>
    (* Use either http:// or https:// as appropriate.)

That's it! Elements Tab Obfuscator is now installed on your webpage.

Hardening installation

If the JavaScript installed in the previous section is somehow removed from the webpage, then the text in the Elements tab will naturally no longer be obfuscated. Therefore, it is important to make it difficult to remove the JavaScript file from the webpage. Below are three strategies to make its removal harder:

1 Rename the JavaScript file to something hard to guess

The original filename of Elements Tab Obfuscator is etobf.js, but you should rename it to something random (e.g., aieta35379-co7.js) so that it cannot be easily associated with the obfuscation of the Elements tab.

2 Specify the JavaScript file URL using an absolute path

If you specify the JavaScript file’s source URL as an absolute path, as shown below, the JavaScript will still function even if the webpage is downloaded and opened in a local environment. 

<script src="http://absolute/path/to/the/JavaScript" charset="UTF-8"></script>

It is important to consider the possibility of your webpage being downloaded locally, as hackers typically attempt to remove the Elements Tab Obfuscator JavaScript after downloading the page and opening it on their own machine.

3 Clear the HTML content if the webpage is opened locally

This strategy focuses more deeply on the case where your webpage is downloaded and opened in a local environment.

It's not easy for hackers to remove Elements Tab Obfuscator JavaScript while the webpage remains hosted on your website. Therefore, they often download the webpage locally to examine it more closely.

If you are okay with preventing offline access to your webpage, we recommend using the script below to delete all HTML content when the page is opened locally. This way, hackers will not have a chance to extract information from the Elements tab.

The following code clears your webpage’s HTML content if the hostname does not match "www.yourdomain.com". To implement it, first replace "www.yourdomain.com" with your actual domain name. Then, insert the code at the end of your webpage, just before the </body> tag. 

<script>
if(location.hostname!="www.yourdomain.com"){
	document.documentElement.innerHTML="";
}
</script>
Selective obfuscation with eto-apply and eto-exclude

By default, Elements Tab Obfuscator obfuscates all text within the <body> element. To specify which text should be obfuscated, add eto-apply to the class attribute of the elements containing the text. For example: 

<div class="eto-apply">
	The text here will be obfuscated.
</div>

You can add eto-apply to as many elements as you want; however, those elements must be within the <body> element. You cannot add eto-apply to elements within <head>. If you do not add eto-apply to any elements, all text within <body> will be obfuscated by default.

If you want to exclude some text from obfuscation, you can add eto-exclude to the class attribute of the element containing the text. For example: 

<div class="eto-exclude">
	The text here will NOT be obfuscated.
</div>

Like eto-apply, eto-exclude must be applied to elements within <body>. If you are using eto-apply, then eto-exclude must be placed within one of the elements that has eto-apply as a class attribute. For example: 

<div class="eto-apply">
	The text here will be obfuscated.
	<div class="eto-exclude">
		The text here will NOT be obfuscated.
	</div>
	The text here will be obfuscated.
</div>