Couldn’t find the Content-Security-Policy header in the response headers

Support
1

Hi, I’m building a site with Nuxt 3 and try to set my CSP header but it is not working.

This is my [[headers]] section:

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "SAMEORIGIN"
    X-Content-Type-Options = "nosniff"
    Content-Security-Policy = "default-src 'self'; style-src 'self'; form-action 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; base-uri 'self';"

But when I check for my CSP header the result is: Couldn’t find the Content-Security-Policy header in the response headers..

Can someone please tell me what I’m doing wrong. Thank you!

2

Hey @stefanfrede

Probably nothing.

My understanding is Nuxt 3 makes use of SSR as opposed to static generation and client-side rendering of JS. As mentioned here full-static on Nuxt 3 is not currently implemented.

As such, a function is returning content and my understanding (from testing) is custom headers such as you have aren’t set on functions, rather these headers need adding to the return statement of the function. (This is my understanding; others may confirm or disprove this.)

I am unsure (assuming the above is correct) if, and if so how, you can modify these function headers.

3

Thank you for your answer!

If it is not possible to set custom headers with Nuxt 3 on Netlify wouldn’t that be a big red flag for this combination?

4

You could set CSP headers in your site’s HTML page too.

As far as custom headers are concerned, that’s some configuration Nuxt will have have to enable on their end as they generate the required functions on Netlify. If it was a Function that you generate yourself, you could have added the headers, but sadly, that’s not the case.

1 Like