How does the browser get hold of source maps?

Question

I am trying to understand how source maps work. I created a simple web server with one page using nodejs. Installed jQuery which comes with a minified version and source maps. I then put a script tag on my web page including the minified version of jQuery. I can now browse through the unminified code in chrome developer tools thanks to source maps. But how?

I analyze the stuff sent from the server and the source maps are not transferred. They are not shown in the network tab of chrome developer tools and they are not included in the downloaded content of the minified jquery file. The only thing is //# sourceMappingURL=jquery.min.map at the end of the minified jQuery file. How can the browser access them?

I am partly wondering because in my work I am creating an application and it would be nice to have the ability to trace errors with source maps in production. But now it seems that if I want to allow that, it also means that anyone visiting the site can get the unminified code. Is that correct or can I control how source maps are transferred to the client from the server?

Edit: Thanks for the answers. I also did a bit more research myself logging each request the server received. If debugger tools are used, the source maps are requests at the url specified in the end of the minified file. The fact that chrome hides this makes stuff very confusing. If I block the source map from being transferred, source mapping will not work but chrome will also cache the source map. I.e. if I allow the source map, view it, then block it and view again source mapping may still work.

Answer 1

Source maps are indeed transferred, but in current versions of Chrome they are not shown in the Network tab. According to this answer, source maps used to be visible on the Network tab, but at some point they decided to change it so that the requests are no longer visible.

As for keeping your source maps private, one of the solutions mentioned in this answer is to create an .htaccess file that restricts source map access to clients from your local network. Another way to do it would be to set up authentication, so you have to log in to the site to be able to view the source maps or else you get a 403.

Answer 2

In that case the browser is requesting the jquery.min.map file relative to the src URL of the <script> element (the "source origin"). (And the source map likely embeds all of the sources in sourcesContent.) I'm not sure why it doesn't show up in the network tab (I've never checked before). In other cases the source map can be entirely embedded in the script. You could conceivably put the source files behind a URL that isn't publicly accessible, but is to you, and set the sourceRoot property of the source map accordingly. In that case you'd want to make sure your source map doesn't include sourcesContent