【Angular】html文書をエスケープしないでそのままtemplateに表示する

Angular

Angularなどのフロントエンドフレームワークでは、多くの場合HTMLを出力しようとすると自動で文字列にエスケープするセキュリティシステムが組み込まれています。これをサニタイジングといい、クロスサイトスクリプティング(XSS)対策のためには必須です。

Angularの場合は、Sanitizerというものがデフォルトでサニタイジングを行ってくれます。
https://angular.io/api/core/Sanitizer

とはいえ特に投稿フォームなどユーザーからの入力を表示する仕組みのないサイトの場合は、XSSのことを特に気にする必要はありません。
それに、管理者側で用意したHTML文書をそのままビューにバインドさせたい場合などは、勝手なサニタイズはかえって迷惑です。

ご安心ください、この自動サニタイズ処理、ちゃんとキャンセルできます。
今回はAngularのtemplateにそのままHTML文書を表示する方法を書いていきます。

この記事ではAngular7を扱っています。Angularはバージョンによってコードの書き方が大きく異なることがあります。特にAngularJSとの勘違いにご注意を!

AngularでHTML文書をそのまま表示する

やり方は簡単で、

  1. DomSanitizerオブジェクトのbypassSecurityTrustHtmlメソッドを使ってセキュリティ処理をパスさせる
  2. 返り値のSafeHTNLオブジェクトをinnerHTMLプロパティにバインド

だけです。

コード例:


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

@Component({
styleUrls: ['./html-viewer.component.css'],
templateUrl: './html-viewer.component.html'
})
export class HtmlViewerComponent implements OnInit {

  safeHtml: SafeHtml;

  constructor(private domSanitizer: DomSanitizer) { }

  ngOnInit() {
  //表示したいHTML文書の文字列をbypassSecurityTrustHtmlメソッドの引数に入れる
  this.safeHtml = this.domSanitizer.bypassSecurityTrustHtml("
  <h2 class="hoge" style="color: red;">aaaa</h2>
  ");
  }

のように、bypassSecurityTrustHtmlで安全を保障した後、templateの方でsafeHtmlを


<div [innerHTML]="safeHtml"></div>

プロパティバインディングします。

参考リンク

AngularでビューにHTML文書を「バインド」するには?(Property Binding)
プロパティバインディングでHTMLタグを含む文字列にバインドした場合、デフォルトでサニタイズされる挙動を確認。逆に意図的にサニタイズさせない方法を説明する。

コメント

タイトルとURLをコピーしました