Source maps are enabled by default in React

I recently made quite the discovery that the source maps for your source files, are enabled by default, in React.

This is generally something that you may not want in public production builds. Even though any code ran in a browser is accessible, there's several reasons you don't want that code to be de-obfuscated and shipped with all your private comments.

Your website can now be cloned.

I do not mean that your website can't be cloned without the source map. It's entirely doable, however, with the source code, your website can be cloned way easier and you could now have to compete with another platform - using your own code.

Your frontend code is useless without a backend, but now that your competitor has your source code with all your comments and readable parameters, they can just as easily emulate your backend!

When Adobe Flash games were popular, Habbo Hotel was thriving for years. Then users wanting to play without having to pay for furnitures decided they wanted to copy Habbo Hotel.

So they did it. Using Habbo Hotel's own flash files for the frontend, they used various methods to reverse engineer and crack the communication protocol to then create a server that emulates that of Habbo Hotel's servers.

But what wasn't doable during all these years (over a decade!) was modifying the frontend client...because it was obfuscated and hardly possible to work in! Had the source code for the frontend been accessible during all these years, I'm certain that Habbo Hotel would not have survived!

Sensitive comments can accidentally be left public.

Sometimes when you're coding, you might leave comments that may or may not be considered sensitive. In this case, I'm mostly referring to links to internal tools used by your organization.

Usually, internal tools are locked behind a local VPN by the organization and can't be accessed by the world wide web and in other cases - that would be a whole another security issue to discuss.

Regardless, if a malicious user would find a comment containing a link to an internal tool, this can be a major piece in their social engineering attack.

I have myself come across 3 different links to internal platforms at a large organization, that was left in comments in the source map. I notified them of this and they promptly removed their source map from the public.

How do I turn off source maps?

If you have read through my reasoning for calling public source maps - bad practice; and want turn off source maps in production for React:

You can either in your server, when serving *.map files - only approve the request when the address is local, or, if you wish to remove them altogether:

In your build script, assign a value of false to a GENERATE_SOURCEMAP environment variable, as such:

set="GENERATE_SOURCEMAP=false" && react-scripts build