DEV Community

Cover image for Your React Codes Might Not Be In Safe!
Tayfun Erbilen
Tayfun Erbilen

Posted on

Your React Codes Might Not Be In Safe!

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.

Image description

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",
...
Enter fullscreen mode Exit fullscreen mode

change with this

...
"build": "GENERATE_SOURCEMAP=false react-scripts build",
...
Enter fullscreen mode Exit fullscreen mode

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 .map files from build/static/js folder.
  • Change your build command on package.json from 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)

Collapse
 
_hs_ profile image
HS

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.

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen

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.

Collapse
 
_hs_ profile image
HS

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.

Thread Thread
 
tayfunerbilen profile image
Tayfun Erbilen • Edited

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 :)

Thread Thread
 
_hs_ profile image
HS

Just saying why your posts might get low quality flag and thus be less visible.

Thread Thread
 
tayfunerbilen profile image
Tayfun Erbilen • Edited

thanks for warning :) I'll be more careful next time

Collapse
 
artidataio profile image
Imaduddin Haetami • Edited

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.

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen

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.

Collapse
 
artidataio profile image
Imaduddin Haetami • Edited

I have looked at your example, the source code can be seen with our naked eyes. Why it is not safe?

Thread Thread
 
tayfunerbilen profile image
Tayfun Erbilen

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.

Collapse
 
apo-bozdag profile image
Abdullah Bozdağ

example: maybe you are using a paid service and the api key may be clearly visible.

Collapse
 
artidataio profile image
Imaduddin Haetami

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...

Thread Thread
 
tayfunerbilen profile image
Tayfun Erbilen

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