在 Angular2 应用程序中呈现用户内容的安全方法
Safe way to render user content in Angular2 app
我有两个 Angular 2 应用程序：一个供最终用户使用，一个供编辑团队使用。
都写在Javascript.
最终用户应用程序基本上是一个类似于 WhatsApp 的聊天视图，用户可以在其中与编辑团队进行一对一的聊天。编辑应用程序显示所有对话的列表，并且每个对话都有类似 WhatsApp 的聊天视图。
到目前为止，还不错。一切正常。但是，我有一个关于安全的问题。在第一个版本中，编辑应用程序中的消息内容是使用 innerHTML 语句呈现的：
<div [innerHTML]="message.data.text"></div>
然而，当用户滥用聊天输入字段并输入
message
时，将呈现此 HTML 语句，这是我们不希望看到的（因为它可能导致使用脚本标签等进行恶意尝试）。然而，我注意到 Angular2 足够聪明，不会呈现 JavaScript，但我不确定是否涵盖了每种代码注入。所以我将其更改为：
<div>{{ message.data.text }}</div>
这将忽略所有 HTML 并呈现
留言
这样做安全吗？或者还有一些罪魁祸首？我想解决这个问题的最好方法是在后端过滤掉所有不安全的输入（有可靠的方法吗？）
谢谢！
您应该尝试填写一个脚本标签，然后会发现它不再呈现，并在控制台中抛出警告。如果您使用 [innerHtml] 绑定并尝试创建一个 <input> 标签，情况也是如此。这也会失败。
To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted value
阅读 angular 指南的 security 部分了解更多信息。
但是如果你真的不希望用户生成任何HTML，你应该总是使用插值绑定({{text}})。
内插内容总是被转义——HTML 不被解释并且浏览器在元素的文本内容中显示尖括号。
要解释 HTML，请将其绑定到 HTML 属性，例如 innerHTML。但是将攻击者可能控制的值绑定到 innerHTML 通常会导致 XSS 漏洞。
我有两个 Angular 2 应用程序：一个供最终用户使用，一个供编辑团队使用。 都写在Javascript.
最终用户应用程序基本上是一个类似于 WhatsApp 的聊天视图，用户可以在其中与编辑团队进行一对一的聊天。编辑应用程序显示所有对话的列表，并且每个对话都有类似 WhatsApp 的聊天视图。
到目前为止，还不错。一切正常。但是，我有一个关于安全的问题。在第一个版本中，编辑应用程序中的消息内容是使用 innerHTML 语句呈现的：
<div [innerHTML]="message.data.text"></div>
然而，当用户滥用聊天输入字段并输入
message
时，将呈现此 HTML 语句，这是我们不希望看到的（因为它可能导致使用脚本标签等进行恶意尝试）。然而，我注意到 Angular2 足够聪明，不会呈现 JavaScript，但我不确定是否涵盖了每种代码注入。所以我将其更改为：<div>{{ message.data.text }}</div>
这将忽略所有 HTML 并呈现
留言
这样做安全吗？或者还有一些罪魁祸首？我想解决这个问题的最好方法是在后端过滤掉所有不安全的输入（有可靠的方法吗？）
谢谢！
您应该尝试填写一个脚本标签，然后会发现它不再呈现，并在控制台中抛出警告。如果您使用 [innerHtml] 绑定并尝试创建一个 <input> 标签，情况也是如此。这也会失败。
To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted value
阅读 angular 指南的 security 部分了解更多信息。
但是如果你真的不希望用户生成任何HTML，你应该总是使用插值绑定({{text}})。
内插内容总是被转义——HTML 不被解释并且浏览器在元素的文本内容中显示尖括号。
要解释 HTML，请将其绑定到 HTML 属性，例如 innerHTML。但是将攻击者可能控制的值绑定到 innerHTML 通常会导致 XSS 漏洞。