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

Question

我使用 <div [innerHTML]="body"></div> 将未转义的 HTML 传递给我的模板，当我传递给具有属性 id、[=28 的 body div 时=] 投掷：

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss). WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss). WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

See. plunker

那么为什么会这样说呢？ div 中有什么危险 id？会不会是这个bug？

Answer 1

因为id属性不安全

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

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

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

我的注意事项：他 post 的其余部分讨论了 name 属性，但是如果您还不了解上面的内容，您将了解这一切背后的想法

这也适用于 HTML 形式，其中 name 用于标识 name/value 对。例如，如果一个网站在输出时没有对特定的表单字段进行编码，但由于表单字段是服务器生成的，并且表单通过使用令牌来防止 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.

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

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>.

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

Answer 2

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

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 文件中添加 add pile like

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

Answer 3

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

Answer 4

要将值标记为可信值，请注入 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

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

Angular 2: sanitizing HTML stripped some content with div id - this is bug or feature?

security

warnings

html-sanitizing

angular