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）。

See. plunker

为什么会这样说呢？ id中有什么危险div？可能是这个错误吗？

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

这是因为id属性不安全。

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

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

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

我的注意事项：他的帖子的其余部分谈到了name属性，但是如果你还没有通过上面的内容，你就会明白这一点

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

e.g。正常使用：

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编码，因为它是受信任的，并且应用程序框架在重复的情况下始终采用第一个值。非常做作，但这是我头脑中首先证明这一点。

Answer 3

您还可以使用NgDompurify库。借助DomPurify，它可以更好地对您的内容进行消毒，并使用角度默认消毒剂解决所有问题。

Answer 4

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

www.example.com:5000

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

Angular 2：清理HTML剥离了一些带有div id的内容 - 这是bug还是功能？

4 个答案: