Protect Your React.js Source Code In Production Build
In this article we will be creating a secured production build of a react project created with create-react-app. For you to follow along with this article it is must that you have basic knowledge of React.
Normally you build your react app using npm run build or yarn build. After that you get build folder inside your working directory and you deploy the build folder’s content to any hosting provider. If you inspect the deployed version of your app, you can see all the source code that you write also the node_modules folder inside Source Tab, like this
From this anyone can see your component’s structure and your code. Also the node_modules is exposed. To hide this we have to disable our source maps when building our app. Which only leaves *.js files inside build/static/js directory. Those JS files are minified and are not human readable. This process of making source code ugly or non human readable is called Obfuscation. Or the by defination,
Obfuscation is the deliberate act of creating source or machine code that is difficult for humans to understand
When you run npm run build it minifies the code and generates source maps. The JS files inside build/static/js ends up being sort of obfuscated as a byproduct of minification.
To disable the source maps add a new .env file at the root of your project, like this
and add GENERATE_SOURCEMAP=false, Like this
and then run npm run build after the build deploy your application and inspect your app. Now there is no more code that you write appears and all the code is minified inside main.[hash].chunk.js file which is obfuscated. Also the node_modules folder is no more there.
You can modify your build even more by adding more configurations to your .env file. To learn more check out this official docs from create-react-app for Advance configuration.
If you want to obfuscate user passed contact links like an email, tel, sms etc, there is cool npm package called react-obfuscate for you to use.
Further, if you want more security beside just minified JavaScript files you can use jsscrambler. It’s a very helpful tool for securing the client side code from spamming and reverse engineering and more.
Hope this article is useful. Feel free to reach out to me for any queries.
