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.
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.
Feel free to connect with me on X , Instagram, Github or Youtube.
Thanks for reading. Please give a like as a sort of encouragement and also share this post in socials to show your extended support.
Top comments (14)
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)
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.
This is also one of the reasons to never trust the client with anything you cannot control on the server side (typically a bearer)
You could generate the source maps, but don't deploy them to live; instead only make them locally available.
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...
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.
We need sourcemap in local so check the condition according like IS_DEV = true generate source map
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.
yep many site maintainers foroget anythign is possible
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!๐
Yep
Check the same on other articles, maybe that's something with dev.to.
Check now