DEV Community

loading...

Is it safe to ship JavaScript Source maps to production?

Oyetoke Toby
Just a software engineer trying to make ends meet. My passion for Python and JavaScript is nothing to compare.
・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?

Discussion (15)

Collapse
ausginer profile image
Vlad Rindevich

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.

Collapse
prchdk profile image
Pavel Prichodko • Edited

Source maps are downloaded only if your browser has Developer tools opened.

Therefore shipping source maps to production will not affect your end-users and will help your team with the debugging.

Collapse
dyw972 profile image
Yohan D.

Agree with that. Thanks.

Collapse
rose profile image
Rose

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.

Collapse
thatonejakeb profile image
Jacob Baker

^ this. Security through obscurity does not work!

Collapse
ahferroin7 profile image
Austin S. Hemmelgarn

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.

Collapse
janhybs profile image
Jan Hybš

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.

Collapse
ahferroin7 profile image
Austin S. Hemmelgarn

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.

Collapse
dyw972 profile image
Yohan D.

Normaly when you code, you don't have each variable has meaningless alphanumeric mush.
A good Dev take care of the quality of the code because of the future. We never know.

Collapse
dyw972 profile image
Yohan D. • Edited

I was asking me the same question and after some research here is what I've found :

It's an article wrote by Chris Coyier, published Mar 1, 2019.

In my opinion this article is the answer to this question.

So,

Why people are agree to ship source maps to production ?

1 - It might help you track down bugs in production more easily
2 - It helps other people learn from your website more easily

Why people are not agree to ship source maps to production ?

1 - Sourcemaps require compilation time
2 - It allows people to "steal" your code

You can read more

here 👉🏿 css-tricks.com/should-i-use-source...

here 👉🏿 m.signalvnoise.com/paying-tribute-...

here 👉🏿 medium.com/@sujankanwar/enable-sou...

and here 👉🏿 sourcemaps.info/spec.html

Happy coding !

🖖🏿

Collapse
mausworks profile image
Rasmus Wennerström

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.

Collapse
dyw972 profile image
Yohan D.

The most important thing in this link is this update :

" It's not a practice to add sourcemap's to a minified file, unless the sourcemap is served from a private network. This is for various reasons security, obfuscation etc. But this is just my opinion,it varies depending on your actual requirement. For Example: If you have any error tracking tools which needs the code to be attached, then you will have to attach the sourcemap."

stackoverflow.com/questions/443154...

Collapse
tivnet profile image
Gregory Karpinsky • Edited

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

Collapse
darasimiajewole profile image
Darasimi-Ajewole

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