Gatsby 内容安全策略答案

【问题标题】：Gatsby Content-Security-PolicyGatsby 内容安全策略
【发布时间】：2021-10-13 18:23:18
【问题描述】：

我使用default starter 创建了一个新的 gatsby 项目。创建项目后我所做的就是 npm install gatsby-plugin-csp plugin 并在 gatsby-config.js 中添加配置，如下所示：

{
  resolve: `gatsby-plugin-csp`,
  options: {
    disableOnDev: false,
    reportOnly: false, // Changes header to Content-Security-Policy-Report-Only for csp testing purposes
    mergeScriptHashes: false, // you can disable scripts sha256 hashes
    mergeStyleHashes: false, // you can disable styles sha256 hashes
    mergeDefaultDirectives: true,
    directives: {
      "script-src": "'self' 'unsafe-inline' www.google-analytics.com",
      "style-src": "'self' 'unsafe-inline'",
      "img-src": "'self' data: www.google-analytics.com"
    }
  }
},

但是，当我运行 npm run develop 并加载 localhost:8000 时，我在控制台中遇到以下错误以及空白页面：

未捕获的 EvalError：拒绝将字符串评估为 JavaScript，因为 'unsafe-eval' 不是以下允许的脚本来源内容安全策略指令：“script-src 'self' 'unsafe-inline' www.google-analytics.com”。
at Object../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js
(commons.js:404) 在 Object.options.factory (commons.js:4439) 在 webpack_require (commons.js:3811) 在 commons.js:5147 在 Function.webpack_require.O (commons.js:3860) 在 commons.js:5150 在 commons.js:5152

当我将 'unsafe-eval' 添加到 script-src 时，页面加载正常，但这当然不安全。

如果可能，我需要进行哪些配置更改才能在不使用 'unsafe-eval' 甚至 'unsafe-inline' 的情况下加载页面？

【问题讨论】：

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

【解决方案1】：

我读到这个错误，react-refresh-webpack-plugin 由于 CSP 而无法运行。 react-refresh-webpack-plugin 仅在开发期间使用。

最好的办法是在gatsby-plugin-csp 的选项中设置disableOnDev: true。这是不言自明的，但这只会禁用开发中的 CSP ($ gatsby develop)。要在本地测试 CSP，只需执行 $ gatsby build 和 $ gatsby serve。

【讨论】：