Images not loaded due to security headers restrictions

[zainfathoni]

Description

Expected Behaviour

Images are loaded

Additional Information

[zainfathoni]

Is it related to your PWA implementation in #705 combined with our new security policies, Mas @mazipan?

It seems that the error started from this deploy preview
https://deploy-preview-705--wargabantuwarga.netlify.app

[zainfathoni]

I'm also trying another approach by adding res.cloudinary.com to the content security policy header on #719 PR.

[zainfathoni]

Let's reopen this issue until it's confirmed to be resolved.

[resir014]

I think this is due to service worker. The images work just fine before.

[zainfathoni]

Apparently so, I tried accessing the deploy preview on https://deploy-preview-719--wargabantuwarga.netlify.app/ once the PWA kicks in, it's failing again.

https://deploy-preview-719--wargabantuwarga.netlify.app/

[zainfathoni]

Let's merge #718, then.

@resir014, do you think we need to revert #719? Since the changes are irrelevant. 😅 🙏

[mazipan]

Revert it first, I will recheck the implementation later when have time.

[zainfathoni]

@resir014 I'm reverting #719 at #720.

[resir014]

Shall we remove the service worker first until we can figure out a way to add it without messing up CSP?

Since we already added service worker, we should also modify our service worker to become a self-destructing service worker, just in case people already have it installed:

self.addEventListener('install', () => {
  self.skipWaiting();
});

self.addEventListener('activate', () => {
  self.registration.unregister()
    .then(() => {
      return self.clients.matchAll();
    })
    .then((clients) => {
      clients.forEach(client => client.navigate(client.url))
    });
});

[zainfathoni]

Mas @mazipan, where did the workbox added the service-worker.js file?

According to this guide, we need to replace the service worker file content with that code snippet so the browser would uninstall the previously installed service worker.

[zainfathoni]

I'm still experiencing the issue on my local since the service worker is still kicking in.

[ekafyi]

I'm outside and accessing from my phone (so can't investigate dev console) but +1 having the same behaviour as @zainfathoni on https://deploy-preview-719--wargabantuwarga.netlify.app/

• initially images load fine
• on 2nd/3rd reload once the service worker has taken control (as indicated by "add to home screen" menu) images don't load

[mazipan]

It's generated by next-pwa.

[zainfathoni]

#721 is my attempt to fix the stale service worker issue, CMIIW @resir014 @mazipan.

[zainfathoni]

The bug is fixed now, the service worker is automatically cleared and the image can be loaded.

Thanks for your assistance, @resir014 & @mazipan. 😁 🙏

[ekafyi]

Relevant resources for further investigation in the future.

Next-pwa uses Workbox under the hood, so this may be relevant: https://www.npmjs.com/package/cloudinary-workbox-plugin

More on SW cross origin caching behaviour:

• https://whatwebcando.today/articles/opaque-responses-service-worker/
• https://stackoverflow.com/questions/54619653/can-a-service-worker-fetch-and-cache-cross-origin-assets

[kelilipan]

I am new with CSP stuff, but I think this might be a clue https://qubyte.codes/blog/content-security-policy-and-service-workers.

TLDR; SW is not using image-src policy but using connect-src policy instead. Since we don't have connect-src it fallback to default-src wich is only limited to self / origin of the domain itself. So, it refuses to "connect"

Mas @zainfathoni tried to add Cloudinary url to script-src (at #719 ) but ofc it doesn't work, we need to add to connect-src.

So I tried to add res.cloudinary.com to connect-src and deploy to my personal netlify account for preview (yes, I'm dumb. brb making a Draft PR for deploy preview). And it works (and it cache cloudinary img assets)

https://hardcore-noyce-3b9626.netlify.app/

Update:

it works https://deploy-preview-762--wargabantuwarga.netlify.app.
need review #762