Angular2アプリでユーザーコンテンツを安全にレンダリングする

Question

2つのAngular 2アプリがあります.1つはエンドユーザー用、もう1つは編集チーム用です。 どちらもJavascriptで書かれています。

エンドユーザーのアプリは基本的にWhatsAppのようなチャットビューです。ユーザーは1対1の編集チームとチャットできます。編集アプリはすべての会話のリストを表示し、会話ごとにWhatsAppのようなチャットビューも表示します。

これまでのところ、とても良いです。すべてうまく動作します。しかし、私は安全性についての質問があります。チャット入力フィールドには、しかし、および

メッセージ

内の型、このHTML文はユーザー侵害された場合

<div [innerHTML]="message.data.text"></div> 

：最初のバージョンでは、編集アプリでメッセージの内容は、innerHTMLの文を使用してレンダリングされました私たちが望んでいないものです（スクリプトタグなどの悪意のある試みにつながる可能性があるため）。しかし、Angular2はJavaScriptをレンダリングできないほどスマートですが、あらゆる種類のコードインジェクションがカバーされているかどうかはわかりません。だから私は、これを変更：これは、すべてのHTMLを無視し、レンダリング

<div>{{ message.data.text }}</div> 

<H1>メッセージ</H1 >

これは、これを行うための安全な方法ですか？または、まだいくつかの犯人はありますか？私はこの問題に取り組む最善の方法は、バックエンドのすべての安全でない入力を除外することです（これを行う信頼できる方法はありますか？）

ありがとう！

Answer 1

スクリプトタグを入力すると、それ以上レンダリングされないことがわかり、コンソールに警告がスローされます。 [innerHtml]バインディングを使用して、<input>タグを作成しようとすると同じことが起こります。これも失敗します。

XSSバグを体系的にブロックするために、Angularはデフォルトですべての値を信頼できないものとして扱います。値は、プロパティ、属性、スタイル、バインディング・クラス、または補間を経由して、テンプレートからDOMに挿入されると、角度サニタイズと信頼されていない値をエスケープ

詳細については、角度ガイドのsecurityセクションをお読みください。

実際にはユーザーにHTMLを生成させたくない場合は、常に補間バインディング（{{text}}）を使用する必要があります。

補間されたコンテンツは常にエスケープされます.HTMLは解釈されず、ブラウザは要素のテキストコンテンツに山括弧を表示します。

HTMLを解釈するには、innerHTMLなどのHTMLプロパティにバインドします。しかし、攻撃者が制御する可能性のある値をinnerHTMLにバインドすると、通常、XSSの脆弱性が発生します。