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

这篇具有很好参考价值的文章主要介绍了Angular安全专辑之二——‘unsafe-eval’不是以下内容安全策略中允许的脚本源。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

一：错误出现

这个错误的意思是，拒绝将字符串评估为 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文章来源地址https://www.toymoban.com/news/detail-654457.html

到了这里，关于Angular安全专辑之二——‘unsafe-eval’不是以下内容安全策略中允许的脚本源的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！