Angular如何在进行过安全处理后保留HTML ID属性

Question

当对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
  }
}

结果：

- Chenna

Answer 1

我认为这是不可能的。从代码中看，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 属性，并在过滤后将其添加回去。

- Drenai

Answer 2

我对DomSanitizer并不是非常熟悉，但从我找到的资料来看，似乎这个方法可以起作用：

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

另外，我发现这个其他的SO问题似乎更详细地扩展了它： 重复？

- Curtis S