Angular 2：清理 HTML 删除了一些带有 div id 的内容 - 这是错误还是功能？答案

【问题标题】：Angular 2: sanitizing HTML stripped some content with div id - this is bug or feature?Angular 2：清理 HTML 删除了一些带有 div id 的内容 - 这是错误还是功能？
【发布时间】：2017-02-02 12:25:39
【问题描述】：

我使用 <div [innerHTML]="body"></div> 将未转义的 HTML 传递给我的模板，当我使用属性 id 传递给 body div 时，Angular 抛出：

警告：清理 HTML 会删除一些内容（请参阅 http://g.co/ng/security#xss）。警告：清理 HTML 会删除一些内容（请参阅 http://g.co/ng/security#xss）。警告：清理 HTML 会删除一些内容（请参阅 http://g.co/ng/security#xss）。

See. plunker

那为什么这么说呢？ div 中的 id 有什么危险？这个bug可以吗？

【问题讨论】：

标签： security angular warnings html-sanitizing

【解决方案1】：

要将值标记为可信，请注入 DomSanitizer 并调用以下方法之一：

bypassSecurityTrustHtml
bypassSecurityTrustScript
bypassSecurityTrustStyle
bypassSecurityTrustUrl
bypassSecurityTrustResourceUrl



import { DomSanitizer } from '@angular/platform-browser';

public sanitizer: DomSanitizer

[innerHtml]="sanitizer.bypassSecurityTrustHtml(content)"

https://angular.io/guide/security#xss

【讨论】：

【解决方案2】：

您也可以使用NgDompurify 库。由于 DomPurify，它可以更好地清理您的内容，并使用 Angular 默认清理器解决您的所有问题。

【讨论】：

【解决方案3】：

简单的解决方案是像管道一样写

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

在你的html文件中添加类似

  <td *ngIf="i>0" [innerHTML]="entry.attributes[i] | sanitizeHtml"></td>

【讨论】：

连同 Karl 对这个问题的回答：stackoverflow.com/questions/39007130/… 用消毒剂很好地解决了这个问题
@sanyooh 这很好用，但我得到undefined 在我的[innerHTML] 内容显示之前暂时显示。 <div [innerHTML]="code | sanitizeHtml"></div>
SafeHtml?应该从哪里导入
写管道时不要忘记导入 DomSanitizer 和 SafeHtml。 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
我在home.ts 和home.html 中添加了上述代码，但上面写着Template parse errors: The pipe 'sanitizeHtml' could not be found (" 我需要做什么？

【解决方案4】：

这是因为 id 属性不安全。

这不是我的答案，但它会回答你的问题：https://security.stackexchange.com/questions/88973/why-do-id-attributes-need-stricter-validation

对于id 和name，这些属性经常被用作DOM 中的参考点。

如果攻击者可以欺骗这些参考点，她可能会欺骗现有脚本从设计之外的地方获取和设置值，根据使用的上下文，这可能很危险。

来自我的注意：他的帖子的其余部分讨论了 name 属性，但如果你还没有通过上面的内容，你就会明白这一切背后的想法

这也适用于使用name 标识名称/值对的HTML 表单。例如，如果一个网站在输出时没有对特定的表单字段进行编码，但是由于表单字段是服务器生成的，并且通过使用令牌来保护表单免受 CSRF 的影响，它不能通过正常方式被利用。但是，攻击者可能能够诱使用户访问带有在 name 中使用的参数的 URL，其中包含要在提交表单时执行的 XSS 负载。

例如正常使用：

https://example.com/product?item_name=watch&qty=1

渲染表单

<form>

<input type="hidden" name="watch" value="1" />
<input type="hidden" name="shop_name" value="Bob's Supplies" />
<input type="hidden" name="anti-csrf" value="asdjasodhoai" />

<input type="submit" value="Click here to buy" />

</form>

然后得到输出为

Thank you for buying from Bob's Supplies.

但是，攻击者可以像这样向用户发送链接：

https://example.com/product?item_name=shop_name&qty=<script>alert('xss')</script>

由于此时应用程序是正确的 HTML 编码，它会将表单呈现为

<form>

<input type="hidden" name="shop_name" value="&lt;script&gt;alert(&#039;xss&#039;)&lt;/script&gt;" />
<input type="hidden" name="shop_name" value="Bob's Supplies" />
<input type="hidden" name="anti-csrf" value="asdjasodhoai" />

<input type="submit" value="Click here to buy" />

</form>

然后输出为

Thank you for buying from <script>alert('xss')</script>.

因为这个页面没有对 shop_name 参数进行 HTML 编码，因为它是受信任的，并且应用程序框架总是采用第一个值以防重复。非常做作，但这是我脑海中第一个证明这一点的事情。

【讨论】：

另见stackoverflow.com/questions/39628007/…