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

问题描述 投票：0回答：5

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

*免责声明：我还是个大三，还在详细了解NextJS，所以如果在问这个问题时犯了一些错误，请原谅我。

我正在使用最新版本的

NextJS
（在提出问题时）并且我正在将其部署到
vercel

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

我尝试过的事情。

1.我向 
<Head />
中的 
_app.tsx
元素添加了一个元标记，如下所示

<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.我将标题添加到 
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,
      },
    ]
  },
...

错误不断显示。如果我将此标题设置为 

font-src 'self'
或 
font-src https://js.stripe.com
。我在上面遇到了一个不同的错误，该错误指出 本地字体拒绝加载，因为它违反了 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

但是错误仍然存在

实际问题。

我应该继续尝试这些安全标头，还是这是一个死胡同？这是一个 vercel 错误，还是一个 nextjs 错误，因为它只发生在服务器上？或者我应该尝试覆盖分配这些字体的类来解决此错误。 附：当我打开错误中的链接时，它给了我

Error 404
，这是官方的条带依赖项
stripe: "^8.195.0

next.js stripe-payments content-security-policy vercel stripes
5个回答
1
投票

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

0
投票

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

0
投票

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

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

0
投票

在 next.config.js 上尝试此配置

const ContentSecurityPolicy = `
  font-src 'self' js.stripe.com;
  
`
0
投票

在尝试解决问题一段时间后，我决定看看我的任何扩展是否是原因，正如一些评论中提到的。对我来说，它是 Chrome 的弹出窗口拦截器 - Poper Blocker。禁用扩展后，不再出现 CSP 错误。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.