Angular, DomSanitizer, bypassSecurity script

Question

I'm playing with bypassSecurityTrust* functions of Angular. Goal is to get a script tag to execute on the page. But it either keeps sanitizing with the message

WARNING: sanitizing HTML stripped some content

or I see in the console a

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

Goal is to get this working.

What I currently use and tried:

@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() {
  }
}

and the template html:

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

I tried both sanitize with SecurityContext.NONE which should work looking at the code and bypassSecurityTrustHtml(value). The above code was inspired by this answer.

Any ideas on how to execute that JavaScript?

I don't think the sanitizer is the thing that is stopping this from working. It's the regular HTML spec that says ``s added in innerHTML won't be executed. See :[Can scripts be inserted with innerHTML?](https://stackoverflow.com/q/1197575/691711) and my answer to this question: [Why doesn't a browser run a — zero298, Apr 19 '18 at 14:17
`
{{ html | safeHtml }}
` doesn't work either. Again the changingThisBreaksApplicationSecurity message. — user857990, Apr 24 '18 at 08:29

user857990 · Accepted Answer · 2018-05-23T11:54:24.523

So yes, innerHtml can't insert script tags, but it doesn't stop it from one of the many other ways to inject JavaScript.

Working example:

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>');
  }
}

What doesn't work is

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

or using

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

Not sure why. Should behave the same afaiu.

Angular, DomSanitizer, bypassSecurity script

1 Answers1