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!

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes “Hiding Javascript” Useful Bits & Links
Tutorial Video The End

 

DOWNLOAD & NOTES

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

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

 

“HIDING JAVASCRIPT”

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

 

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.

 

2) DISABLE RIGHT-CLICK

2-disable-context-menu.html
<script>
document.addEventListener("contextmenu", function(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", function(e){ e.preventDefault(); }); to disable the context menu  – Stop people from doing “inspect element” and “view source code”.

 

 

3) DISABLE THE “VIEW SOURCE” SHORTCUT KEY

3-disable-keys.html
<script>
document.addEventListener("keydown", function(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.

There are no locks that are unbreakable in this world, and the obfuscated code can still be reverse-engineered given sufficient time. So you decide, is it worth spending so much time and effort on building these gimmicks that can be broken regardless?

 

USEFUL 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 good 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 and send to the server. The transactions are 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? 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.

      Open the developer’s console, the Javascript is right there. Manually open the browser’s cache, the Javascript is right there. Save the entire page, the Javascript is right there. Good luck trying to block all “view source”, “console”, and “save page” browser features.

Leave a Comment

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