DEV Community 👩‍💻👨‍💻

Cover image for React source code visible 😲
Dhanush N
Dhanush N

Posted on • Updated on

React source code visible 😲

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

Top comments (17)

Collapse
 
wpq profile image
Wpq

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 on

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
 
wpq profile image
Wpq

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
 
dhanushnehru 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
 
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
 
sankarmano89 profile image
Sankar Manoharan

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

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.

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!