在 Angular 5 中使用 [innerHTML] 是否安全？答案

【问题标题】：Is it safe to use [innerHTML] in Angular 5?在 Angular 5 中使用 [innerHTML] 是否安全？
【发布时间】：2018-05-03 21:02:51
【问题描述】：

我看到了相互矛盾的报告，即在 Angular2+ 中使用 [innerHTML] 标记很危险。仍然是这种情况还是已经解决了？

例如此代码是否危险：

<div [innerHTML]="post.body"></div>

【问题讨论】：

是的，它是安全的。看看Angular security documentation。

标签： angular innerhtml

【解决方案1】：

我确认。

我刚刚尝试了以下 <div [innerHTML]="<span (touch)=() => {alert('Code has been successfully executed on client from external malicious input');}">test xss</span>"></div>

没有执行任何操作，并且 DOM 检查显示 (touch) 已通过 angular 从 span 中删除。一切都很好;-)

【讨论】：

【解决方案2】：

正如它在here 中所说（在 Angular 网站本身中），看起来不用担心，因为 Angular 会自动识别不安全的值并对其进行清理。

这是里面写的：

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

对于要解释的 HTML，将其绑定到 HTML 属性，例如 innerHTML。但是将攻击者可能控制的值绑定到 innerHTML 通常会导致 XSS 漏洞。例如，执行<script>标签中包含的代码：

export class InnerHtmlBindingComponent { // For example, a user/attacker-controlled value from a URL. htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>'; }

Angular 将该值识别为不安全并自动对其进行清理，这将删除 <script> 标记，但保留安全内容，例如 <script> 标记和 <b> 元素的文本内容。

所以我认为，是的，它是安全的。

【讨论】：