消息

Question

我有两个Angular 2应用程序：一个用于最终用户，另一个用于编辑团队。两者都是用Javascript编写的。

最终用户应用程序基本上是类似WhatsApp的聊天视图，用户可以与编辑团队1对1聊天。编辑应用程序显示所有会话的列表，并且还为每个会话提供类似WhatsApp的聊天视图。

到目前为止，这么好。一切正常。不过我对安全性有疑问。在第一个版本中，编辑应用程序中的消息内容使用innerHTML语句呈现：

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

然而，当用户滥用聊天输入字段并输入

时，会呈现此HTML语句，这是我们不想要的（因为它可能导致恶意尝试使用脚本标记等。然而，我注意到Angular2足够聪明，不能渲染JavaScript，但我不确定是否涵盖了各种代码注入。所以我将其更改为：

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

这会忽略所有HTML并呈现

＆LT; H1＆gt;消息和LT; / H1＆GT;

这是一种安全的方法吗？还是还有一些罪魁祸首？我想解决这个问题的最好方法是过滤掉后端的所有不安全输入（有可靠的方法吗？）

谢谢！

Answer 1

您应该尝试填写脚本标记，并发现它不再呈现，并在控制台中抛出警告。如果您使用[innerHtml]绑定，并尝试创建<input>标记，也是如此。这也会失败。

为了系统地阻止XSS错误，Angular默认将所有值视为不受信任。当一个值从模板，通过属性，属性，样式，类绑定或插值插入到DOM中时，Angular会清理并转义不受信任的值

阅读角度指南的security部分以获取更多信息。

但如果你真的不希望用户生成任何HTML，你应该总是使用插值绑定（{{text}}）。

内插的内容总是被转义 - HTML不会被解释，浏览器会在元素的文本内容中显示尖括号。

要解释HTML，请将其绑定到HTML属性，例如innerHTML。但是将攻击者可能控制的值绑定到innerHTML通常会导致XSS漏洞。