loading...

Is it safe to ship JavaScript Source maps to production?

oyetoket profile image Oyetoke Toby ・2 min read

Source maps are basically files generated while building for production that can help revert a combined/minified file back to an original state.

Most JavaScript and CSS sources are usually minified and source maps serve as a memory map to the compressed files. It's generally a good practice to minify and combine your assets (Javascript & CSS) when deploying to production. This process reduces the size of your assets and dramatically improves your website's load time.

When you minify and compress your JavaScript or CSS files, the output files are usually minified, unreadable and totally different from the original source created by a developer. This is actually one of the easiest ways to increase your website performance.

When you build your application for production, source maps are usually generated alongside your built files which are minified already. They hold the original sources of your code and helps in debugging your code live.

With source maps, you can click on a certain line and column number in your generated JavaScript, and that will do a lookup in the source map which will return the original location. Most developer tools can now parse the source map automatically and look as if you're running the unminified and uncombined files.

However, is it safe to leave that in production because, with the source map, you can generate the real source code and able to read the unminified code?

I am not a security guy or so, I am just curious if there could be a way that could make your site insecure. Unless you have your secret/api keys hard corded or something similar.

So is it safe to ship source maps to production?

Posted on by:

oyetoket profile

Oyetoke Toby

@oyetoket

Just a software engineer trying to make ends meet. My passion for Python and JavaScript is nothing to compare.

Discussion

markdown guide
 

I'd say no, there's no security risk to shipping source maps to production. If a person thinks that code obfuscation is a reliable form of security then they already have a problem.

 

^ this. Security through obscurity does not work!

 

I think it's more about the bundle size than a security. When you leave source maps for production the user has to download not only the minified bundle, but also the source map file which contains the source code and the mapping between them. I'd say it's better to ship unminified code than a code with source maps because it eats less traffic.

Source maps are a development tool. It shouldn't be used in production.

 

I think the browser downloads the sourcemaps only if you open the devtools! stackoverflow.com/questions/443154...

 

However, is it safe to leave that in production because, with the source map, you can generate the real source code and able to read the unminified code?

If the minification doesn't actually break anything (that is, your code works identically before and after minification), you can do this without a source map. Yeah, you won't see 'actual' variable and function names, but anybody who's actually good at JS shouldn't need that (it makes it easier, but isn't required by any means). Most developer tools actually have a way to 'pretty-print' source code (that is, display it with what they consider 'correct' formatting for human consumption). Try viewing your minified code through that (or just send it through any of the widely available formatting tools out there), and you'll notice that it's actually rather readable other than the mangled variable and function names.

So no, there's no security risk as long as you're not encoding secret data into your variable and function names.

 

anybody who's actually good at JS shouldn't need that

Good luck going through thousands of lines, where each variable is meaningless alphanumeric mush.
Even with pretty print option, you'll have a hard time understanding the code without investing a good portion of time.

 

Except that you almost always have a debugger available, which means you can easily correlate code with what's happening on the page. Drop a breakpoint at the start of each function, reload, and you can literally follow the flow of execution from the very beginning.

Yes, it's not easy, but it's definitely doable with patience, and anybody who's likely to rip off your code will generally have a lot of that.

 

I'd go as far as to say it's even good practice.

In theory, you should never have to debug in production. But in reality it happens all the time, and source maps help out a lot.

 

When a client reports an error, I want to see the source code in the report and not the minimized one.

 

While it's awesome(debugging) to ship your source maps to production, it bloats up your production code, so I know for sure that's a down side to it