EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval‘ is not an allowed source

阿珊和她的猫

于 2025-03-07 22:51:24 发布

阅读量843

点赞数 19

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42554191/article/details/146107383

版权

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

问题描述

在JavaScript开发过程中，开发者经常会遇到 EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive 的错误提示。该错误通常表示在代码中尝试使用 eval() 或类似功能动态执行字符串形式的JavaScript代码，但当前页面的内容安全策略（CSP）配置禁止了这种行为。

原因分析

Content Security Policy (CSP)：CSP是一种安全机制，用于限制浏览器加载和执行外部资源，如脚本、样式和图像。CSP通过 script-src 等指令指定哪些源是可信的。默认情况下，script-src 不允许 unsafe-eval，这意味着任何通过 eval() 或 Function() 等方法执行的字符串代码都不会被允许。
使用 eval() 和类似功能：开发者可能会在代码中使用 eval() 函数来动态执行字符串形式的JavaScript代码。例如：
```
eval("var sum = new Function('a', 'b', 'return a + b'); sum(1, 2);");
```
这种做法在CSP策略中是不允许的，除非明确允许 unsafe-eval。
浏览器插件和扩展：某些浏览器插件或扩展可能会尝试使用 unsafe-eval，如果它们的CSP配置不正确，也会导致这个错误。例如，Chrome扩展在更新后可能会禁用 unsafe-eval，导致依赖于该功能的插件无法正常工作。

解决方案

1. 避免使用 `eval()`

尽量避免在代码中使用 eval() 和类似功能。可以使用其他安全的替代方法，如：

Function构造函数：

function add(a, b) {
    return a + b;
}
add(1, 2);

模板字符串：

const sum = (a, b) => a + b;
sum(1, 2);

DOM操作：如果需要在客户端动态执行代码，可以考虑使用DOM操作API，如 innerHTML 或 createElement。

2. 配置Content Security Policy (CSP)

如果确实需要使用 eval() 或类似功能，可以在CSP策略中添加 unsafe-eval。例如，在HTML文件的 <head> 部分添加以下元数据标签：

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

或者在服务器端设置HTTP响应头：

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

3. 使用安全的替代方案

如果可能，尽量使用安全的替代方案来替代 eval()。例如，使用 Function 构造函数时，确保传递给函数的参数是安全的：

function defineGetter(prop, data) {
    return Object.defineProperty(this, prop, {
        get: () => data
    });
}

4. 更新和测试插件

对于浏览器插件和扩展，确保其CSP配置正确。可以尝试更新插件到最新版本，或者联系插件开发者，询问他们是否计划在未来的版本中解决此问题。

实战案例

假设有一个插件需要动态执行一些代码，但遇到了 EvalError：

// popup.js
document.ready(function() {
    $.getJSON('http://alerts.json', function(data) {
        eval("alert('HELLO');"); // 报错: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive
    });
});

解决方案是避免使用 eval()，改用安全的替代方法：

// popup.js
document.ready(function() {
    $.getJSON('http://alerts.json', function(data) {
        alert('HELLO');
    });
});

总结

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive 错误通常是由于在CSP策略中未允许 unsafe-eval，而代码中使用了 eval() 或类似功能。通过以下方法可以有效避免该问题：