5

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

Rohit Sawai
  • 739
  • 1
  • 11
  • 28
  • 1
    All clientside code is exposed. Treat it so, there is no remedy for that. Keep any secrets serverside. – Amadan Nov 21 '19 at 07:03
  • Well, you can't just remove the code from the browser, the browser needs the code to be there. You need to mangle, minify, and bundle your code. And as @Amadan said, any secrets should be on the server. – Baruch Nov 21 '19 at 07:04
  • @Baruch: Mangling, minifying and bundling can be reversed (except for local variable names). One should not depend on [security through obscurity](https://en.wikipedia.org/wiki/Security_through_obscurity). Anyone moderately determined and competent will not be defeated by minification. – Amadan Nov 21 '19 at 07:05
  • @Amadan Yes clientside code gets expose but lots of logic resides in client code including information about cookies, values stored in localstorage and the logic of how those values are mapped is also resides in that code and exposing complete file would be big threat – Rohit Sawai Nov 21 '19 at 07:11
  • @Baruch Minification code can be reversed. – Rohit Sawai Nov 21 '19 at 07:11
  • 1
    Then rethink what you want to put into cookies and localsorage, and move the logic to the server. There is _no way_ to secure the clientside info. Everything your browser knows, the user of the browser can know as well. – Amadan Nov 21 '19 at 07:12
  • @Amadan Does removing sourcemaps would work? – Rohit Sawai Nov 21 '19 at 07:13
  • No. This is not a matter of source maps, nor is it particular to React — it is the fact of life in any client-server architecture. Never tell the client anything you're not willing for the client user to know. E.g. one might ask "why do they allow hacking in League of Legends / Dark Souls / ", but the game is a client, and a sufficiently determined hacker can always subvert it. The only way to be secure is keeping your secrets in the server. – Amadan Nov 21 '19 at 07:14
  • Your production build will not show the codings in developer tools. You can configure those in webpack – karthik vishnu kumar Nov 21 '19 at 07:24
  • @karthikvishnukumar how can I do that? – Rohit Sawai Nov 21 '19 at 07:30
  • Take a look at this link https://webpack.js.org/guides/production/ – karthik vishnu kumar Nov 21 '19 at 07:38
  • My guess is that you don't include source maps when you [publish your app with release config](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-publish?tabs=netcore21). Everyone telling you you should mess with webpack config must have missed that you have an asp.net app. Without sourcemaps the browser still has all your code so you should not store secret information in JavaScript; with or without minification or source maps. – HMR Nov 21 '19 at 08:56

5 Answers5

16

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.

Rohit Sawai
  • 739
  • 1
  • 11
  • 28
6

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

Sheldon Welinga
  • 61
  • 1
  • 1
2

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

sai reddy
  • 39
  • 1
  • 3
1

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.

Yash Gadle
  • 427
  • 6
  • 14
  • Thank you for the video and link. I've seen that video which is saying what I'm asking is impossible. Better to keep secret code at server side is what that video saying. I'll check that documentation as well. – Rohit Sawai Nov 21 '19 at 07:32
0

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.

Peter
  • 51
  • 4