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 (18)
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.
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.
I just tested this with google.com with dev tools opened. I don't see any source maps.
Then Google probably does not ship them at all.
Agree with that. Thanks.
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.
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.
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.
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.
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.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 !
🖖🏿
When a client reports an error, I want to see the source code in the report and not the minimized one.
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.
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...
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