Why doesn't Angular innerHTML output the code in the frame and not all the markup elements?

Question

Why doesn't Angular innerHTML output the code in the frame and not all the markup elements?

I put this code where the value contains the text of the entire page with frames, videos, photos, text. Only the text with styles is displayed, and the links to YouTube are in the frame and "flew" somewhere.

 <div [innerHTML]="store.selectedPost['content']['rendered']"></div>

Is it something to do with security? How do I make everything display "as it is in the code"?

1

javascript angular angular2

Author: Rakzin Roman, 2021-01-28

Source

1 answers

score 2 · Answer 1

As I can assume angular cuts out potentially unsafe code, in order to display the data, they must first be sanitized, I suggest doing this via pipe, pipe code:

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private dom: DomSanitizer) {}

  public transform(value: string): string{
    return this.dom.bypassSecurityTrustHtml(value);
  }
}

And already in the code to use this way:

 <div [innerHTML]="store.selectedPost['content']['rendered'] | safeHtml"></div>