浏览器如何获取源地图?

How does the browser get hold of source maps?

我正在尝试了解源地图的工作原理。我使用 nodejs 创建了一个只有一个页面的简单 Web 服务器。已安装 jQuery,其中包含缩小版本和源地图。然后,我在我的网页上放置了一个脚本标签,其中包括 jQuery 的缩小版本。多亏了源地图,我现在可以在 chrome 开发人员工具中浏览未压缩的代码。但是怎么办?

我分析了服务器发过来的东西,source maps 没有传输。它们不会显示在 chrome 开发人员工具的网络选项卡中,也不会包含在缩小的 jquery 文件的下载内容中。唯一的事情是 //# sourceMappingURL=jquery.min.map 在缩小的 jQuery 文件的末尾。浏览器如何访问它们?

我部分地想知道,因为在我的工作中我正在创建一个应用程序,如果能够在生产中使用源映射跟踪错误会很好。但现在看来,如果我想允许这样做,这也意味着任何访问该站点的人都可以获得未压缩的代码。这是正确的还是我可以控制如何将源映射从服务器传输到客户端?

编辑: 感谢您的回答。我自己也做了更多研究,记录了服务器收到的每个请求。如果使用调试器工具,则源映射是缩小文件末尾指定的 url 处的请求。 chrome 隐藏这个的事实让事情变得非常混乱。如果我阻止源映射被传输,源映射将不起作用,但 chrome 也会缓存源映射。 IE。如果我允许源映射,查看它,然后阻止它并再次查看源映射可能仍然有效。

在这种情况下,浏览器正在请求相对于 <script> 元素("source origin")的 src URL 的 jquery.min.map 文件。 (并且源映射可能将所有源嵌入 sourcesContent。)我不确定为什么它没有出现在网络选项卡中(我以前从未检查过)。在其他情况下,源映射可以完全嵌入到脚本中。您可以想象将源文件放在不可公开访问但对您开放的 URL 后面,并相应地设置源映射的 sourceRoot 属性。在这种情况下,您需要确保您的源地图不包含 sourcesContent

确实传输了源映射,但在 Chrome 的当前版本中,它们未显示在“网络”选项卡中。根据 ,源映射过去在“网络”选项卡上可见,但在某些时候他们决定更改它,以便请求不再可见。

至于将您的源映射保密,this answer 中提到的解决方案之一是创建一个 .htaccess 文件来限制从本地网络对客户端的源映射访问。另一种方法是设置身份验证,因此您必须登录该站点才能查看源地图,否则您会收到 403。