1

我正在使用 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/"
/>

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

在我的头盔配置中在此处输入图像描述

4

2 回答 2

1

头盔维护者在这里。

之所以会发生这种情况，是因为 Helmet 默认设置的内容安全策略。Helmet 将其设置在 HTTP 标头中，该标头会覆盖您在该<meta>标记中放入的内容。

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

MDN 有一个很好的关于 CSP 的文档，我建议您阅读作为背景知识。之后，查看Helmet 的 README以了解如何配置其 CSP 组件。

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

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

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

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

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

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

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

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

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

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

于 2021-10-18T12:46:09.713 回答
1

非常感谢@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/"],
    },
  },
}));
于 2021-10-18T14:33:37.910 回答