How To Encrypt HTML (Why It's A BAD Idea!)

Welcome to a short tutorial on how to encrypt HTML code. So for some reason, you need to hide the HTML source code from the users. Be it for security purposes, or not wanting to release the full source code to a non-paying client.

We can easily encrypt HTML using free online tools:

Do a search for “HTML encrypt online“.
Choose any free online encryption tool.
Paste your existing HTML code and encrypt it.

Yes, there are plenty of free tools online and libraries that we can use to “encrypt” HTML. But here’s the catch. While there are ways to scramble the HTML code using Javascript, it really is impossible to hide it – Read on to find out why!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-encrypt-html/” title=”How To Encrypt HTML – Why It’s A Bad Idea” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

HOW TO ENCRYPT HTML CODE

All right, let us now get into an example of how to encrypt the HTML code… To be more precise, it is obfuscating and scrambling it with Javascript.

DUMMY CODE

For the purpose of demonstration, we will be using this dummy HTML page.

1-dummy-page.html

<!DOCTYPE html>
<html>
  <head>
    <title>Dummy HTML Page</title>
  </head>
  <body>
    <h1>HELLO WORLD!</h1>
    <p>
      My name na Uvuvwevwevwe Onyetenyevwe Ugwemubwem Ossas.
    </p>
  </body>
</html>

FREE ONLINE TOOLS

Now, there are plenty of free online tools that we can use to obfuscate HTML code. Here are a few of them for convenience sake:

Encrypt HTML – SmartGB
HTML Code Encryptor from ISDN*tek
Free HTML Encrypter – WebToolHub
HTML Encrypter: Protects Your Webpage Source Code – 1pagedesign.com
HTML Encrypter Tool – Search Engine Genie

Just do a search for “encrypt HTML online” or “free HTML encrypt tool”, and there will be a ton more.

HOW TO OBFUSCATE?

Very simply copy-and-paste your HTML code into the text box and hit the “encrypt” button.

That should obfuscate and give you the “protected Javascript version”:

2-jumbled.html

<html>
  <head>
    <title>Obfuscated HTML</title>
  </head>
  <body>
  <script type="text/javascript">
  <!-- 
  eval(unescape('%66%75%6e%63%74%69%6f%6e%20%66%33%64%61%35%39%64%28%73%29%20%7b%0a%09%76%61%72%20%72%20%3d%20%22%22%3b%0a%09%76%61%72%20%74%6d%70%20%3d%20%73%2e%73%70%6c%69%74%28%22%32%32%35%30%34%38%32%32%22%29%3b%0a%09%73%20%3d%20%75%6e%65%73%63%61%70%65%28%74%6d%70%5b%30%5d%29%3b%0a%09%6b%20%3d%20%75%6e%65%73%63%61%70%65%28%74%6d%70%5b%31%5d%20%2b%20%22%36%30%39%37%35%30%22%29%3b%0a%09%66%6f%72%28%20%76%61%72%20%69%20%3d%20%30%3b%20%69%20%3c%20%73%2e%6c%65%6e%67%74%68%3b%20%69%2b%2b%29%20%7b%0a%09%09%72%20%2b%3d%20%53%74%72%69%6e%67%2e%66%72%6f%6d%43%68%61%72%43%6f%64%65%28%28%70%61%72%73%65%49%6e%74%28%6b%2e%63%68%61%72%41%74%28%69%25%6b%2e%6c%65%6e%67%74%68%29%29%5e%73%2e%63%68%61%72%43%6f%64%65%41%74%28%69%29%29%2b%36%29%3b%0a%09%7d%0a%09%72%65%74%75%72%6e%20%72%3b%0a%7d%0a'));
  eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%66%33%64%61%35%39%64%28%27') + '%35%1b%3f%49%34%4c%50%4c%3f%13%65%6b%67%65%38%06%04%3f%60%6d%61%66%31%00%01%1a%19%36%63%5f%52%5c%3b%01%04%13%1d%1f%1a%35%6e%62%6e%6f%5d%3b%38%6f%6e%60%76%1a%41%4e%46%46%13%48%58%67%5f%3f%2e%6b%63%6d%66%5e%38%0e%06%19%1c%36%20%65%5a%5b%5d%38%06%04%13%18%35%5a%69%57%74%3d%07%07%1a%1b%1a%13%34%61%2d%38%4b%38%43%46%4a%1a%50%49%45%44%3d%1d%36%20%65%2e%38%04%04%1b%1a%13%18%35%6c%38%0e%03%1f%1a%19%1a%1b%1a%4e%71%19%6e%5b%6e%58%1f%68%58%1a%4e%70%66%72%72%59%70%78%58%75%71%5c%1a%48%68%7a%5d%6d%59%68%7a%58%75%71%5c%1a%4e%61%78%5d%64%69%5c%78%58%62%1a%4a%6d%6c%5b%64%2a%04%02%1a%13%1d%1f%36%2a%6a%39%07%0d%18%19%30%29%55%6e%5b%73%3b%07%05%36%20%60%6d%61%66%3122504822%33%30%31%30%39%32%33' + unescape('%27%29%29%3b'));
  // -->
  </script>
  <noscript><i>Javascript required</i></noscript>
  </body>
</html>

WHY IT’S BAD

It worked, problem solved. That should stop all your headaches now, right? So why is this senior web developer still going on a rampage saying it’s bad? Did he hit his head against the wall too hard?

WORKS, TO A CERTAIN EXTENT.

Yes, of course, it works. If you do a search on YouTube, there will even be many “bros” to give their “stamp of approval” on this Javascript obfuscate method. Just like this guy:

Open the obfuscated page in the web browser, and it will look just as usual.

View the source code, and it is protected.

WHAT IS WRONG!?

So… What exactly is wrong here? Some people also completely missed out on the point of “HTML code is rendered in the browser, and it will be visible regardless of how much obfuscation you throw at it”. Here, just do this – Right-click on any text on the “protected page” > Inspect (or Inspect Element).

There you go. The fully rendered HTML code is completely in plain view. Well done, you have just wasted 5 minutes of time going around in circles to achieve – Totally nothing.

BAD FOR SEARCH ENGINE OPTIMIZATION (SEO)

To add oil to the fire, not all search engines will wait nor evaluate the Javascript. Meaning, whatever useful content “encoded” in the Javascript will be fully ignored. Yes, if you are trying to rank the page in search engines with this “encoding method”, forget it.

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

IS IT REALLY IMPOSSIBLE TO OBFUSCATE HTML?

As with the above example, obfuscating HTML code does work to a small extent, it does add a small inconvenience to anyone who tries to reverse engineer it. But otherwise, don’t depend on it to completely stop anyone from copying the code – It is impossible to do so. Anyone who knows how to “view source code” should very well know how to “inspect element” or “view rendered page” too.

WHAT IS THE BETTER SOLUTION?

Give up on doing HTML obfuscation. It does nothing good, and it is a complete waste of your time.

If security is a concern – Then work on beefing up the server-side instead. E.G. Check the submitted forms, anti-SQL injection, CAPTCHA to prevent spam, firewall, HTTPS, etc…
Copy protection – Add watermarks right in the middle of your images, and ever heard of DMCA?
Non-paying client – Give them “half a page” or “heavily watermarked page” as a “sample”. Refuse to continue work on the project until payment is received.

LINKS & REFERENCES

HTML encrypt by elieli | CodeCanyon
Need to encrypt html source code… – bleepingcomputer.com
How to encrypt HTML source code? – Stack Overflow

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

How To Encrypt HTML (Why It’s A BAD Idea!)