Angular、DomSanitizer、bypassSecurity 脚本答案

【问题标题】：Angular, DomSanitizer, bypassSecurity scriptAngular、DomSanitizer、bypassSecurity 脚本
【发布时间】：2018-09-30 02:01:21
【问题描述】：

我正在使用 Angular 的 bypassSecurityTrust* 函数。目标是让script 标记在页面上执行。但它要么继续使用消息进行消毒

WARNING: sanitizing HTML stripped some content

或者我在控制台中看到了一个

SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<script>alert(1)</script>.

目标是让它发挥作用。

我目前使用和尝试过的：

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value: string): string {
    console.log(this.sanitized.sanitize(SecurityContext.NONE, value))
    return this.sanitized.sanitize(SecurityContext.NONE, value);
  }
}
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  name: string;
  html: string;
  constructor(private sanitizer: DomSanitizer) {
    this.name = 'Angular2';
    this.html = "<script> alert(8) </script>";
  }
  ngOnInit() {
  }
}

和模板html：

<div [innerHtml]="html | safeHtml"></div>

我尝试了sanitize 和SecurityContext.NONE，这应该可以查看code 和bypassSecurityTrustHtml(value)。上面的代码是受answer启发的。

关于如何执行该 JavaScript 的任何想法？

【问题讨论】：

我不认为消毒剂是阻止它工作的东西。这是常规的 HTML 规范，说在 innerHTML 中添加的<scripts>s 不会被执行。请参阅：Can scripts be inserted with innerHTML? 和我对这个问题的回答：Why doesn't a browser run a <script> in an HTML fragment retrieved via fetch API?。
那我怎么把字符串放到页面上呢？
<div id="attack8"> {{ html | safeHtml }} </div> 也不起作用。再次更改ThisBreaksApplicationSecurity 消息。

标签： javascript html angular angular-dom-sanitizer

【解决方案1】：

所以是的，innerHtml 不能插入脚本标签，但它不会阻止它使用许多其他注入 JavaScript 的方法之一。

工作示例：

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

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value: string) {
    console.log(this.sanitized.bypassSecurityTrustHtml(value));
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

@Component({
  selector: 'app-demo',
  template: `
    <div [innerHtml]="html | safeHtml">
    </div>
  `
})

export class DemoComponent {

  html: string;
  h_html: string;
  constructor(private sanitizer: DomSanitizer) {
    this.html = "<svg onload=\"alert(1)\"> blah </svg>"
    this.h_html = sanitizer.sanitize(SecurityContext.HTML, "<svg onload=\"alert(2)\"> blah </svg>');
  }
}

没用的是

return this.sanitized.sanitize(SecurityContext.HTML, value);

或使用

<div [innerHtml]="h_tmpl"></div>

不知道为什么。应该表现得一样。

【讨论】：