Firefox doesn't show image from cache only alt text

Question

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.

First load shows the ad image, e.g. 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.

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

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

• shows alt text on white background
• image is not displayed: it disappears, though it's the exactly identical image with same URL
• when using developer tools, a tooltip on the img says something about "error loading image" (I exactly know only the German message)
• network tab doesn't show any activity on this image (also no 304 or "from cache")

Additional info:

• there is no CSS active/changed which could hide the image (in fact around this img there is no CSS at all).
• no additional JavaScript (e.g. lazy load)
• no ad blocker present
• all resources are loaded from 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):

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

After 5 seconds the ad disappears (only in 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.

Answer 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.

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

Anyway, here's the error from 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

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.

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.