How to hide the JavaScript source code from browser viewing?

Does create-react-app show all your code in the production and do you want to know how to hide JavaScript source code from the browser viewing?

Let’s consider you have a production-ready React.js application that is created using create-react-app, a comfortable environment to build a single-page app. Or you have created a web app using your own webpack configuration and deployed it with a hosting platform like Azure, AWS, Vercel or Netlify, etc. 

Now, you found out that your React.js code for the website is visible to the public through the browser’s developer tool. 

This will be fine if you have made the source code publicly available on GitHub but if it is a private repository you might want to hide the entire source code. 

If your web application code is visible to the public in this way, this article will help you to keep your code protected. However, before going to the answer first understand what makes the source code visible to the public through the web browser, and is it really possible to completely hide your source code?

‍

The reason behind the source code visibility in the browser

When you start creating the front-end web application with React.js, you might automatically generate the source maps using the “create-react-app” CLI command. The command generates a bundle file along with the “source maps” files.  

The same thing can happen with any other bundle and if you do not pay attention to these files, the app source code will get publicly available.  This may cause big trouble for the client projects making them vulnerable to reverse engineering. 

Business organizations put their time and resources into app development that has most of its logic on the client side. With source code accessibility, anyone can copy the source code, modify it and publish it or may dishonor the name of your web app. 

So is there any way to fix it?

Yes, there are many ways to fix this problem but not completely. In fact, even if you obfuscate your source code or hide it using certain tricks, you can only add some level of difficulty to the code, so that it is not completely accessible to the client side. 

In reality, it's impossible to completely hide your source code from the client side.

‍

Ways to make your react source code invisible to the web browser

When you create the build folder of your React.js application, it contains HTML, CSS, and JavaScript files along with the source map files. To make your code invisible on the browser you can delete the map files and then deploy the build folder.

However, it's not the professional way, here are a few ways to make your source code invisible to the browser. 

1. Create a .env file

Create a file with the name .env inside your project folder ( not inside the src folder) with the same path where package.json is defined and add the below code inside it:

Copy
1     GENERATE_SOURCEMAP=false;
2     

Now build your app using npm run build or yarn run build from the terminal. It will generate a build folder without a source map, that you can deploy to the production.

‍

2. Us_e package.json file_

Change your build command in the script object as:

Copy
1     // For the Windows OS type the following command in cmd
2    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"
3    
4    // For Linux OS
5    "build": "GENERATE_SOURCEMAP=false react-scripts build"
6    
7     

3. Use the cross-env package

Next, you can also use a package called cross-env. It injects your environment variables and works with  Windows, Linux, and other environments.

Copy
1     npm install --save-dev cross-env 

And then add the following command.

Copy
1     "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build", 

Set it for the multiple global variables.

Copy
1     "scripts": {
2    "build": "cross-env NODE_ENV=production OTHERFLAG=myValue webpack --config build/webpack.config.js"
3    }
4     

‍

4. Code obfuscation

It makes the code unreadable by humans while retaining functionality. It can be done through online tools or one can use the JavaScript obfuscator. 

Some popular obfuscators are,

• Obsuscator.io
• JavaScript Obfuscator

These obfuscators offer features such as variable renaming, string extraction, and encryption, dead code injection, control flow flattering, and other code transformation techniques to confuse the human readers further.

‍‍

5. Disable Right-click context menu in JavaScript

In the JavaScript, you can prevent right-clicking on any element to disable it and add the following code to the script. 

Copy
1     var myElement = document.getElementById("myElement");
2    myElement.addEventListener("contextmenu", function(event) {
3        event.preventDefault(); // Prevent the default right-click menu behavior
4    });
5     

‍

Conclusion: 

In the article, we have learned about the different ways to hide the React.js source code from the web browser but the fun fact is, everything on the web page is rendered by the browser itself. That means they are holding all the keys to your JavaScript.

Though you can make the source code complicated by adding certain levels of difficulty so it will be hard to understand by humans. But the browser may develop the capability to undo it in the future. 

Well, for now, you can use the tricks in this article to hide your React.js code.

And if you want to accelerate your web app development with React.js try using DhiWise- The only developer's platform that empowers them to build single and multi-page apps in a few clicks.