Angular - DomSanitizer security bypass - innerHTML style Weird reloading effect
I have an application where users can write documents. The content is supplied as html and may contain "unsaved content". For example an iframe with a youtube video .
I output like this
<div [innerHtml]="getDocumentContentTrusted()"></div>
Component method
getMainContentTrusted(){
return this.domSanitizer.bypassSecurityTrustHtml(this.documentContent);
}
It kind of works. Everything displays correctly, but once, for example, the youtube-iframe is part of the documentContent, I have a sideeffect . Anytime you click anywhere in the app, the documentContent seems to reload .
Any hints on how to avoid this?
+3
source to share
1 answer
for the iframe we are using bypassSecurityTrustResourceUrl, not bypassSecurityTrustHtml. in this case i think you need both.
try using these two filters in your 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 works
<div [innerHtml]="documentContent | safeHtml | safeUrl"></div>
+4
source to share