React项目移除CSP unsafe-eval后react-pdf依赖报Function调用拦截错误求解

首先明确两个核心问题的结论：

1. CSP规则是作用于整个脚本执行上下文的，不支持针对单个第三方依赖单独放行unsafe-eval，该思路无法实现。
2. 无需全量替换PDF生成库，可通过以下低改造成本的方案解决问题：

方案1：通过补丁工具直接修复restructure的违规代码（改造成本最低） #

该方案不需要修改任何业务代码，仅需要给依赖打本地补丁即可永久解决问题：

• 安装补丁工具：npm install patch-package --save-dev
• 找到node_modules/restructure中包含报错代码的文件，将动态生成Function的逻辑替换为静态的嵌套取值逻辑，修改示例如下：

// 原违规代码
// this.relativeToGetter = new Function('ctx', "return ctx." + this.options.relativeTo);

// 替换后的代码
function getNestedValue(obj, path) {
  return path.split('.').reduce((res, key) => res?.[key], obj)
}
this.relativeToGetter = (ctx) => getNestedValue(ctx, this.options.relativeTo)

• 执行npx patch-package restructure生成补丁文件，将自动生成的patches目录提交到代码仓库。后续所有环境安装依赖时都会自动应用该补丁，无需重复修改。

方案2：将PDF生成逻辑抽离到Web Worker隔离执行 #

如果你不想修改第三方依赖的源代码，可以通过上下文隔离的方式规避主页面的CSP限制：

• 把所有react-pdf相关的PDF生成逻辑抽离到单独的Web Worker文件中，Worker的执行上下文和主页面完全隔离
• 配置服务端响应头，仅给Worker脚本的响应返回包含script-src 'unsafe-eval'的CSP规则，主页面的CSP依然保持禁用unsafe-eval的合规配置
• 该方案仅需要抽离PDF相关的逻辑，不需要修改原有业务的PDF调用逻辑，改造成本远低于全量替换PDF库

方案3：替换为社区修复版的react-pdf依赖 #

目前已有开发者fork了react-pdf及其所有依赖，移除了全部动态执行逻辑以适配严格CSP规则，你可以直接替换package.json中的react-pdf依赖指向为社区修复版本，无需修改业务代码即可兼容无unsafe-eval的CSP配置。

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