Angular, DomSanitizer, сценарий bypassSecurity

Question

Я играю с bypassSecurityTrust* функции Angular. Цель состоит в том, чтобы получить 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 который должен работать, глядя на код и bypassSecurityTrustHtml(value), Приведенный выше код был вдохновлен этим ответом.

Любые идеи о том, как выполнить этот JavaScript?

Answer 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>

Не уверен почему. Должен вести себя так же.