1201999 - Image from different origin isn't loaded when using the event.respondWith() method

Status: RESOLVED INCOMPLETE

(Core :: DOM: Service Workers, defect)

Description

[Marco Castelluccio [:marco]]

The cache is empty, I'm not adding anything to the cache.

If I fetch the image without checking the cache first, the image is loaded correctly.

If I check the cache and then fetch the image, the image isn't loaded.

In both cases the promise returned by fetch is resolved (the console.log in the testcase I'm about to attach is called).

Comment 1

[Marco Castelluccio [:marco]]

Attachment: index.html

Comment 2

[Marco Castelluccio [:marco]]

Attachment: service-worker.js

Comment 3

[Marco Castelluccio [:marco]]

The attached page works correctly with the attached version of service-worker.js. If you uncomment the code I commented out, it doesn't work anymore.

Comment 4

[Marco Castelluccio [:marco]]

If you right-click on the image and select "View Image Info", the image has the correct size in both cases (~40 kB) but wrong dimensions in the not-working case (0 × 0px instead of 300px × 450px).

Comment 5

[Marco Castelluccio [:marco]]

(N.B.: When you uncomment the code you also need to remove a semicolon, otherwise the service worker will fail to load)

Comment 6

[Marco Castelluccio [:marco]]

The status code of the response is 200 for correctly loaded images, 0 for the others.

Comment 7

[Marco Castelluccio [:marco]]

Here's an even simpler testcase.

This works:
self.addEventListener("fetch", function(event) {
  return fetch(event.request);
});

This doesn't:
self.addEventListener("fetch", function(event) {
  event.respondWith(fetch(event.request));
});

Comment 8

[Marco Castelluccio [:marco]]

So, basically the issue is that the non-normative section http://slightlyoff.github.io/ServiceWorker/spec/service_worker/#cross-origin-resources isn't being followed.

I'll file a new, clearer, bug.