Angular - DomSanitizer security bypass - innerHTML styling Weird reloading effect

Question

I have an application where users are able to write documents. The content is delivered as html and may have "unsave content" in it. For example iframes with youtube videos.

I am outputting like this

<div [innerHtml]="getDocumentContentTrusted()"></div>

Components method

getMainContentTrusted(){
    return this.domSanitizer.bypassSecurityTrustHtml(this.documentContent);
}

It kind of works. Everything is displayed correctly but as soon as for example a youtube-iframe is part of the documentContent i have a sideeffect. On any click anywhere in the application the documentContent seems to be reloaded.

Any hints on how to avoid this?

Answer 1

for iframes we use bypassSecurityTrustResourceUrl not bypassSecurityTrustHtml. in this case i think you need both.

try using these two filter in you case

1) safe url bypass filter 'safeUrl'

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

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

2) safe html bypass filter 'safeHtml'

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

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

hope it will work

<div [innerHtml]="documentContent | safeHtml | safeUrl"></div>