bypasssecuritytrust from DomSanitizer not working (Angular 2)

Question

My problem is the following, I get as a response from a service an entire HTML page that I should display back t the user. Now this is an issue for Angular since it thinks I might be a victim of cross site scripting if I do that. The source I get the HTML from is trusted so I wanted to white list it or bypass the sanitizer in some way and render the view to the user.

The problem I ran into is that the file I get also contains 'style' and 'script' tags for manipulating the dom, and no matter how I place the bypass function calls something gets caught and the entire thing doesn't render properly. Is there any way I could maybe separate the HTML file clear it and then put it back together or something else?

Answer 1

Try this:

import { DomSanitizer } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer) { }

//where you want to use the unsafe html
const sanitizedHtml = this.sanitizer.bypassSecurityTrustResourceUrl(html);

Answer 2

What you can do, but goes against the Angular principle, is to append the html markup to the innerhtml of your component or the DOM using ElementRef from @angular/core.

Sample appcomponent:

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: ``,
})
export class AppComponent  {
  private htmlTemplate = `
    <div>Loading template</div>
    <script type="text/javascript">
      console.log('loaded');
    </script>
  `;
  constructor(private elementRef: ElementRef) { }

  ngAfterViewInit() {
    let elem: Element = this.elementRef.nativeElement;

    elem.innerHTML = this.htmlTemplate;
  }
}