Is it possible to proxy iframe sub-resources with service workers?
<p>I have an iframe that relies on 3rd party resources. The iframe itself doesn't have a src, is not sandboxed, is filled with content via AJAX and its sub-resources (e.x. CSS, images) exist on a CDN on a different domain.</p>

<p>In the case of an outage, either ours or our clients, I was hoping to be able to switch the iframe's CSS to a local file from our domain. I'm trying to do this via the fetch event in our Service Worker:</p>

<pre><code>self.addEventListener('fetch', event =&gt; {
  const processEpubRequests = () =&gt; fetch(`/epubs/${event.request.url.split('epub-resource/')[1]}`);

  if(event.request.url.startsWith(`https://our_api.com`))
    event.respondWith(
      fetch(event.request)
        .then(response =&gt; response.status &gt;= 400 ? processEpubRequests(response) : response)
        .catch(processEpubRequests)
    );
  else
    event.respondWith(
      caches.match(event.request)
        .then(response =&gt; response || fetch(event.request))
    );
});
</code></pre>

<p>This works great for the AJAX requests for the content but the CSS doesn't seem to work. It shows up in the Network tab with the correct response, but it's like the iframe just ignores it.</p>

<p><strong>Is it possible to handle iframe sub-resources this way?</strong></p>

<p>Thanks!</p>

<p><strong>EDIT:</strong>
I produced a Github pages demo to illustrate what I'm seeing.
Page: <a href="https://soluml.github.io/ServiceWorkerIframeExample/" rel="nofollow">https://soluml.github.io/ServiceWorkerIframeExample/</a>
Src: <a href="https://github.com/soluml/ServiceWorkerIframeExample/tree/gh-pages" rel="nofollow">https://github.com/soluml/ServiceWorkerIframeExample/tree/gh-pages</a></p>