DEV Community 👩‍💻👨‍💻

Oyetoke Toby
Oyetoke Toby

Posted on

Is it safe to ship JavaScript Source maps to production?

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?

Top comments (19)

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

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
 
am_rahuls profile image
Rahul

I just tested this with google.com with dev tools opened. I don't see any source maps.

Thread Thread
 
prchdk profile image
Pavel Prichodko

Then Google probably does not ship them at all.

Collapse
 
dyw972 profile image
Yohan D.

Agree with that. Thanks.

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
 
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. • Edited on

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
 
yadimon profile image
Dmitry Gorelenkov

there is a security risk, because the comments of all the code, can contain names/internal urls/company information.
This information is useful for hacker (even for social engineering). So if you care about security, make no sourcemap, or private network source map.

examples:
comment like
// read devTeam1.jira.my-company.com/ticket-13/
gives infomation about ticket, about internal urls, about tools devs use.

// John Parker confirmed, we need this for customer
now i know the manager name

// run on hidden-testing-dev-url.my-company.com/testing/url/test
now i can try to hack the testing systems, that are probably not so secure as prod.

Collapse
 
tivnet profile image
Gregory Karpinsky • Edited on

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

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
 
duannx profile image
Nguyễn Xuân Duẩn • Edited on

Maybe I come here a little late. But I can confirm that source map files will only be loaded when the developer tool is opening (at least on Chrome). So

- About the bundle size: This will not affect your end user at all

- About the security: Suppose you store some secret on the client and use it somewhere like sending a request. The stalker just needs to look into your networks to steal the secret. They do not need to look into your code at all. The source map just let them easier to understand your code. So, including the source map will not be a security risk.

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

🌚 Life is too short to browse without dark mode