Angular 2:清理HTML使用div id删除了一些内容 - 这是错误还是功能？

Question

我<div [innerHTML]="body"></div>用来将未转义的HTML传递给我的模板,当我传递给body div属性时id,Angular throw:

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

看到.plunker

那为什么这么说呢？什么可能是危险id的div？可能这个bug？

Answer 1

简单的解决方案是写管道

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>

Answer 2

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

Answer 3

这是因为id属性不安全.

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

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

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

请注意:他的帖子的其余部分谈到了name属性,但如果你还没有通过上面的内容,你会得到所有这些的想法

这也适用于HTML表单,name用于标识名称/值对.例如,如果网站在输出时不对特定表单字段进行编码,但由于表单字段是服务器生成的,并且表单通过使用令牌来防止CSRF,因此无法通过常规方式利用它.但是,攻击者可能会诱使用户访问带有参数的URL,该参数name包含在提交表单时要执行的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>.

因为这个页面不对HTML进行编码,shop_name因为它是受信任的,并且应用程序框架在重复的情况下总是取第一个值.非常做作,但这是我首先要证明这一点.