Angular动态编译懒加载路由触发'unsafe-eval' CSP错误求助

我一眼就看出你的问题所在了：你用Angular的JIT编译器动态构建模块，而JIT内部依赖new Function()来生成执行代码——这正好撞在了CSP的unsafe-eval限制上，毕竟你现在的CSP只允许default-src 'self'，完全没给这种动态执行的权限。

下面给你几个实用的解决方案，按需选择即可：

方案1：调整CSP策略，给JIT开绿灯（最直接） #

既然你必须用动态模块编译（离不开JIT），那最简单的办法就是修改CSP配置，在script-src里加上'unsafe-eval'——注意哦，default-src是兜底规则，单独指定script-src会覆盖它的脚本相关限制，所以配置要改成这样：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval';" />

💡 温馨提示：

• 添加'unsafe-eval'确实会降低一点页面安全性，因为它允许执行字符串形式的代码。如果你的应用要处理用户输入或者第三方内容，一定要额外小心防范注入攻击。
• 如果你还用到了内联脚本，可能还要加'unsafe-inline'，但从你的代码来看暂时不需要。

方案2：弃用JIT，改用预编译模块（最安全） #

如果你的动态路由模块可以提前预编译，那强烈建议切换到Angular的AOT（提前编译）模式：

• 删掉JIT编译器的配置（就是那些JitCompilerFactory相关的代码）
• 把动态模块改成静态导入，或者用Angular标准的loadChildren语法，比如loadChildren: () => import('./path/to/module').then(m => m.MyModule)

不过这个方案有个限制：如果你的模块必须完全动态生成（比如路由配置是从后端接口拉取的，没法提前编译），那AOT就用不了，只能选方案1。

方案3：自定义JIT评估逻辑（复杂但更安全） #

要是你死活不想放开unsafe-eval，那可以试试重写Angular的JitEvaluator类，用不依赖new Function()的方式执行动态代码。不过这个路子非常复杂，得深入搞懂Angular编译器的内部机制，而且Angular版本一更新可能就失效了，只适合对安全性要求极高且有足够精力维护的场景。

针对你的场景的建议 #

看你的代码，你是通过动态路由配置生成模块，这种场景下JIT是绕不开的，所以方案1肯定是最适合你的。改完CSP之后，JitEvaluator里的new Function()调用就会被允许，那个错误自然就消失了。

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