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) 安全 url 旁路过滤器 '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>