Gatsby 内容安全策略

Posted 2023-03-25

【中文标题】Gatsby 内容安全策略

【英文标题】：Gatsby Content-Security-Policy

【发布时间】：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' 的情况下加载页面？

【参考方案1】：

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

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