Question

我有一个应用程序，用户可以在其中编写文档。内容以 html 的形式发布，可能包含＆＃34;未保存的内容＆＃34;在里面。例如 iframe与youtube视频。

我输出的是这样的

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

组件方法

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

它有点工作。一切都正确显示但是例如youtube-iframe是documentContent的一部分我有一个 sideeffect 。在应用程序中的任何位置单击时， documentContent似乎都会重新加载。

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

Answer 1

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

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

1）安全网址绕过过滤器＆＃39; safeUrl＆＃39;

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绕过过滤器＆＃39; safeHtml＆＃39;

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>

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

1 个答案: