3 Ways To Hide Javascript Code From Client (Simple Examples)

Welcome to a tutorial on how to hide Javascript code from the client. Have some security concerns and don’t want the users to see your source code? Or maybe you don’t want to release the source code to a client who is refusing to pay?

It is impossible to totally hide the Javascript source code, as it is downloaded into client computers in cleartext. There are only ways to hinder and make it difficult to read the code:

  1. Obfuscate the Javascript.
  2. Disable right-click on the pages.
  3. Disable view source shortcut keys.

Just what is obfuscation, what are all these gimmicks, and how do we do all of these? Read on to find out!

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/hide-javascript-code/” title=”How To Hide Javascript Code From Client” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

“HIDING JAVASCRIPT”

All right, let us now look into the various technique to make Javascript hard to read.

 

METHOD 1) CODE OBFUSCATION

First, we have something called “obfuscation”. Which, is scrambling the code so that it becomes humanly illegible, but retains the functionality otherwise. To do code obfuscation, there are 2 options – Either use an online tool, or download and install a Javascript obfuscator.

 

ONLINE OBFUSCATOR

There are a ton of these tools online, just do an online search and you will find more. The usage is generally as easy as copy-and-pasting your code into the text boxes and hit the “obfuscate” button.

 

OFFLINE OBFUSCATOR

The offline obfuscators generally offer more options such as “advanced scrambling” and “add random code” to further confuse human readers… But you will have to download or even pay for it.

 

METHOD 2) DISABLE RIGHT-CLICK

2-disable-context-menu.html
<script>
document.addEventListener("contextmenu", e => e.preventDefault(), false);
</script>
<p>
  Try to right click on this page - Nothing will happen.
</p>

Obfuscating the code will discourage some smart alecks from reverse engineering the source code. But while you are at it, why not make it even more difficult? In Javascript, it is as easy as document.addEventListener("contextmenu", e => e.preventDefault(), false); to disable the context menu  – Stop people from doing “inspect element” and “view source code”.

 

 

METHOD 3) DISABLE THE “VIEW SOURCE” SHORTCUT KEY

3-disable-keys.html
<script>
document.addEventListener("keydown", e => {
  // USE THIS TO DISABLE CONTROL AND ALL FUNCTION KEYS
  // if (e.ctrlKey || (e.keyCode>=112 && e.keyCode<=123)) {
  // THIS WILL ONLY DISABLE CONTROL AND F12
  if (e.ctrlKey || e.keyCode==123) {
    e.stopPropagation();
    e.preventDefault();
  }
});
</script>

<p>
  Try to press CTRL-U or F12 - Nothing will probably happen.
</p>

Disabling the right button is not enough. People can still do the shortcut key of “view source code” (usually Ctrl-U) or fire up the developer’s console (usually F12). If you really want to make lives miserable, we have to further disrupt the control and function keys as well.

 

 

WARNING) VERY ANNOYING

The above mechanisms will pretty much annoy the heck out of most code ninja wannabes, and really discourage them from doing anything funny. But nope, it will not stop the true master code ninjas from getting what they want.

Obfuscated code can be reverse-engineered given sufficient time. There is also no way to block the browser’s “view source” menu, no way to stop the developer’s console, anyone can just save the entire page. So you decide, is it worth spending so much time and effort on building these gimmicks that can be broken regardless?

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

EXTRA BITS & LINKS

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

 

SECURITY CONCERNS?

If security is your main concern, then obfuscation for Javascript is not enough. You really should be looking at the overall system design instead, with things like:

  • Enforce the use of HTTPS.
  • Javascript should only be used to collect data.
  • Send collected data to the server. Transactions should be done on the server-side, totally transparent to the users.
  • Public and private key cryptography.
  • CSRF protection.
  • Restriction by IP address – Only certain computers can access your web application.

 

NON-PAYING CLIENT?

If you have a client who is refusing to pay, then work out a plan to “help” them –

  • Release a limited version, with limited functionality.
  • Plaster your app with plenty of “irritate ware”.
  • Remove their branding and blanket “this is a trial version” messages everywhere.
  • Wait for 30 seconds before processing anything.
  • If they still refuse to pay after a certain period, up the game by restricting the number of uses. For example, “you can only save up to 10 times a day”.
  • If they insist on not paying, restrict down to 5 uses a day, and popup a “this is a trial version” message every few minutes.
  • For the worst kind of clients, remove all the “irritate ware” but make them watch ads on every click. 😆

 

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

How To Hide Javascript Code (Click to enlarge)

 

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!

3 thoughts on “3 Ways To Hide Javascript Code From Client (Simple Examples)”

  1. Hi, there:

    If using Firefox, one can still view a page source code.
    Just go to Tools > Browser Tools > Page Source

    1. Hi! Have you tried reading the tutorial? Don’t even have time for a few quick slides? Here’s the introduction once again, in big red bold:

      It is impossible to totally hide the Javascript source code, as it is downloaded into client computers in cleartext. There are only ways to hinder and make it difficult to read the code.

Leave a Comment

Your email address will not be published. Required fields are marked *