Angular app, in Chrome browser, using cached CSP headers instead of current ones

Question

Angular app with service worker. CSP headers were updated to add a new frame-src. Safari picked up the header change fine. Chrome is blocking the iframe content, and the details for the block in the console.log shows the old CSP headers, without the new entry to the frame-src. However, when I look at the headers in the network tab, I do see the updated headers.

I don't know if it is related to the service worker but I am assuming that is the case. I have a refresh prompt when a new update is available, so I can confirm that service worker update process is working.

I tried adding

 "cacheQueryOptions": {
        "ignoreVary": false
 },

to my ngsw-config.json because, well, it's header related at least, but Chrome is still using the cached headers.

I have also verified my CSP headers are valid using the Google CSP validator.

I'm not sure where to go from here.

Answer 1

I don't know if this is so much an answer as it is a work-around, but I found something that worked for this case. I added the frame-src portion of my CSP as a meta tag in the index.html file:

<meta http-equiv="Content-Security-Policy" content="frame-src 'self' foo etc;"/>

And now Chrome is allowing the iframe content.

This is just a duplicate of what is already in the CSP headers, but apparently it is enough to get Chrome to stop using the old cached headers.