【エラー】unsafe value used in a resource URL context

angularのロゴ画像

AngularでYouTubeの埋め込み(iframe)を使いたくて、かつそのソースURLをcomponent.tsでセットしたかった。

ということで画像のようにしてみた。
unsafe-value-errorの画像

ふつうだと<iframe src=”https://~”></iframe>みたいな感じでURLがベタ書きされる。

実際にYouTubeで埋め込みコードを取得するとそうなる。

で僕はこのURLに変数を入れたかったわけです。

なので[src]=”プロパティ名”としてURLを渡してあげるようにしてみた。

unsafe value used in a resource URL context

これでイケると思いきやこんなエラーが出ました。

unsafe-value-errorの画像

unsafe value used in a resource URL contextというセキュリティ的にダメそうなエラー。

エラーの原因はAngularの仕様だった

調べてみたところ、Angularではクロスサイトスクリプティング(サイバー攻撃の一種)を防ぐために、DOMに対して値が入れられた時には”Untrusted Value(信用できない値)”として扱い、エラーとしているよう。

unsafe-value-errorの画像
引用元: Angular 2 Security — The DomSanitizer Service

おっくソ

なるほど。

DomSanitizerを使えば解決

じゃあiframeで[src]=”プロパティ名”のようなことはできないのかと思いきや、ちゃんと解決策があった。

Angularで「DomSanitizer Service」を使えばいける。

コード
@Component({
  selector: 'my-app',
  template: `
     <iframe [src]="iframe"></iframe>
  `,
})
export class App {
  constructor(private sanitizer: DomSanitizer) {
    this.iframe = sanitizer.bypassSecurityTrustResourceUrl("https://www.google.com")
  }
}
引用元: Angular 2 Security — The DomSanitizer Service

ということで、僕も真似をしてDomSanitizerを使ってみたら、無事エラーなく実装できました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です