Angular-DomSanitizer安全绕过-innerHTML样式奇怪的重新加载效果

Question

我有一个用户可以编写文档的应用程序。内容以html格式交付，并且其中可能包含“未保存的内容”。例如，带有youtube视频的iframe。

我这样输出

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

成分法

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

这样的作品。一切都可以正确显示，但是例如youtube-iframe就是documentContent的一部分，那么我就有副作用。在应用程序中任何位置的任何单击上，documentContent似乎都将重新加载。

关于如何避免这种情况的任何提示？

Answer 1

对于iframe，我们使用bypassSecurityTrustResourceUrl，而不使用bypassSecurityTrustHtml。在这种情况下，我认为你们都需要。

尝试在您的情况下使用这两个过滤器

1）安全网址绕过过滤器“ 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）安全的HTML绕过过滤器'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);
    }
}

希望它能工作

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