Angularでiframe要素のsrc属性を設定する際の注意事項

2024-04-02

Angularでiframe要素のsrc属性を動的に設定しようとすると、unsafe value例外が発生する可能性があります。これは、Angularがセキュリティのために、バインドされた値を直接DOMに挿入することを許可していないためです。

解決策:

iframe要素のsrc属性を安全に設定するには、以下の方法を使用できます。

DomSanitizerサービスは、バインドされた値を安全なHTMLに変換するために使用できます。

<iframe [src]="sanitizedUrl"></iframe>

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

get sanitizedUrl() {
  return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}

SafeUrlパイプは、DomSanitizerサービスを使用してURLを安全な値に変換します。

<iframe [src]="url | safeUrl"></iframe>

Renderer2を使用する:

Renderer2サービスは、DOMを直接操作するために使用できます。

<iframe #iframe></iframe>

import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) {}

setUrl(url: string) {
  this.renderer.setAttribute(this.iframe.nativeElement, 'src', url);
}

NgZoneを使用する:

NgZoneサービスは、Angularアプリケーション内のコードとブラウザのDOMとの間の相互作用を管理するために使用できます。

<iframe #iframe></iframe>

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

setUrl(url: string) {
  this.zone.runOutsideAngular(() => {
    this.iframe.nativeElement.src = url;
  });
}

注意事項:

上記の方法を使用する際は、常にURLが信頼できるソースからのものであることを確認してください。

<h1>Angularでiframe srcを安全に設定する方法</h1>

<p>
  <input type="text" [(ngModel)]="url" />
  <button (click)="setUrl()">設定</button>
</p>

<iframe [src]="sanitizedUrl"></iframe>

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  url = 'https://www.google.com/';

  constructor(private sanitizer: DomSanitizer) {}

  get sanitizedUrl() {
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

  setUrl() {
    // URLが信頼できるソースからのものであることを確認する
    if (!this.url.startsWith('https://')) {
      return;
    }

    this.sanitizedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }
}

このコードを実行すると、テキストボックスに入力したURLがiframe要素に表示されます。

上記以外にも、SafeUrlパイプ、Renderer2サービス、NgZoneサービスを使用してiframe要素のsrc属性を設定することができます。

iframe要素のsrc属性を設定するその他の方法

SafeUrlパイプを使用する

<iframe [src]="url | safeUrl"></iframe>

<iframe #iframe></iframe>

import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) {}

setUrl(url: string) {
  this.renderer.setAttribute(this.iframe.nativeElement, 'src', url);
}

<iframe #iframe></iframe>

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

setUrl(url: string) {
  this.zone.runOutsideAngular(() => {
    this.iframe.nativeElement.src = url;
  });
}