标签: angular2-security

<div [innerHTML]="html"></div>当html包含Iframe时不起作用.我试图做一些安全绕过this.sanitizer.bypassSecurityTrustResourceUrl(...,但它仍然无法正常工作.

这是使用angular2无法正确注入的演示.

我浏览了两个函数的角度文档

bypassSecurityTrustUrl说

绕过安全性并将给定的值信任为安全样式的 URL，即可以在超链接或 <img src>

bypassSecurityTrustResourceUrl说

绕过安全性并将给定值信任为安全资源 URL，即可用于从<script src>、 或加载可执行代码的位置<iframe src>。

以上都用于绕过安全和信任。

我绕过了 blob url <img src>，所以在阅读文档之前，我的 IDE (vscode) 展示了上述两个函数，我使用了bypassSecurityTrustResourceUrl，我的代码就像......这样。

组件.ts

    this.fileService.getFileBlobUrl(imgsrc).subscribe(url => {
      this.domSanitizer.bypassSecurityTrustResourceUrl
      user.bloburl = this.domSanitizer.bypassSecurityTrustResourceUrl(url);
    });

组件.html

    <img [src]="user.bloburl" class="avatar" alt="avatar">

根据文档bypassSecurityTrustUrl应该可以正常工作。但我使用了“bypassSecurityTrustResourceUrl”

它实际上正在工作！！！！

所以我的问题是这两个功能之间有什么区别。如果可以使用其中任何一个，为什么会有两个不同的功能？

我正在使用Observable<boolean>返回canActivate().设置了以下功能进行测试,并且正确解析,显示组件.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return Observable.from([{ admin: true }]).map(x =>
  {
    if (x.admin) return true;
    return false;
  });
}

但是,实际代码的行为是我保留在登录组件上,尽管控制台输出指示应该激活路由.上面测试的唯一真正区别是我正在调用服务this.auth.isAdmin()而不是使用Observable.from.结果this.auth.isAdmin()是Observable<boolean>值为true.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  const isAdmin$ = this.auth.isAdmin();
  return isAdmin$.map(x =>
  {
    console.log('isAdmin returned ' + x);
    if (!x) {
      console.log('redirectToLogin');
      this.auth.redirectToLogin(state.url);
      return false;
    } else {
      console.log('canActivate = true');
      return true;
    }
  });  
}

这是路由:

{
  path: 'admin',
  canActivate: [AdminGuard],
  children: [ …