Angular如何在清理时保留Html ID属性答案

【问题标题】：Angular how to retain Html ID attribute when sanitizedAngular如何在清理时保留Html ID属性
【发布时间】：2019-12-15 10:43:31
【问题描述】：

如何在清理时只保留 div 的 id 部分，删除脚本部分。

Stackblitz

Angular XSS

import { OnInit, Component, Input, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'hello',
  template: `{{unsafe}}
    <br/>
    <br/>
    <div [innerHtml]="unsafe">
    </div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit  {
  @Input() name: string;

  constructor(private sanitizer: DomSanitizer){}

  output = 'heyo <div class="someclass" id="someid">sbang</div> <script>alert("bang");</script>';
  unsafe = this.output;


  ngOnInit(){
    console.log(this.sanitizer.sanitize(SecurityContext.NONE, this.unsafe));
    // heyo <div class="someclass" id="someid">sbang</div> <script>alert("bang");</script>
    console.log(this.sanitizer.sanitize(SecurityContext.HTML, this.unsafe));
    // heyo <div class="someclass">sbang</div> 
    console.log(this.sanitizer.sanitize(SecurityContext.STYLE, this.unsafe));
    // unsafe
    console.log(this.sanitizer.sanitize(SecurityContext.URL, this.unsafe));
    // heyo <div class="someclass" id="someid">sbang</div> <script>alert("bang");</script>
    console.log(this.sanitizer.sanitize(SecurityContext.RESOURCE_URL,this.unsafe));
    // error
  }
}

结果：

【问题讨论】：

标签： angular

【解决方案1】：

我对 DomSanitizer 不是很熟练，但我发现这似乎有效：

console.log(this.sanitizer.bypassSecurityTrustHtml(this.unsafe));

另外，我发现了另一个 SO 问题，它似乎对它进行了更多扩展： Duplicate?

【讨论】：

【解决方案2】：

我认为这是不可能的。从来源来看，id 属性不包含在已批准的清理属性数组中：

https://github.com/angular/angular/blob/master/packages/core/src/sanitization/html_sanitizer.ts#L69

在此处调用了对 HTML 的清理：

https://github.com/angular/angular/blob/master/packages/platform-browser/src/security/dom_sanitization_service.ts#L159

看来您必须接受默认值或使用bypassSecurityTrustHtml 禁用。猜猜你可以在清理之前记录id属性，然后再添加回来

【讨论】：