html - 带有超链接的 Angular 5 DomSanitizer

Question

我正在使用所见即所得编辑器 (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>

并且谷歌链接不可点击。

Answer 1

bypassSecurityTrustHtml允许 <script>内容中的标签。对于 URL，您需要 bypassSecurityTrustUrl .看这里:https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustUrl .

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

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

更新

我刚刚看了 sanitize 方法。我没试过这个，但这样的事情可能会奏效:

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

自 sanitize可以拍SafeValue作为输入。内层bypassSecurityTrustUrl清理 URL 并返回 SafeUrl ，它被外部 sanitize 解包并用作输入以使其 HTML 安全。就像我说的，我还没有尝试过，但理论上看起来不错......