angular - 如何设置 <iframe src ="..."> 而不会导致 `unsafe value` 异常？

Question

我正在编写一个涉及设置 iframe src 属性的教程:

<iframe width="100%" height="300" src="{{video.url}}"></iframe>

这会引发异常:

Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...

我已经尝试使用 [src] 的绑定(bind)，但没有成功。

Answer 1

更新 v8

以下答案有效，但 exposes your application to XSS security risks! . 建议不要使用 this.domSanitizer.bypassSecurityTrustResourceUrl(url)，而是使用 this.domSanitizer.sanitize(SecurityContext.URL, url)

更新

RC.6^ 版本使用DomSanitizer

Plunker

一个不错的选择是为此使用纯管道:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer) {}
  transform(url) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
} 

记得将新的 SafePipe 添加到 AppModule 的 declarations 数组中。 ( as seen on documentation )

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

html

<iframe width="100%" height="300" [src]="url | safe"></iframe>

Plunker

如果您使用 embed 标签，您可能会感兴趣:

• how with angular2 rc.6 disable sanitize on embed html tag which display pdf

---

旧版本 RC.5

您可以像这样利用 DomSanitizationService:

export class YourComponent {
  url: SafeResourceUrl;
  constructor(domSanitizationService: DomSanitizationService) {
    this.url = domSanitizer.bypassSecurityTrustResourceUrl('your url');
  }
}

然后绑定(bind)到模板中的 url:

<iframe width="100%" height="300" [src]="url"></iframe>

不要忘记添加以下导入:

import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';

Plunker sample