带有 URL 的大量 Javascript 会导致 Chrome（DevTools？）报告错误的 404
Posted
技术标签:
【中文标题】带有 URL 的大量 Javascript 会导致 Chrome（DevTools？）报告错误的 404【英文标题】：Heavy Javascript with URLs causes Chrome (DevTools?) to report bad 404's 【发布时间】：2011-12-04 13:13:36 【问题描述】：包含大量 javascript 的页面还包含在 javascript 中编码为 JS 字符串的 URL。
问题在于 Chrome（或者可能只是开发者工具？）试图导航到这些编码的 URL，就好像它们是 html 的一部分一样。
这似乎只在页面中有大量 javascript 时才会发生。
页面看起来或多或少像：
<body>
....
<script type="text/javascript">
//<![CDATA[
google.maps.event.clearListeners(window.kgmm["marker32"],"click");
google.maps.event.addListener(window.kgmm["marker32"],"click",clicked);
window.kgmp["marker54"]=new InfoBox(
content: "<div class=\"wrapBox\" align=\"left\"><div class=\"imageBox\"><a href=\"#ir_rih\" target=\"_blank\"><span class=\"imageWrap\">"
/* the issue -> */ +"<img src=\"?ajax=1&cls=owAjaxHandler&mtd=thumbnail&i=wp-content\/uploads\/2011\/07\/Bahrija & Fomm ir-rih08.jpg&w=115&h=115\" border=\"0\" alt=\"\"\/><\/"
+"span><\/a><\/div><div class=\"specsBox\"><h2>Fomm Ir-Rih<\/h2><div class=\"shortDesc\"><\/div><a class=\"moreInfo\" href=\"#ir_rih\" onclick=\"return krtShowTabByHash(this);\">more details »<\/a><\/div><\/div>" ,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-214, 0),
zIndex: null
);
//]]>
</script>
....
</body>
以下是控制台中的截图：
请注意，我不是在寻找修复方法。请不要建议任何改进代码的方法。
而不是修复，我正在寻找关于为什么会发生这种情况的答案。
注意： CDATA 不应该阻止 chrome 将 javascript 内容解析为 XML 元素吗？
导致问题的示例 URL：
-
首先，转到here。
打开控制台 (
Right Click -> Inspect Element -> Console tab)
点击页面列表中的第二个项目，名为“Mdina, Rabat, Dingli & Baħrija”
在页面加载时继续查看控制台，您应该会看到上述错误。
注意：有人将问题标记为“过于本地化”。我想指出这不是真的。我在多个网站上都遇到过这个问题，但从未考虑过（直到现在），因为该网站仍然有效。
【问题讨论】：
虽然 javascript 不是将那些字符串插入到 dom 中吗？ @Jakob - 是的，但是当它这样做时，字符串的格式正确。例如，"a=\"b&gt;\"" 变为 a="b>"
好吧，我真的不能很好地看到你的截图，但它似乎也解释了一些格式。
@JakubHampl 做一个Right-Click -> Open Image in new tab。您看到的格式不在页面内。选择 URL 的是 Chrome/DevTools。即使没有将字符串添加到 DOM 中，仍然会出现这个问题。
我有点困惑。您是否希望它根本不尝试获取这些 URL？为什么不呢，假设InfoBox 实际上将content 插入到页面中？
【参考方案1】：
问题在于您转义了i url 参数：
src=\"?ajax=1&cls=owAjaxHandler&mtd=thumbnail&i=wp-content\/uploads\/2011\/07\/Bahrija & Fomm ir-rih08.jpg&w=115&h=115\"
基本上，反斜杠转义不适用于 URL。如果您想访问该 URL，您需要将其发送为：
src=\"?ajax=1&cls=owAjaxHandler&mtd=thumbnail&i=wp-content%2Fuploads%2F2011%2F07%2FBahrija%20%26%20Fomm%20ir-rih08.jpg&w=115&h=115\"
Chris 编辑：将其解码为 javascript 字符串会产生：
src="?ajax=1&cls=owAjaxHandler&mtd=thumbnail&i=wp-content/uploads/2011/07/Bahrija & Fomm ir-rih08.jpg&w=115&h=115"
【讨论】：
我编辑了帖子以更好地显示解码后的字符串（用于比较）。我不确定你在说什么，但在我看来并没有错。我仍然无法理解为什么 Chrome 会尝试从直接的 Javascript 中解析 URL。在此过程中，这难道不能证明是锁定 JavaScript 系统（如 facebook API）的一个很好的攻击媒介吗？ @Christian：你确定是 Chrome 直接解析这些字符串吗？或者当new被调用时，它们是否被谷歌地图的api解析？
我不能 100% 确定，但我在没有 Google 地图的其他地方也遇到过这个问题。此外，无论 Google 地图是否已初始化，都会发生这种情况。
另外，我已经检查了“生成的代码”，并且格式错误的内容不会出现在任何地方的 DOM 中。相反，如果代码试图通过其他方法获取图像，它将显示在控制台中并且可以被跟踪（但是，唉，这不会发生）。
它们本身不会出现在控制台中。你是说网络面板吗？另外，您可以用 SSCCE 替换问题中的代码吗？ sscce.org以上是关于带有 URL 的大量 Javascript 会导致 Chrome（DevTools？）报告错误的 404的主要内容，如果未能解决你的问题，请参考以下文章
在带有空白 URL 的新窗口中，您如何提供从中查找相关资源的路径？
通过 RFC 5987 处理带有空格的文件名* 参数会导致文件名中出现“+”