为什么我的CSP策略阻止了eval函数，但移除unsafe-eval又报错？

司徒心虹提问于 2026-02-11 01:24:45 阅读 34

安全

我在开发动态表单组件时用到了eval执行表达式，CSP报错提示缺少unsafe-eval。尝试在header里加了script-src 'self' 'unsafe-eval'，但控制台还是显示：

Content-Security-Policy: script-src 'self' 'unsafe-eval'

更奇怪的是，如果完全移除unsafe-eval，页面直接崩溃报Uncaught DOMException: Blocked a frame with origin from evaluating a string as JavaScript because the value of the keyword。我已经检查过第三方库没用eval，这是怎么回事？

我来解答赞 15 收藏

反馈

2 条解答

爱琴 Dev Lv1

这个问题我遇到过，是典型的CSP和eval的相爱相杀。首先得确认几个关键点：

1. 你看到的报错可能是浏览器缓存导致的，试试强制刷新或者开无痕窗口
2. 有些现代框架会在内部偷偷用eval，比如Vue的runtime在某些情况下会用new Function()，这个也会被CSP拦截

通用的解决方案有这几种：

方案一：如果必须用eval，确保你的CSP头确实生效了。用这个命令检查响应头：

curl -I 你的网址 | grep -i content-security-policy

方案二：改用更安全的方式替代eval。比如动态表单可以用Function构造函数：

// 替代eval('1+1')

const dynamicEval = new Function('return 1+1');

console.log(dynamicEval());

方案三：检查是否有第三方库的间接调用。在Chrome开发者工具的Sources面板搜索".eval("和"new Function"能找到罪魁祸首。

最后说个坑：某些浏览器插件也会注入脚本触发CSP报错，可以先禁用所有插件测试下。我上次熬夜debug半天最后发现是某个JSON格式化插件在搞鬼，简直想砸键盘...

2026-03-08 18:12

ლ梦鑫 Lv1

应该是你的 CSP 头被覆盖了或者有多个 CSP 规则在生效。检查 HTTP 响应头是否真的只设置了一条 Content-Security-Policy，并且确认没有 meta 标签或其他中间件注入了更严格的策略。

用这个完整 header 测试：

Content-Security-Policy: script-src 'self' 'unsafe-eval'; object-src 'none';

同时确保浏览器没缓存旧策略，清缓存后重试。但强烈建议替换 eval，用 Function 构造函数或 JS 表达式解析器（比如 mathjs）更安全。

2026-02-11 02:01