如何修复我遇到的 CSP 错误？答案

【问题标题】：How do I fix the CSP errors I have?如何修复我遇到的 CSP 错误？
【发布时间】：2022-01-20 00:40:15
【问题描述】：

我正在使用 NextJs@12，我正在尝试为我的应用程序设置 CSP。我不断将错误记录到我的控制台中，我不知道我做错了什么。这是我目前在 netx.config 文件中的策略。

  {
    key: "Content-Security-Policy",
    value: "default-src 'self' cdn.jsdelivr.net; script-src 'self' https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.47/dist/chunks/chunk.HAL7R4WT.js https://embed.tawk.to/_s/v4/app/61adcafd0e1/js/twk-chunk-vendors.js https://js.paystack.co/v1/inline.js https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtm.js 'unsafe-inline' 'unsafe-eval'; connect-src 'self' https://eljsuiwhwbb5lp5lmre5eifzuu.appsync-api.us-east-1.amazonaws.com https://embed.tawk.to https://va.tawk.to https://vitals.vercel-insights.com https://vsb75.tawk.to https://vsb89.tawk.to https://www.google-analytics.com wss://eljsuiwhwbb5lp5lmre5eifzuu.appsync-realtime-api.us-east-1.amazonaws.com wss://vsb75.tawk.to wss://vsb89.tawk.to; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://embed.tawk.to https://fonts.googleapis.com; img-src 'self' data: https://embed.tawk.to https://res.cloudinary.com https://tawk.link https://www.google-analytics.com;",
  },

这是迄今为止的错误：

我需要帮助来解决这个问题。我整天都在忙。

【问题讨论】：

标签： javascript css next.js http-headers content-security-policy

【解决方案1】：

您通常只会将主机作为 CSP 中的源，而不是完整的 url。我假设您使用 https，因此您无需指定，但应将 wss 保留在您的策略中。试试这个：

default-src 'self' cdn.jsdelivr.net; script-src 'self' cdn.jsdelivr.net embed.tawk.to js.paystack.co www.google-analytics.com www.googletagmanager.com 'unsafe-inline' 'unsafe-eval'; connect-src 'self' eljsuiwhwbb5lp5lmre5eifzuu.appsync-api.us-east-1.amazonaws.com embed.tawk.to va.tawk.to vitals.vercel-insights.com vsb75.tawk.to vsb89.tawk.to @987654323 @ wss://eljsuiwhwbb5lp5lmre5eifzuu.appsync-realtime-api.us-east-1.amazonaws.com wss://vsb75.tawk.to wss://vsb89.tawk.to; style-src 'self' 'unsafe-inline' cdn.jsdelivr.net embed.tawk.to fonts.googleapis.com; img-src 'self' 数据：embed.tawk.to res.cloudinary.com tawk.link www.google-analytics.com;"

【讨论】：

当我尝试Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "default-src 'self' cdn.jsdelivr.net". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.时会发生这种情况@
然后您必须将该主机名添加到 default-src 或 font-src（您需要添加）。被阻止的字体一开始就已经存在，但未显示在屏幕截图中，或者它出现在允许加载脚本或样式之后。