How to decipher the encrypted looking javascript?

Question

I am currently working on a front end project. I was looking how can I prevent my source code from publishing to internet. By chance while searching over internet, I found out some websites (for example this: bit235.com) which does not show up their source code. Javascript code in particular. Can someone please help me how does this work? Is it a good practice to hide our source code. Also, if yes what are good methods to do so?

Answer 1

Javascript is executed client-side, so it always must be sent to the browser to be executed and cannot be completely hidden. If you want to hide secrets you must do this in the backend.

You can use code obfuscation to make it hard to read the javascript. For example, this can automatically change function names to random letters, which makes it harder to understand the purpose of the functions.

However, you should not rely on obfuscation to have a "secret" source code. It is still sent to the browser and can be reverse engineered (manually and partially automated I guess). Your application should also be secure, even if the source code is known. Obfuscation is just an additional layer of defense.

Answer 2

You cannot hide a client-side rendered Javascript.

But as explained by Jason Killeen on quora,

There are 4 main methods for hiding your website’s code: Uglification, Self-Redaction, Canvases, and Server Side Scripting.

Uglification (also known as minifying)

is when you pass your code through a script that makes it very difficult for a human to understand. What it does is it passes all your javascript and/or css through a function that strips all of your easy to read variable names like “userName” and “date” and replaces them with meaningless names like “a” and “b”. While the this does not make your source code impossible to decipher, if your code is complex enough, the amount of time it would take a casual attempt to turn the minified code into something understandable is often enough to discourage most attempts to reverse engineer your code. Minification also makes your code more efficient so worth doing even if you are not worried about people stealing your code.

Self-Redaction

is another technique that is not full proof, but will hide your code from the vast majority of snoopy developers. Once Javascript is loaded into your browser’s memory, the code no longer needs to exist on the page. So, what some frameworks do is they load all of your JavaScript into a script tag, and then the very last line of the code is the command to delete the tag. In this case, your script will be loaded into memory, but anyone using something like Chrome’s inspect tool to find your script will be unable to find it. Stealing self-redacting code requires specialized knowledge to capture the page’s HTML/CSS/JS package and NOT execute the imbedded JS.

Canvases

are an alternative to HTML. They are the thing added in HTML5 that made everyone think we did not need Flash anymore because you can render whatever you want into them. While HTML can not be hidden, a canvas only shows up in your browser as a canvas element, and everything in it is just a field of pixel data generated by your JavaScript. So, if you render your whole web application to a canvas with JS, and then redact the JS, you could have a fully functional website with nothing visible in the inspection tool other than a canvas tag.

Server Side Scripting

is the most full proof way to hide code. Basically, you put all the functional code on your server in the form of PHP, ASP, or some thing of the sort. What you send the browser is not fully functional code, but just the instructions it needs to interact with the code on the server. So you might send the browser the AJAX function it needs to call a function on your server, but since the function is not part of your HTML/CSS/JS package, it’s code is never actually exposed to the end user.