在Angular2應用中呈現用戶內容的安全方式

Question

我有兩個Angular 2應用程序：一個用於最終用戶，一個用於編輯團隊。 這兩個都是用Javascript編寫的。

最終用戶應用程序基本上是一個類似WhatsApp的聊天視圖，用戶可以與編輯團隊1對1聊天。編輯應用程序顯示所有對話的列表，並且還爲每個對話提供類似WhatsApp的聊天視圖。

到目前爲止，這麼好。一切正常。然而，我有一個關於安全的問題。

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

當用戶濫用聊天輸入框，然而，在

消息

類型，該HTML語句是：在第一個版本，在編輯應用程序的消息的內容使用innerHTML的語句被渲染呈現，這是我們不想要的（因爲它可能會導致用腳本標記等惡意嘗試）。不過，我注意到Angular2足夠聰明，不會呈現JavaScript，但我不確定是否涵蓋了每種類型的代碼注入。所以我把它改爲：

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

這忽略所有HTML並呈現

<H1>消息</H1 >

這是做這一種安全的方式？還是還有一些匪徒？我想解決這個問題的最好辦法是過濾掉後端的所有不安全的輸入（是否有可靠的方法來做到這一點？）

謝謝！

Answer 1

您應該嘗試填充腳本標記，並且會發現它不再呈現，並在控制檯中引發警告。如果您使用[innerHtml]綁定，並嘗試創建<input>標記，則也是如此。這也會失敗。

要系統地阻止XSS錯誤，Angular默認將所有值視爲不可信。當一個值被插入到從模板的DOM，經由屬性，特性，風格，類結合，或內插，角進行消毒和逸出不可信值

閱讀的角度引導件的security部分獲取更多信息。

但是，如果您確實不想讓用戶生成任何HTML，則應始終使用插值綁定（{{text}}）。

插值內容總是被轉義 - 不解釋HTML，瀏覽器在元素的文本內容中顯示尖括號。

要解釋HTML，請將其綁定到HTML屬性，如innerHTML。但是將攻擊者可能控制的值綁定到innerHTML通常會導致XSS漏洞。