GatsbyJS 和内容安全政策答案

【问题标题】：GatsbyJS & Content Security PolicyGatsbyJS 和内容安全政策
【发布时间】：2020-12-29 01:05:56
【问题描述】：

我正在努力将 csp 元标记添加到 GatsbyJS 网站。有人可以帮忙吗？

我在 html.js (https://www.gatsbyjs.com/docs/custom-html/) 中添加了元标记，它在我编译的站点顶部的源代码中成功显示，但是当我运行 https://csp-evaluator.withgoogle.com/ 时找不到 csp 标头。

我也尝试过https://www.gatsbyjs.com/plugins/gatsby-plugin-csp/，但这会创建一个完整的错误列表。

谁能帮帮我？

非常感谢，

保罗

【问题讨论】：

标签： reactjs security gatsby content-security-policy gatsby-plugin

【解决方案1】：

documentation 建议不要尝试使用html.js 修改<head>：

您在 html.js 组件中呈现的任何内容都不会像其他组件一样在客户端中“活动”。如果你想动态更新你的，我们推荐使用 React Helmet。

你可能有更好的运气，而不是将这样的东西添加到gatsby-browser.js 和gatsby-ssr.js：

export const wrapPageElement = ({ element }) => 
  <>
    <Helmet>
      <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';" />
    </Helmet>

    {element}
  </>

最后，可能值得手动检查它是否出现在您构建的 HTML 文件中，而不是依赖验证器。我怀疑验证器只查看您的 HTTP 标头（通常发出 CSP）而不是元标记变体。

【讨论】：

【解决方案2】：

因此，最终的解决方案是坚持使用 csp-plugin 并将所有被阻止的 url 添加到配置设置中，这可能是一个非常烦人的过程。但是，此插件只会在您的构建中生成元标记。为了创建 csp 标头，您必须在服务器端添加相同的信息。在我的例子中，它被添加到 Apache 服务器上的 htaccess 文件中。希望这对某人有所帮助！

【讨论】：