Angularで「インラインフレーム」に外部リソースをバインドするには？（Property Binding）：Angular TIPS

セキュリティの観点からデフォルトではiframeのsrc属性やobjectのdata属性にはプロパティバインディングできない。これを回避して信頼できる値としてバインディングする方法を説明する。

[山田祥寛，著]

連載目次

※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。

【対応バージョン】

　Angular 4以降。v4時点で執筆しました。

　別稿「TIPS：ビューにHTML文書をバインドするには？」でも触れたように、Angularでは外からのリソースの取り込みに対して一定の制限を課しています。

　例えば、<iframe>要素のsrc属性、<object>要素のdata属性などへのProperty Bindingはデフォルトでは許可されていません。まずは、以下のサンプルで確認してみましょう。

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

@Component({
  selector: 'app-root',
  template: `
  <!--src属性にsiteプロパティの値をバインド-->
  <iframe [src]="site"></iframe>
  `,
})
export class AppComponent  { 
  site = 'http://www.wings.msn.to/';
}

インラインフレームにバインドするためのコード（app.component.ts）

　果たして、このコードは「unsafe value used in a resource URL context」のようなエラーで動作しません（エラーメッセージは開発者ツールで確認できます）。バインド構文で動的にインポートされた外部リソースは、時として、セキュリティリスクとなる可能性があるので、まずはバインド構文でのリソース指定を禁止しているわけです。

　このようなコードを動作させるには、DomSanitizerクラスのbypassSecurityTrustResourceUrlメソッドで、リソースが信頼できることを宣言します。以下は、上のコードを修正したものです。

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

@Component({
  selector: 'app-root',
  template: `
  <iframe [src]="safeSite"></iframe>
  `,
})
export class AppComponent  { 
  safeSite: SafeResourceUrl;
  site = 'http://www.wings.msn.to/';

  constructor(private sanitizer: DomSanitizer) {
    this.safeSite = sanitizer.bypassSecurityTrustResourceUrl(this.site);
  }
}

引用するリソースが信頼できることを宣言するコード（app.component.ts）

▼

指定されたサイトをインラインフレームで表示

　今度は、指定されたサイトがインラインフレームで表示されていることを確認してください。bypassSecurityTrustResourceUrlメソッドの戻り値は、SafeResourceUrlオブジェクトです。これでProperty Bindingは、与えられたリソースをそのまま取り込むようになります。

　ただし、ここで誤解してはいけないのが、bypassSecurityTrustResourceUrlメソッドがリソースの内容を検証しているわけでも保証しているわけでもない、という点です。bypassSecurityTrustResourceUrlメソッドは、あくまで「指定されたリソースが信用できる（Trust）ことをマークしている」にすぎません。

　リソースの信頼性を確認するのはあくまでアプリ開発者の仕事なので、無条件にbypassSecurityTrustResourceUrlメソッドを呼び出してはいけません。

処理対象：テンプレート構文（Template Syntax）　カテゴリ：基本
処理対象：Property Binding（プロパティバインディング）　カテゴリ：テンプレート構文（Template Syntax）
処理対象：バインディング構文（Binding Syntax）　カテゴリ：テンプレート構文（Template Syntax）
処理対象：セキュリティ　カテゴリ：基本
処理対象：安全な値の信頼（Trusting safe values）　カテゴリ：セキュリティ
API：DomSanitizer　カテゴリ：@angular > platform-browser > CLASS（クラス）
API：SafeResourceUrl　カテゴリ：@angular > platform-browser > INTERFACE（インターフェース）

「Angular TIPS」