GatsbyJS 和内容安全政策

Question

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

我已将元标记添加到 html.js (https://www.gatsbyjs.com/docs/custom-html/) and it displays successfully in the source at the top of my compiled site, however the csp header isn't found when I run https://csp-evaluator.withgoogle.com/.

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

谁能帮帮我？

非常感谢，

保罗

Answer 1

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

Anything you render in the html.js component will not be made “live” in the client like other components. If you want to dynamically update your we recommend using 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 headers（通常发布 CSP）而不是元标记变体。

Answer 2

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

GatsbyJS 和内容安全政策

GatsbyJS & Content Security Policy

security

content-security-policy

reactjs

gatsby

gatsby-plugin