如何在 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 标头来修复它，但似乎没有任何效果。这是我的 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

Answer 2

如果您将

img-src

设置为

false

，则表示您允许一切。您也可以具体设置为

["'self'", 'data:', 'https://www.example.com']

。将

img-src

设置为

undefined

（也是一个有效值）似乎会为您提供默认设置，即

["'self'", 'data:']

。

您的

nuxt.config.ts

文件可能如下所示：

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

一些问题：

• 此值有效：

  'https://www.example.com'

  ，而此值无效：

  'example.com'

• 此值有效：

   "'self'"

  ，而此值无效：

   'self'