javascript - 如何在 Nuxt 3 中配置或禁用内容安全策略(CSP)来渲染图像？

Question

我尝试在 Nuxt 中渲染来自特定 URL 的一些图像，但收到以下错误:

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

我知道这是一个 CSP 错误，我尝试通过在 Nuxt 中配置我的 CSP header 来修复它，但似乎没有任何效果。这是我的 Nuxt 配置:

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

但这不起作用，知道如何解决这个问题吗？

Answer 1

我遇到了这个问题并使用此模块修复 https://github.com/Baroshem/nuxt-security

解决您问题的文档: https://github.com/Baroshem/nuxt-security/blob/main/docs/content/1.getting-started/2.configuration.md