Firefox不会显示仅缓存alt文本的图像

Observation

There is a single page application webpage served from https containing ad-slots. These ad-slots are filled by some bidding logic and the ads are written in IFRAME documents by JavaScript.

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

First load shows the ad image, e.g. https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLu47R8QEQARgBMggW4D7gy4qb5g

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

When user acts on the page, a new ad-bidding takes place and ad-slots are reloaded. In our case: an img element with identical src attributes is rendered.

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

All other browsers (Chrome, IE, Safari) show this image, taken from local cache.

所有其他浏览器(Chrome,IE,Safari)显示此图像,取自本地缓存。

Not so: Firefox (Windows, Mac; Version 52) acts as following:

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

shows alt text on white background

在白色背景上显示替代文本

image is not displayed: it disappears, though it's the exactly identical image with same URL

图像不显示:虽然它是完全相同的具有相同URL的图像,但它会消失

when using developer tools, a tooltip on the img says something about "error loading image" (I exactly know only the German message)

当使用开发人员工具时,img上的工具提示会说“错误加载图像”(我只知道德语消息)

network tab doesn't show any activity on this image (also no 304 or "from cache")

网络选项卡不显示此图像上的任何活动(也没有304或“来自缓存”)

Additional info:

there is no CSS active/changed which could hide the image (in fact around this img there is no CSS at all).

没有CSS活动/更改可以隐藏图像(实际上在这个img周围没有CSS)。

no additional JavaScript (e.g. lazy load)

没有额外的JavaScript(例如延迟加载)

no ad blocker present

没有广告拦截器存在

all resources are loaded from https

所有资源都是从https加载的

no error is logged in console

控制台中未记录任何错误

first load of the page shows image

第一次加载页面显示图像

no problem with all other browsers, never.

从来没有与所有其他浏览器没问题。

Example

On following page you can see the bug (I suppose it's a FireFox bug):

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

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

After 5 seconds the ad disappears (only in FireFox).

5秒后,广告消失(仅限FireFox)。

Questions

Can you give me some advise what could be the reason for this problem?

你能告诉我一些可能导致这个问题的原因吗?

Is there a way to somehow debug onerror of images created dynamically by foreign code (coming from ad-server)?

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

This is really weird and I highly appreciate your help.

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

2 个解决方案

#1

Really interesting question. Must have you pulling your hair out. It's very difficult to give a solution with minified code but I can tell you what I've observed and maybe it will help.

非常有趣的问题。一定要拉你的头发。使用缩小代码给出解决方案是非常困难的,但我可以告诉你我所观察到的内容,也许它会有所帮助。

Observation 1:

I tried this in a few other browsers as well. It seems safari 9.1.1 (note: no issue in 10.1) fails as well but gives a more meaningful error message. It would appear to be an issue with CORS and how different browsers cache. In chrome it would appear that the image gets cached where in firefox and safari it is not. When the code polls (from within the ad) it tried to load content from http://tpc.googlesyndication.com which these "problem browsers" say is a violation of CORS. Why it would load in the first place? Hard to say without source code.

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

I'd be interested in seeing what happens if a different ad is loaded after 5 seconds.

我有兴趣看看如果在5秒后加载不同的广告会发生什么。

Anyway, here's the error from safari:

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

Blocked a frame with origin "http://bartelt.team.netzathleten-media.de" from accessing a frame with origin "http://tpc.googlesyndication.com". Protocols, domains, and ports must match. dc — mtrcs_533746.js:50:368 (anonymous function) — 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 (anonymous function) — mtrcs_533746.js:26:214 U — mtrcs_533746.js:22 (anonymous function) — mtrcs_533746.js:22:103 (anonymous function) — mtrcs_533746.js:84:424

阻止原始“http://bartelt.team.netzathleten-media.de”的框架访问具有原点“http://tpc.googlesyndication.com”的框架。协议,域和端口必须匹配。 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。节:26:154(匿名函数) - mtrcs_533746.js:26:214 U - mtrcs_533746.js:22(匿名函数) - mtrcs_533746.js:22:103(匿名函数) - mtrcs_533746.js:84:424

Observation 2:

You say loaded over ssl. Not in safari 9.1 anyway. See the above error. Your ssl certificate is all sorts of bad I would start by fixing that. It looks like it's self signed? Anyway, take a look here, it looks like that could give put you in CORS hell.

你说加载过ssl。反正不是在safari 9.1中。看到上面的错误。你的ssl证书是各种各样的坏我会从修复它开始。它看起来像是自签名的吗?无论如何,看看这里,看起来这可能会让你陷入CORS地狱。

Best of luck, I hope this helps. CORS and SSL can be really a pain to deal with. Especially with modern browsers getting more strict with not using https and/or mixed content.

祝你好运,我希望这会有所帮助。 CORS和SSL真的很难处理。特别是现代浏览器在不使用https和/或混合内容时变得更加严格。

#2

It might be to do with the fact that content:url("image") doesn't work in firefox...

这可能与内容:url(“image”)在firefox中不起作用这一事实有关...

Content url does not display image on firefox browser

内容网址不会在Firefox浏览器上显示图像

#1