html - Firefox 不显示来自缓存的图像仅替代文本

Question

观察

有一个从 https 提供的包含广告位的单页应用程序网页。这些广告位由一些出价逻辑填充，广告由 JavaScript 编写在 IFRAME 文档中。

第一次加载显示广告图片，例如https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLu47R8QEQARgBMggW4D7gy4qb5g

当用户在页面上操作时，会发生新的广告出价并重新加载广告位。在我们的例子中:呈现具有相同 src 属性的 img 元素。

所有其他浏览器(Chrome、IE、Safari)都会显示这张取自本地缓存的图片。

不是这样:Firefox(Windows、Mac；版本 52)的行为如下:

• 在白色背景上显示 alt 文本
• 图像未显示:它消失了，尽管它是具有相同 URL 的完全相同的图像
• 使用开发人员工具时，img 上的工具提示说“错误加载图片”(我只知道德语消息)
• 网络选项卡未显示此图像上的任何事件(也没有 304 或“来自缓存”)

附加信息:

• 没有 CSS active/changed 可以隐藏图像(事实上，在这个 img 周围根本没有 CSS)。
• 没有额外的 JavaScript(例如延迟加载)
• 没有广告拦截器
• 所有资源均从https加载
• 控制台没有错误记录
• 页面第一次加载显示图片
• 所有其他浏览器都没有问题，从来没有。

示例

在下一页你可以看到错误(我想这是一个 FireFox 错误):

http://bartelt.team.netzathleten-media.de/2017-03-30_MD-230-refresh-bug/

5 秒后广告消失(仅在 FireFox 中)。

问题

你能给我一些建议，这个问题可能是什么原因造成的？

有没有办法以某种方式调试由外部代码(来自广告服务器)动态创建的图像的 onerror？

这真的很奇怪，我非常感谢你的帮助。

Answer 1

非常有趣的问题。必须让你拔头发。很难用精简代码提供解决方案，但我可以告诉您我观察到的情况，也许它会有所帮助。

观察 1:

我也在其他几个浏览器中尝试过这个。似乎 safari 9.1.1(注意:10.1 中没有问题)也失败了，但给出了更有意义的错误消息。这似乎是 CORS 的问题以及不同浏览器的缓存方式。在 chrome 中，图像似乎被缓存在 firefox 和 safari 中没有的地方。当代码轮询(从广告内)时，它尝试从 http://tpc.googlesyndication.com 加载内容这些“问题浏览器”说这是对 CORS 的违反。为什么它会首先加载？没有源代码很难说。

我很想知道如果在 5 秒后加载不同的广告会发生什么。

无论如何，这是来自 safari 的错误:

阻止来源为“http://bartelt.team.netzathleten-media.de”的框架访问来源为“http://tpc.googlesyndication.com”的框架。协议(protocol)、域和端口必须匹配。 dc — mtrcs_533746.js:50:368 (匿名函数)— mtrcs_533746.js:23:281 q — mtrcs_533746.js:85:503 sd — mtrcs_533746.js:23:233 wd — mtrcs_533746.js:24 nb — mtrcs_533746.js:26:154 (匿名函数)— mtrcs_533746.js:26:214 U — mtrcs_533746.js:22 (匿名函数)— mtrcs_533746.js:22:103 (匿名函数)— mtrcs_533746.js:84:424

观察 2:

你说通过 ssl 加载。无论如何不在 safari 9.1 中。看到上面的错误。 Your ssl certificate is all sorts of bad我会先解决这个问题。好像是自签的？反正看看here ，看起来这会让你陷入 CORS hell 。

祝你好运，希望对你有所帮助。 CORS 和 SSL 处理起来真的很痛苦。尤其是现代浏览器对不使用 https 和/或混合内容越来越严格。