拒绝加载字体“<URL>”，因为它违反了以下内容安全策略指令："font-src 'none'"

Question

我对这个错误有很大的疑问，我似乎无法阻止它显示。

*免责声明：我还是个大三学生，对NextJS的了解还很深入，所以在问这个问题的过程中如果有错误请见谅。

我正在使用最新版本的 NextJS（在提问时），我正在将其部署到 vercel

我收到此错误信息，该错误信息被垃圾邮件发送了 50 次左右

我尝试过的东西。

1。我向 `_app.tsx` 中的 `<Head />` 元素添加了一个元标记，看起来像这样

<meta
    http-equiv="Content-Security-Policy"
    content="font-src * 'unsafe-inline';"
/>

(我拼错了 content 属性几次，它给了我一个错误，所以我知道它正在工作，我正在使用 `font-src * 'unsafe-inline' ，因为据说它允许所有来源） 但错误仍然存在

来源：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src

2。我将 headers 添加到 `next.config.js`

...
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: `font-src * 'unsafe-inline';`,
  },
]
module.exports = withImages({
  async headers() {
    return [
      {
        // Apply these headers to all routes in your application.
        source: '/:path*',
        headers: securityHeaders,
      },
    ]
  },
...

错误不断出现。如果我将此 header 设置为 font-src 'self' 或 font-src https://js.stripe.com。我在这个上面得到了一个不同的错误，它指出 local 字体拒绝加载，因为它违反了 font-src https://js.stripe.com

来源：https://nextjs.org/docs/advanced-features/security-headers

3。我添加了 `vercel.json`

我的一位同事建议这可能是一个 vercel 错误，所以我将其添加到文件中

{
  "routes": [
    {
      "src": "/(.*)",
      "headers": {
        "content-security-policy-report-only": "font-src * 'unsafe-inline';"
      }
    }
  ]
}

来源：https://app.rapidsec.com/docs/deploying-csp

错误仍然存在

真题。

我应该继续尝试这些安全 header，还是 dead-end？它是一个 vercel 错误，还是一个 nextjs 错误，因为它只发生在服务器上？或者我应该尝试覆盖分配这些字体的 class 来绕过这个错误。 P.S。当我在错误中打开link时，它给了我Error 404，这是官方的条纹依赖stripe: "^8.195.0

Answer 1

最可能的解释是您的站点上已经设置了内容安全策略。所有内容都需要通过所有策略，因此添加另一个策略无济于事。您需要确定现有策略的设置位置并从“font-src 'none';”进行修改到“font-src js.stripe.com;”。

Answer 2

我认为您使用了错误的条带密钥来访问条带 api。 API 键标识调用 API 的应用程序或项目。因此，stripe api 无法识别您的应用程序

有时 chrome 扩展也会导致该错误

Answer 3

名为 Ultrawidify 的浏览器扩展程序导致了该问题。当它扫描网站上的视频时（为什么，我不知道。我认为它只适用于 youtube）它会尝试访问 stripe.com，因为它列在“选择要控制的网站”列表中。关闭该站点的扩展程序没有任何作用，它仍然出现该错误，但禁用它完全解决了问题，

拒绝加载字体“<URL>”，因为它违反了以下内容安全策略指令："font-src 'none'"

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src 'none'"

stripes

stripe-payments

content-security-policy

next.js

vercel

我对这个错误有很大的疑问，我似乎无法阻止它显示。

我尝试过的东西。

1。我向 `_app.tsx` 中的 `<Head />` 元素添加了一个元标记，看起来像这样

2。我将 headers 添加到 `next.config.js`

3。我添加了 `vercel.json`

真题。

拒绝加载字体“<URL>”，因为它违反了以下内容安全策略指令："font-src 'none'"

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src 'none'"

stripes

stripe-payments

content-security-policy

next.js

vercel

我对这个错误有很大的疑问，我似乎无法阻止它显示。

我尝试过的东西。

1。我向 _app.tsx 中的 <Head /> 元素添加了一个元标记，看起来像这样

2。我将 headers 添加到 next.config.js

3。我添加了 vercel.json

真题。

1。我向 `_app.tsx` 中的 `<Head />` 元素添加了一个元标记，看起来像这样

2。我将 headers 添加到 `next.config.js`

3。我添加了 `vercel.json`