如何移除React项目中chunk加载错误生成的违规内联脚本

问题原因 #

你看到的违反CSP规则的内联脚本，是react-scripts（create-react-app的底层构建依赖）默认注入的懒加载Chunk加载失败重试逻辑，构建阶段会自动插入到入口HTML中，默认以内联形式存在，和禁止内联脚本的内容安全策略规则冲突。

可落地方案 #

方案1：未eject项目（推荐，无需侵入react-scripts源码） #

未执行npm run eject的项目，可以通过@craco/craco覆盖webpack配置，直接关闭内联脚本注入：

• 安装依赖：
  npm install @craco/craco --save-dev
• 在项目根目录新建craco.config.js配置文件，写入如下内容：

module.exports = {
  webpack: {
    configure: (config) => {
      // 遍历插件找到HtmlWebpackPlugin，关闭默认的chunk加载错误内联处理逻辑
      config.plugins.forEach(plugin => {
        if (plugin.constructor.name === 'HtmlWebpackPlugin') {
          plugin.userOptions.chunkLoadErrorHandler = false
        }
      })
      return config
    }
  }
}

• 修改package.json中的脚本命令，将原有react-scripts调用替换为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

重新执行构建命令后，产物中就不会再生成对应的内联脚本。

方案2：已eject项目 #

如果已经执行npm run eject暴露了完整构建配置，可以直接修改config/webpack.config.js文件：

• 找到配置中HtmlWebpackPlugin的实例化配置段
• 将配置项中的chunkLoadErrorHandler字段设置为false，删除默认的内联脚本注入逻辑
• 保存配置后重新构建即可生效。

方案3：保留错误重试能力的兼容方案 #

如果需要保留Chunk加载失败的自动重试能力，又不违反CSP规则，可以将默认的内联处理逻辑抽离为独立的外部JS文件：

1. 新建public/chunkLoadErrorHandler.js，将原内联的Chunk错误重试逻辑写入该文件
2. 在public/index.html中通过非内联的script标签引入该文件：<script src="/chunkLoadErrorHandler.js"></script>
3. 按照前述两个方案关闭默认的内联脚本注入即可。

注意：不建议为了兼容这段内联脚本在CSP规则中添加'unsafe-inline'配置，会大幅降低内容安全策略的XSS防护能力。

内容的提问来源于stack exchange，提问作者Sandeep Parashar