Angular安全专辑之二——‘unsafe-eval’不是以下内容安全策略中允许的脚本源

一：错误出现

这个错误的意思是，拒绝将字符串评估为 JavaScript，因为‘unsafe-eval’不是以下内容安全策略中允许的脚本源。

二：错误场景

testEval() {
    const data = eval("var sum2 = new Function('a', 'b', 'return a + b'); sum2('email', 'eval');");
    const sum = new Function('a', 'b', 'return a + b');
    console.log('test eval:', data);
  }

类似的不安全的表达式还有：

1. eval()
2. Function() ——When passing a string literal like to methods like: setTimeout("alert(\"Hello World!\");", 500);
3. setTimeout()
4. setInterval()
5. window.setImmediate
6. window.execScript() (IE < 11 only)

三，错误原因

因为我的安全策略（CSP）白名单中并不包含‘unsafe-eval’这个选项。所以抛出了异常。

不包含‘unsafe-eval’的理由是eval 实际上是不安全的。 它在每种语言中的意思是“获取这个字符串并执行它的代码”。 也就是说eval本质是将字符串转成表达式并执行。容易遭到注入攻击。

四，错误解决

1：尽量避免使用eval方法，大多数情况下，eval方法是可以被避免的。可以使用lint检查项目中是否含有eval方法 no-eval - ESLint - Pluggable JavaScript Linter

上述的代码可以这样更改，代码正常工作

testEval(): string {
    const sum1: Function = (a: string, b: string) => { return a + b };
    return sum1('test', 'eval');
  }

2：如果有时候，必须动态生成方法，这部分工作可以放到服务端完成。而不是把‘unsafe-eval’加入到CSP白名单中。

上述代码还可以这样更改，代码正常工作

testEvalSolutionTwo(): Observable