How to hide source code while i run react-app-rewired build and react-app-rewired start

Question

my browser is look like (https://i.stack.imgur.com/5qCnT.png) cross-env set GENERATE_SOURCEMAP=false&&react-app-rewired build can not hide my source code in browser

anything can solve this problem

Answer 1

To hide your source code, you can use obfuscation techniques that make your code difficult to read and understand. If you're using react-app-rewired, you can add an obfuscation plugin to the Webpack configuration.

Here's how to obfuscate your React app's source code using react-app-rewired and the javascript-obfuscator package:

Install the necessary packages: npm install --save-dev react-app-rewired javascript-obfuscator webpack-obfuscator Create a config-overrides.js file in the root folder of your project if you haven't already. This file will be used to customize the Webpack configuration.

Add the following code to your config-overrides.js:

const WebpackObfuscator = require('webpack-obfuscator');

module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins.push(
      new WebpackObfuscator(
        {
          // Add your obfuscation options here
          rotateStringArray: true,
          stringArray: true,
          stringArrayEncoding: 'base64',
        },
        // Add files you want to exclude from obfuscation
        []
      )
    );
  }
  return config;
};

This code will add the WebpackObfuscator plugin to the Webpack configuration when building your app in the production environment. You can customize the obfuscation options according to your needs. Check the javascript-obfuscator documentation for more options: https://github.com/javascript-obfuscator/javascript-obfuscator

Update your package.json scripts to use react-app-rewired:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

Now, when you run npm run build, your source code will be obfuscated in the production build. Note: Keep in mind that obfuscation will make your code harder to read, but it won't make it completely secure. Determined attackers can still reverse-engineer your source code. Obfuscation should be used as a part of a larger security strategy.