How to configure or disable Content Security Policy(CSP) in Nuxt 3 to render images?

Question

I'm tryin to render some images from a specific URL in Nuxt, but i'm getting the following error:

Refused to load the image because it violates the following Content Security Policy directive: "img-src 'self' data:".

I know this is a CSP error, and i tried fixing it by configuring my CSP headers in Nuxt, but nothing seems to work. Heres my Nuxt config :

export default defineNuxtConfig({
  security: {
    headers: {
      xXSSProtection: '1',
      contentSecurityPolicy: {
        'img-src': ["'self'", 's.gravatar.com', 'data:']
      }
    }
  }
})

But this is not working, any idea on how to fix this?

Answer 1

If you set img-src to false, you are allowing everything. You can also be specific and set it to ["'self'", 'data:', 'https://www.example.com']. Setting img-src to undefined (also a valid value) seems to give you the default settings, which are ["'self'", 'data:'].

Your nuxt.config.ts file could look like this:

export default defineNuxtConfig({
  modules: [
    'nuxt-security',
  ],
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', 'https://www.example.com'],
      },
    },
  },
})

A couple of gotchas:

• This value works: 'https://www.example.com' and this does not: 'example.com'
• This value works: "'self'" and this does not: 'self'