CODEWITHSUNDEEP
reactjsasp.net-coregoogle-developer-tools
Rohit Sawai
Rohit Sawai

Reputation: 839

How to stop exposing source code of react in developer tools of browser?

I'm developing project in ASP.NET Core and React. In testing, I came across one big security issue. Source files of react get expose in google developer tools. I have tried to remove webpack source maps but that thing didn't work for me and the reason is they have not mentioned in which webpack folder do we need to make change as there are 6 folder containing webpack. I'm new to this stack and not getting how to deal with this flaw. How can I fix this issue?

Screenshot of Google Developer Tools

Upvotes: 6

Views: 15152

Answers (5)

Peter
Peter

Reputation: 111

You don't have to add new files to the project or remove .map files; you can also just set the environment variable GENERATE_SOURCEMAP to false either manually or by adding it to package.json before the build command:

Modifying package.json

Before:

  "scripts": {
    ...
    "build": "react-scripts build",
    ...
  },

After:

  "scripts": {
    ...
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    ...
  },

Manually

Run export GENERATE_SOURCEMAP=false before building in the same terminal.

Upvotes: 3

sai reddy
sai reddy

Reputation: 129

if you are using craco to build your project, use this

"scripts": {
    "start": "craco start",
    "build": "rimraf ./build && craco build && rimraf ./build/**/*.map",
  }

Hope this helps

Upvotes: 2

Sheldon Welinga
Sheldon Welinga

Reputation: 81

I had the same issue. This is how I fixed it. Create a file called .env in the src folder then add this code GENERATE_SOURCEMAP=false. Then run npm run build or yarn run build. This solved the issue for me

Upvotes: 8

Rohit Sawai
Rohit Sawai

Reputation: 839

Its very easy and its possible to hide complete source code which gets expose to end user in developer tools. You need to update package.json file from ClientApp folder.

Before updation

    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",    //UPDATE THIS LINE
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
    }

You need to use following code instead of above code:

After updation

    "scripts": {
    "start": "react-scripts start",
    "build": "rimraf ./build && react-scripts build && rimraf ./build/**/*.map",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
    }

Above code worked for me. This thread helped me in achieving my goal. For more details you can check that as well.

Upvotes: 20

Yash Gadle
Yash Gadle

Reputation: 451

You can never hide your code on the browser. The best you can do is obfuscate your code. Here is a very useful video that explains your concern: https://www.youtube.com/watch?v=hOtZhNb4TKg
Also, use this as your reference: https://reactjs.org/docs/optimizing-performance.html#use-the-production-build

The crux of the above video is to keep your business logic and secrets on the server which is always secure.

Upvotes: 1

Related Questions