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<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