Automatically generated source-maps could be revealing your private project&...

Source-maps could be revealing your private project files

You could be making your frontend application source code public by mistake with automatically generated source maps.

When you start creating your web application, you usually reach for some of the popular libraries or frameworks. For example, you could reach for the well known “create-react-app” CLI, which will do everything for you.

The CLI will generate bundle files automatically along with files called “source-maps”. Every time you make production build of your app, “.js.map” files are generated right next to your bundle files. Those are source-maps. They are created in the same folder as your bundle files, and when you do not pay enough attention, your code could be publicly available when you publish them to your server. This does not apply only to the “create-react-app” CLI, this can happen with any other bundlers.

When you publish your minified JavaScript files to your server, your source-maps could be published also by mistake, which means that everyone could see your private source code. This includes a project’s raw .js, .ts, .coffee, .sass files.

What are source-maps?

In a nutshell, a source-map is just a simple JSON file, which includes an object. This object has two important keys: “sources” and “sourcesContent”. The “sources” key contains an array of names of local files in your project and the key “sourcesContent” contains an array of content of those files.

See an example of a source-map file below for better understanding.

What does it mean?

If you make your source-map files publicly available, anyone can read parts of your source code.

What could be the impact?

For some projects, it might be bad. Companies put their money and effort into making a product which has a lot of logic on the client-side. Using source-maps anyone could copy this project, modify it and publish it on its website as their “own” project and start making money or even dishonor the name of your app. In that case, you should make sure you do not make your source maps publicly available.

How could you benefit from this?

Some projects are open to publishing source-maps because it helps people learn new technologies, how to structure large scale applications, etc. You can learn a lot of useful things when reading code someone else written, especially when you are a beginner in the world of web technologies and all you see is minified files. This allows you to take a closer look under the hood of some projects.

How do you know a website has publicly available source-maps?

Turn on your Google Chrome DevTools, see network log, and go through downloaded JS files and see if at the end of some file is a line similar to this one.

//# sourceMappingURL=main.1ad01fd1.chunk.js.map

This line describes the location of a generated source-map file for this bundle. If you visit this sourceMappingURL , you should be able to see the source-map file.

If you do not see this line, there still may be a chance that the source-map file is generated. Just try to open any JavaScript bundle file in a new window and then replace “.min.js” with “.min.js.map” in your URL bar, and if you get lucky enough, you will see the source-map file.

How to view source-maps in a more readable way?

For example, if you are using Google Chrome, just go on some website which uses React (you can see that website is using React if you use React Developer Tools extension) and if you get lucky, this website has publicly available source-maps. Open Google Chrome DevTools, reload your website, click on “Sources” tab and on the left side, you will be able to see files of this website. Those files may also include files from source-maps, so you can see the project’s .ts, .coffee, .tsx, etc. files there.

Go to the official React webpage or official Angular webpage and give it a try!