If you are using create-react-app for creating react applications and using yarn build to get build, your react codes might not be safe.
Because, if you run yarn build command without any spesification, it will generating source maps as well.
And if you put builded files without deleting source maps to your server, anyone can see your entire react project codes.
PS: I know everybody can see your JS files, but there is difference between them. Without source map, they can see compiled version, and even if they try to beautify them they can't understand what did you do exactly. But if you left source map files, they can see whole project like you see while development process.
How bad is it?
If you go this website, https://svgeditoronline.com/editor/ and open developer tools, and select "Sources" tab. Then you will able to see all project codes sadly.
What we have to do?
We have to delete .map files from builded files which is in build/static/js folder.
And for the next build you should change your package.json build command
find this line
...
"build": "react-scripts build",
...
change with this
...
"build": "GENERATE_SOURCEMAP=false react-scripts build",
...
Now, your code is safe. This is a small but important think.
I checked a lot of live react project, also checked selling react scripts on codecanyon, and guess what I found? Almost every project left .map files in static/js folder.
TL;DR
- Delete all your
.mapfiles frombuild/static/jsfolder. - Change your build command on
package.jsonfrom this"build": "react-scripts build",to this"build": "GENERATE_SOURCEMAP=false react-scripts build",for your next builds. - Now you are safe, I hope :)
Top comments (13)
Regardless if you see source files or not, it's in the browser and you can still get the whole page without much of a problem. Hiding "source" for a UI makes not so much sense as everything is exposed anyways and just beacuse it was uglified during the transpile process doesn't mean you can really hide your secrets in there or avoid having your web copied. You can copy transpiled code - JS and other and yes there are cerain tools to help you beautify it partially to make it a bit more easy to read. So no you're not any safer you're just building properly for production when you ditch source maps.
yes I know, but seeing like this and what you told is different, this is not cool for me, I don't want anyone sees my project code like this, I mean everyone can take my js files and beautfy them but non of them will not see clear like this.
What you're trying to achieve is security by obscurity and it's not even security. It's more of a source code protection which doesn't help since people trying to clone your page will succeed anyways. So you're just trying to make it hard to beacuse it's not protected. Now what's the point? People copy ideas not the code and that's the main issue. There's a lot of corporate espionage and they look what's done and how in terms od processes not the code. So what did you really achive? Preventing a teenager from copy-pasting your website? Comments here are explaining guidelines for dev.to basically your title is a click-bait. Not evil one just simply title doesn't represent what content describes. This is why your post is marked as low-quality. It shows how to hide source maps which has nothing to do with security word used in IT context.
relax mate, I'm not a killer :) maybe I wrote wrong title because of my english.
this is important for me, if it is not for you, it's okay. But some people forgetting private infos in comments. Because they tought it will deleted when they get build but not in source maps. So this might be bad at least, but anyways :)
Just saying why your posts might get low quality flag and thus be less visible.
thanks for warning :) I'll be more careful next time
I didn't do what you ask us to do to keep safe, but my codes are already transpiled in the web. Perhaps you can elaborate more on why it is not safe.
because of source map files, if you don't have, then you safe. otherwise look my example that I gave, you will see why you are not safe.
I have looked at your example, the source code can be seen with our naked eyes. Why it is not safe?
maybe "safe" is a wrong word because of my english, I'm trying to say, everybody can access your js file, but if you access like this, this is not cool, at least for me.
example: maybe you are using a paid service and the api key may be clearly visible.
That's not how api key stealing works, it will be bots looking for keywords like fetch. Besides you shouldn't have any secret like api key on your client app like React. Instead, you should build a proxy server with permission only to your app, and that's where you use your api key.
CRA already warn you on this:
create-react-app.dev/docs/adding-c...
Read more here:
stackoverflow.com/questions/468380...
unicorn-utterances.com/posts/keepi...
some people forgetting private infos in a comment. when they get build they know comments will remove, but not in source maps. so this might be a problem for someone