0

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

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

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

任何人都可以帮助我吗？

非常感激，

保罗

4

2 回答 2

1

该文档建议不要尝试使用html.js来修改<head>：

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

你可能会有更好的运气，而不是将这样的东西添加到gatsby-browser.jsand 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）而不是元标记变体。

于 2020-09-10T14:33:11.280 回答
0

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

于 2020-09-23T16:14:30.810 回答