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

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

文章目录

• • 问题描述
  • 原因分析
  • 解决方案
  • • 1. 避免使用 `eval()`
    • 2. 配置Content Security Policy (CSP)
    • 3. 使用安全的替代方案
    • 4. 更新和测试插件
  • 实战案例
  • 总结

问题描述

在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）配置禁止了这种行为。

原因分析

1. Content Security Policy (CSP)：CSP是一种安全机制，用于限制浏览器加载和执行外部资源，如脚本、样式和图像。CSP通过 script-src 等指令指定哪些源是可信的。默认情况下，script-src 不允许 unsafe-eval，这意味着任何通过 eval() 或 Function() 等方法执行的字符串代码都不会被允许。

2. 使用 eval() 和类似功能：开发者可能会在代码中使用 eval() 函数来动态执行字符串形式的JavaScript代码。例如：

   eval(\"var sum = new Function(\'a\', \'b\', \'return a + b\'); sum(1, 2);\");

   这种做法在CSP策略中是不允许的，除非明确允许 unsafe-eval。

3. 浏览器插件和扩展：某些浏览器插件或扩展可能会尝试使用 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文件的 部分添加以下元数据标签：

<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.jsdocument.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.jsdocument.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() 或类似功能。通过以下方法可以有效避免该问题：

1. 避免使用 eval()：尽量使用其他安全的替代方法，如 Function 构造函数、模板字符串或DOM操作。
2. 配置CSP：在CSP策略中添加 unsafe-eval，但需谨慎使用，避免引入安全风险。
3. 使用安全的替代方案：确保传递给 Function 构造函数的参数是安全的。
4. 更新和测试插件：确保浏览器插件和扩展的CSP配置正确。

通过这些方法，开发者可以提高代码的健壮性，减少运行时错误，提升应用的稳定性和用户体验。建议开发者定期检查和测试代码，确保所有引用都正确无误。