2015-09-25 139 views
3

我想了解源地图的工作原理。我使用nodejs创建了一个带有一个页面的简单Web服务器。安装了一个缩小版本和源地图的jQuery。然后我在我的网页上放置了一个脚本标签,包括jQuery的缩小版本。我现在可以通过源代码地图浏览Chrome开发人员工具中的未分类代码。但是如何?浏览器如何获取源地图?

我分析从服务器发送的东西和源地图不转移。它们不会显示在Chrome开发人员工具的网络选项卡中,并且它们不包含在缩小的jquery文件的下载内容中。在缩小的jQuery文件的最后,唯一的是//# sourceMappingURL=jquery.min.map。浏览器如何访问它们?

我想部分原因是因为我的工作,我创建一个应用程序,它会是不错的跟踪生产与源地图错误的能力。但现在看来,如果我想允许这一点,这也意味着访问该网站的任何人都可以获得未分类的代码。这是正确的还是我可以控制源映射如何从服务器传输到客户端?

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

+0

https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k /编辑?HL = EN_US&PLI = 1&PLI = 1 – Claies

回答

3

来源的地图确实转移,但在Chrome的最新版本,他们不会在网络选项卡中显示。根据this answer,源映射曾用于在“网络”选项卡上可见,但在某些时候他们决定对其进行更改,以便请求不再可见。

至于保持您的源地图是私人的,this answer中提到的解决方案之一是创建一个.htaccess文件,该文件限制从本地网络访问客户端的源地图。另一种方式来做到这一点。将设置身份验证,所以你必须登录到该网站才能够查看源代码的地图,否则你会得到一个403

1

在这种情况下,浏览器正在请求jquery.min.map文件相对于<script>元素(“源来源”)的src URL。 (和源地图可能嵌入所有的sourcesContent来源。)我不知道为什么它不会在网络选项卡(我以前从来没有检查)显示。在其他情况下,源地图可以完全嵌入到脚本中。你当然可以把源文件是不能公开访问,但对你的URL后面,并设置相应的源地图的sourceRoot财产。在这种情况下,你要确保你的源地图不包括sourcesContent