How to secure your Javascript
Javascript is the most common language used for runtime web changes, data updates, or show animations. So we can say that the javascript is very useful for mostly runtime operations. With the use of javascript, we can do anything on our web page.
JavaScript is an interpreted language, not a compiled language. A program such as C++ or Java needs to be compiled before it is run. The source code is passed through a program called a compiler, which translates it into bytecode that the machine understands and can execute. In contrast, JavaScript has no compilation step. Instead, an interpreter in the browser reads over the JavaScript code, interprets each line, and runs it. Modern browsers use a technology known as Just-In-Time (JIT) compilation, which compiles JavaScript to executable bytecode just as it is about to run.
JavaScript is named after Java, and many ideas are borrowed from the Java language. Other than that, Java and JavaScript are two entirely distinct languages. The most significant difference between them is that Java is a compiled language, and JavaScript is an interpreted language. JavaScript runs on many browsers out-of-the-box, whereas Java applets require an additional plugin. Both languages have different runtime environments, different governing bodies, different libraries.
Despite all its faults, JavaScript is a very useful language. JavaScript runs in every web browser, out of the box. A JavaScript application runs on every device, whereas a desktop or mobile application runs only on the application it is targeted to (Windows, Mac OSX, Linux, iPhone, Android). This allows you to write cross-platform apps in a really easy way. JavaScript’s role has also expanded significantly. Platforms such as Node.js allow developers to run JavaScript server-side. It is now possible to create entire web applications in which both client-side and server-side logic is written in JavaScript.
So now the main question is:
How to secure our javascript code?
Now we all know that there are many ways to see the javascript on-page. So we lost our security there. To prevent this, there are some techniques we are going to learn.
Technique 1 : Prevention of view source and Inspect Element
Step 1: Disable the context menu for mouse
- Using below javascript snippet code you can prevent the context menu open using the mouse.
Step 2: Disable the context menu from shortcuts key
- Now we have disabled context menu from the mouse but what about the keyboard?
- We have the solution for that also.
- So with the use of this code, we have disabled the “Ctrl” and “Alt” key so we can’t use a combination of that key to use for any combination to use shortcuts.
- Protection of this code is entry point so when the user makes any event it first catch by this snippet code.
Technique 2 : Hide code from Inspect Element
- First time when you use this code it looks like magic. In a second, all the script tag are vanished or empty.
Option 1: Remove all script tags
- The above snippet code will help you to remove all script tags used in our page. First, it finds all script tag in the document then remove than one by one.
- Now you have a question. If we remove all script tags then all our events or activities will also remove. Right…
- I will describe it at the end of this technique.
Option 2: Remove all attributes and code from the script tag
- The above snippet code removes all script, id and src attributes from all script tags.
- Now you have a question. If we remove all script tags then all our events or activities will also remove. Right…
- Answer: No, Because of javascript one-time load feature it’s no longer require to thereafter it completely loaded. You can manually call the method if you now that method and its parameters.
Technique 3 : Hide code from view source
Option 1: Obfuscate Javascript using an NPM package
- For this, we need to use NPM as a tool to encrypt/obfuscate the javascript. There is a package named “javascript-obfuscator” which required the NPM for installation. We install this package globally so we can access it in any project.
- How to use this package?
- Step 1: Open a terminal and go to the directory which contains the javascript.
- Step 2: Run the below command.
- Above command creates obfuscated .js file in the same directory.
OR - You can also create a sub-directory and store output there.
- For more information, you can refer the below link.
Option 2: Obfuscate Javascript online tools
- You can also obfuscate javascript using the link below.
Link: http://www.javascriptobfuscator.com/Javascript-Obfuscator.aspx
Conclusion :
Security of the code is the first priory for any developer. So let’s take a step towards it by securing the code as much as we can. If you have any suggestions then share with us. Thank you.