在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漏洞。