一：错误出现
这个错误的意思是，拒绝将字符串评估为 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);}类似的不安全的表达式还有：
- eval()
- Function() ——When passing a string literal like to methods like: setTimeout("alert(\"Hello World!\");", 500);
- setTimeout()
- setInterval()
- window.setImmediate
- 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<Object> {return this.http.get(this.rootURL + '/test/eval');}
五，CSP的配置补充
CSP可以在三个地方配置
1：拦截器
import { requestInterceptor } from './http/request.intercepter'; @NgModule({.. .. ..providers: [{provide: HTTP_INTERCEPTORS,useClass: requestInterceptor,multi: true}],bootstrap: [AppComponent] }) export class AppModule { }import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent } from '@angular/common/http'; import { Observable } from 'rxjs';@Injectable() export class requestInterceptor implements HttpInterceptor {constructor() {}intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {req.headers.append('Content-security-policy', `script-src 'self';`);return next.handle(req);} }2：html文件
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; child-src 'none';">3：server端（推荐）
app.use(function (req, res, next) {res.setHeader('Content-security-policy',`script-src 'self';` +`connect-src 'self';`,);next(); });
CSP文档参见：CSP: script-src - HTTP | MDN
