序章

Angular 2+は、HTMLをレンダリングする[innerHTML]プロパティバインディングをサポートしています。 それ以外の方法で補間を使用する場合は、文字列として扱われます。

この記事では、[innerHTML]の使用方法と使用上の考慮事項について説明します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

ステップ1—innerHTMLを使用する

この記事の目的のために、プレーンテキストとHTMLのエンティティと要素の組み合わせで構成されるstringを含むコンポーネントを使用していると仮定します。

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example &amp; <strong>Bold Text Example</strong>';
}

この文字列に補間を使用するテンプレートを考えてみましょう。

<div>{{ htmlStr }}</div>

コンパイル後、このコードは次の結果を生成します。

プレーンテキストの例&太字のテキストの例

HTMLエンティティとHTML要素はレンダリングされません。

ここで、この文字列に[innerHTML]プロパティバインディングを使用するテンプレートについて考えてみましょう。

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

再コンパイル後、このコードは次の結果を生成します。

プレーンテキストの例＆ 太字のテキストの例

HTMLエンティティとHTML要素がレンダリングされていることを確認します。

ステップ2—制限を理解する

HTMLのレンダリングには、通常、クロスサイトスクリプティング（XSS）が導入される可能性があります。 レンダリングされたHTMLには、セキュリティの問題を引き起こす悪意のあるスクリプトが含まれている可能性があります。

XSSに対処する1つの方法は、HTML要素と属性の種類を既知の「安全な」要素と属性のセットに制限することです。

舞台裏では、[innerHTML]は承認されたHTML要素と属性のリストを使用するAngularのDomSanitizerを使用します。

注：承認されたHTML要素と属性の完全なリストは、html_sanitizer.tsで確認できます。

これにより、[innerHTML]の値が<script>および<style>タグとstyle属性を使用することが制限されます。 [innerHTML]を使用する場合は、この制限に注意してください。

結論

この記事では、Angular2+での[innerHTML]プロパティバインディングについて紹介しました。 これにより、文字列に含まれるHTMLマークアップがレンダリングされます。

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。