Content Security Policy unsafe-eval错误：如何放行特定node_modules文件？

为什么你的现有配置无效 #

CSP的script-src指令不支持直接指定文件路径，你添加的'node_modules/aurelia-webpack-plugin/runtime/empty-entry.js'是无效规则。报错核心是该脚本在运行时触发了eval调用，而你的CSP未允许unsafe-eval，同时'self'仅涵盖同域资源，不允许eval行为。

可行方案 #

方案1：使用脚本哈希（最安全，无需开启unsafe-eval）

1. 查看浏览器控制台的CSP报错信息，里面会包含触发错误的脚本哈希值（格式类似'sha256-xxxxxxxxxx'）
2. 将该哈希添加到script-src指令中，修改后的CSP头示例：

script-src 'self' 'sha256-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
script-src-elem 'self';
style-src 'self';
img-src 'self';

注意：每次脚本内容变更，哈希值会改变，需要重新更新。

方案2：调整Aurelia Webpack插件配置，禁用eval依赖

aurelia-webpack-plugin提供了disableEval选项，可避免生成需要eval的代码，从根源解决问题：
在你的webpack.config.js中修改插件配置：

const AureliaWebpackPlugin = require('aurelia-webpack-plugin');

module.exports = {
  // 其他webpack配置...
  plugins: [
    new AureliaWebpackPlugin({
      disableEval: true // 启用该选项禁用eval
    })
  ]
};

重新打包后，该插件会改用非eval的方式加载代码，不再触发CSP错误。

方案3：临时添加unsafe-eval（不推荐生产环境使用）

如果上述方案均无法快速落地，可临时在script-src中加入'unsafe-eval'应急：

script-src 'self' 'unsafe-eval';
script-src-elem 'self';
style-src 'self';
img-src 'self';

注意：该选项会降低CSP的安全防护能力，生产环境尽量避免使用。

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