[解決済み] 安全でない値」の例外を発生させずに <iframe src="..."> を設定するにはどうしたらよいですか？

質問

チュートリアルを進めているところです。 iframe src 属性があります。

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

これは例外を投げます。

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

を使ったバインディングは既に試しています。 [src] を使用していますが、うまくいきません。

解決方法は？

v8アップデート

以下の回答はうまくいきますが は、あなたのアプリケーションをXSSセキュリティの危険にさらすことになります。 . を使う代わりに this.sanitizer.bypassSecurityTrustResourceUrl(url) を使用することが推奨されます。 this.sanitizer.sanitize(SecurityContext.URL, url)

更新情報

について RC.6^ バージョンを使用します。 DomSanitizer

プランカー

そして、良いオプションは、そのために純粋なパイプを使用することです。

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

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

を追加することを忘れないでください。 SafePipe を declarations の配列を AppModule に追加します。( ドキュメントにあるように )

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

html

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

プランカー

を使用する場合 embed というタグがありますが、これは面白いかもしれません。

• angular2 rc.6 で、pdf を表示する埋め込み html タグでサニタイズを無効にする方法。

旧バージョンRC.5

を活用することができます。 DomSanitizationService このように

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

そして、バインドして url をテンプレートに追加します。

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

以下のimportを追加することを忘れないでください。

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

プランカーサンプル