html – 带有超链接的Angular 5 DomSanitizer

2023年1月19日 540次阅读

我正在使用WYSIWYG编辑器(CKEditor)并尝试使用Angular 5呈现内容.

我想弄清楚的是在Angular 5中使用DomSanitizer的正确方法.我面临的问题是超链接在生成的清理HTML中不起作用(不是“可点击的”).

我使用以下Typescript代码返回safeHtml内容：

 public getSafeContent(): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(this.page.content);
}

并以这种方式在我的模板中使用它：

<div [innerHTML]="getSafeContent()"></div>

这将呈现包含所有内联样式的HTML,但超链接将不起作用.

我尝试这样做：

public getSafeContent(): SafeHtml {
    return this.sanitizer.sanitize(SecurityContext.HTML, this.page.content);
}

这导致超链接实际工作,但内联样式不是.

有没有办法让样式和超链接与清理内容一起使用？

更新

这就是Chrome开发工具中页面的样子：

<div _ngcontent-c22="" class="row">
   <div _ngcontent-c22="" class="col-lg-12">

        <div _ngcontent-c22="">
            <p><a href="http://www.google.com">google</a></p>
        </div>
    </div>
</div>

并且谷歌链接不可点击.

最佳答案 bypassSecurityTrustHtml允许< script>内容中的标签.对于URL,您需要bypassSecurityTrustUrl.见：
https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustUrl.

我从来没有尝试过堆叠bypassXXX方法,所以我不知道你是否可以做这样的事情bypassSecurityTrustUrl(bypassSecurityTrustHtml(myContent))但我猜可能不会因为每个方法都需要一个字符串但返回一个对象(类型为SafeHtml) / SafeUrl),因此它不能用作需要字符串的堆栈函数调用的输入.

因此,您可能需要解析内容,将每个URL传递到bypassSecurityTrustUrl,然后再将所有内容重新组合在一起.

更新

我只是看了一下消毒方法.我没试过这个,但是这样的事可能有用：

this.sanitizer.sanitize(SecurityContext.HTML, this.sanitizer.bypassSecurityTrustUrl(myContent));

因为sanitize可以将SafeValue作为输入.内部bypassSecurityTrustUrl清理URL并返回一个SafeUrl,它由外部清理打开并用作输入以使其安全.就像我说的,我没有尝试过,但理论上它看起来不错……

点赞