DEV Community

loading...
Cover image for React source code visible ๐Ÿ˜ฒ

React source code visible ๐Ÿ˜ฒ

DHANUSH N
Tech autodidact ๐Ÿ‘‘
ใƒป1 min read

Do you know that when you deploy your React application which is created using ๐—ฐ๐—ฟ๐—ฒ๐—ฎ๐˜๐—ฒ-๐—ฟ๐—ฒ๐—ฎ๐—ฐ๐˜-๐—ฎ๐—ฝ๐—ฝ or your own webpack configuration to a live website like Netlify, Vercel, Heroku etc, your entire source code is visible to everyone from the sources tab of the developer toolbar as shown in the screenshot of this post.

React source code

This is not an issue with the ๐—ฐ๐—ฟ๐—ฒ๐—ฎ๐˜๐—ฒ-๐—ฟ๐—ฒ๐—ฎ๐—ฐ๐˜-๐—ฎ๐—ฝ๐—ฝ but all of the source code is added because of the source map

๐Ÿ˜ฒ๐Ÿ˜ฒ๐Ÿ˜ฒ

But you definitely don't want everyone to see your entire source code If it's a private repository or you're working on a client project.

There is an easy way to fix it.

Create a file with the name .env in your project folder with the below code inside it

GENERATE_SOURCEMAP=false

so when you run ๐—ป๐—ฝ๐—บ ๐—ฟ๐˜‚๐—ป ๐—ฏ๐˜‚๐—ถ๐—น๐—ฑ or ๐˜†๐—ฎ๐—ฟ๐—ป ๐—ฟ๐˜‚๐—ป ๐—ฏ๐˜‚๐—ถ๐—น๐—ฑ command from the terminal,

It will generate a ๐—ฏ๐˜‚๐—ถ๐—น๐—ฑ folder with minified files without a source map that you can deploy to the production.

Connect with me for more tech related information Twitter

Discussion (17)

Collapse
wsw70 profile image
wsw70

Ultimately the client code must run on the client so there is no way to make sure that your code stays private.

You can of course obfuscate/minify/uglify it but must not rely on its secrecy (especially from a security perspective)

Collapse
thinkjrs profile image
Jason R. Stevens, CFA • Edited

Similar to my thoughts: anyone with access to the client endpoint necessarily has access to the source. And removing the sourcemap is merely a cosmetic choice with no real source security improvement.

Collapse
wsw70 profile image
wsw70

This is also one of the reasons to never trust the client with anything you cannot control on the server side (typically a bearer)

Collapse
lexlohr profile image
Alex Lohr

You could generate the source maps, but don't deploy them to live; instead only make them locally available.

Collapse
code913 profile image
code913

i cant read any of the code snippets on mobile

Collapse
dhanushxeno profile image
DHANUSH N Author

Check now

Collapse
code913 profile image
code913

Still doesn't display
Why do you have to use weird characters?

Thread Thread
metammodern profile image
Bunyamin Shabanov

Check the same on other articles, maybe that's something with dev.to.

Thread Thread
code913 profile image
code913

Yeah it happens there too

Thread Thread
metammodern profile image
Bunyamin Shabanov

Then call moderator, or go create an issue somewhere, or send an email to support. Idk the issue tracking infrastructure on Dev.to. Just be a true dev!๐Ÿ˜„

Collapse
jackmellis profile image
Jack

Sourcemaps are invaluable for debugging production issues. I've dealt with bugs so complex (and unable to reproduce in dev) that having sourcemaps disabled meant it was near impossible to solve them.
There shouldn't be anything in your codebase that's secret or needs obfuscation. Trust me, if a hacker wanted to read and manipulate your client code, the lack of a source map would not prevent them!
Rather than blanket disabling sourcemaps you should be ensuring your app doesn't have security holes in it in the first place...

Collapse
sankarmano89 profile image
Sankar Manoharan

We need sourcemap in local so check the condition according like IS_DEV = true generate source map

Collapse
elabftw profile image
eLabFTW

No no no! You got it wrong. The best way is to NEVER ship software to the client this way you are sure that your code stays private!

Deploying an app on /dev/null is the best security one can have.

Collapse
fireping32 profile image
Prakhar Gurunani

Long time back, I saw the source code of a react site, which was a saas product with no GPL/MIT licence, and I could literally use their service through this hack ๐Ÿ˜…. But they have fixed it now.

Collapse
aheisleycook profile image
privatecloudev

yep many site maintainers foroget anythign is possible

Collapse
aheisleycook profile image
privatecloudev

Yep

Collapse
piotrlewandowski profile image
Piotr Lewandowski

"you definitely don't want everyone to see your entire source code If it's a private repository" - the best way to do so is to NOT publish your project. Otherwise: if it's in my browser, I can see it.