GatsbyJS和内容安全政策

如何解决GatsbyJS和内容安全政策

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

我已将Meta-tag添加到html.js（https://www.gatsbyjs.com/docs/custom-html/）中，并且已成功显示在已编译站点顶部的源代码中，但是当我运行{{时，找不到csp标头3}}。

我也尝试过https://csp-evaluator.withgoogle.com/，但这创建了一个完整的错误列表。

有人可以帮我吗？

非常感谢

保罗

解决方法

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），而不是meta标签变体。

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