react-google-recaptcha 允许 CSP

Question

我正在使用 React js，其中一种形式是我使用的 react-google-captcha，并且在构建和后端时工作得很好，我使用提供 CSP 安全性的头盔，出现了其他错误

在搜索了很多网站后，我添加了以下元标记

<meta
  http-equiv="Content-Security-Policy"
  content="script-src 'self' https://www.google.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/;
  frame-src https://www.google.com https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/"
/>

仍然没有运气。你遇到过这个问题吗？可以与我分享解决方案。提前致谢

在我的头盔配置中

Answer 1

这里是头盔维护员。

发生这种情况是因为 Helmet 默认设置的内容安全策略。 Helmet 在 HTTP header 中设置它，它会覆盖您在 <meta> 标记中输入的内容。

要解决您的问题，您需要配置 Helmet 的 CSP。

MDN has a good documentation about CSP which I would recommend reading for background. After that, take a look at Helmet's README 查看如何配置其 CSP 组件。

为了针对这个问题提供一些帮助，让我们看一下您看到的一个错误：

Refused to load the script 'https://google.com/recaptcha/...' because it violates the following Content Security Policy directive: "script-src 'self'". ...

此错误告诉您 CSP 的 script-src 指令不允许 JavaScript 从 google.com/recaptcha 加载，因此它被阻止了。

有几种方法可以解决这个问题：

1. 更新您的 CSP 以允许 JavaScript 从 Google 加载。你会做这样的事情：

   app.use(
     helmet({
       contentSecurityPolicy: {
         useDefaults: true,
         directives: {
           "script-src": ["'self'", "google.com"],
         },
       },
     })
   );
   

2. 重构您的应用程序以避免加载验证码。可能不可能，但这是一个可用的解决方案。

3. 禁用 CSP。这是最危险的选择，所以我不推荐它。

   app.use(
     helmet({
       contentSecurityPolicy: false,
     })
   );
   

总结：要解决您的问题，您需要告诉 Helmet 配置您的 CSP。

Answer 2

非常感谢@evanHahn 配置现在正在努力解决您需要在 ss 下方的后端配置头盔的问题。

app.use(
helmet({
  contentSecurityPolicy: {
    useDefaults: true,
    directives: {
      "script-src": ["'self'", "https://www.google.com/recaptcha/", "https://www.gstatic.com/recaptcha/"],
      "frame-src": ["'self'", "https://www.google.com/recaptcha/", "https://www.gstatic.com/recaptcha/"],
    },
  },
}));