Setting a different CSP using routeRules

[P4sca1]

I played around with setting different CSP for different routes, and noticed that it does not work very well with a SPA.
From my testing, the browser uses the CSP from the first document it receives. Navigating to another page with a different CSP will not apply that CSP. E.g. I have a page which establishes a websocket connection and added the connect-src to that route using routeRules. When navigating to that page on the client, the WebSocket connection will fail, because the CSP for that route is not active. When loading the page directly (SSR), it is working. Can anybody confirm this behaviour?

I think the docs should be updated to include a warning about this. Maybe a recommendation should be added, to have the same CSP for the whole website and to not use route rules for CSP. The same applies to other headers too, maybe (like Permission-Policy). This needs further testing.

[P4sca1]

@vejja You proposed per-route CSP in #291. Could you give some input on whether using different CSP per route works for you during client-side navigation?

[vejja]

Hi @P4sca1
You are right that CSP will not be reloaded from a client-side navigation. This is a Nuxt limitation.
As you suggest, our recommendation is therefore to use a single CSP policy for the whole website. Our guidance is provided here :
https://nuxt-security.vercel.app/documentation/advanced/strict-csp#per-route-csp

[P4sca1]

I totally missed that section from the Strict CSP documentation. Thank you for the link! :)

[P4sca1]

Closing this discussion, because the docs already contain all the information.