带有超链接的Angular 5 DomSanitizer [英] Angular 5 DomSanitizer with Hyperlinks

问题描述

我正在使用WYSIWYG编辑器（CKEditor），并尝试使用Angular 5呈现内容。

我要弄清楚的是正确的使用方法Angular 5中的DomSanitizer。我面临的问题是，在经过最终处理的HTML中，超链接不起作用（不是可单击的）。

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

  public getSafeContent（）：SafeHtml {
返回this.sanitizer.bypassSecurityTrustHtml（this.page.content）; 
} 
  

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

 < div [innerHTML] = getSafeContent（）>< / div> 
  

这将使所有内联样式的HTML保持完整，但超链接将不起作用。

我尝试执行此操作：

  public getSafeContent（）： SafeHtml {
返回this.sanitizer.sanitize（SecurityContext.HTML，this.page.content）; 
} 
  

这实际上导致超链接有效，但是内联样式却无效。 p>

是否可以同时获取样式和超链接以使用经过清理的内容？

更新

这是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> 
  

，并且Google链接不可点击。

解决方案

bypassSecurityTrustHtml 允许< script> 标记。对于URL，您需要 bypassSecurityTrustUrl 。看到这里： https://angular.io/api/platform-b​​rowser/DomSanitizer#bypassSecurityTrustUrl 。

我从未尝试过堆叠 bypassXXX 方法，所以我不知道是否您可以执行以下操作： bypassSecurityTrustUrl（bypassSecurityTrustHtml（myContent）），但我猜可能不是，因为每个方法都使用字符串但返回对象（类型为 SafeHtml / SafeUrl ），因此它不能用作需要一个字符串的堆栈函数调用的输入。

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

更新

我只是看了清理方法。我还没有尝试过，但是类似的东西可能有用：

  this.sanitizer.sanitize（SecurityContext.HTML，this。 sanitizer.bypassSecurityTrustUrl（myContent））; 
  

因为消毒可以使用 SafeValue 作为输入。内部的 bypassSecurityTrustUrl 对URL进行清理，并返回 SafeUrl ，由外部的清理包装并用作输入内容。 HTML安全。就像我说的，我还没有尝试过，但是理论上看起来还不错……

I am using a WYSIWYG editor (CKEditor) and trying to render the content with Angular 5.

What I am trying to figure out is the proper way to use DomSanitizer in Angular 5. The problem I am facing is that Hyperlinks are not working (are not "clickable") in the resulting sanitized HTML.

I am using the following Typescript code to return a safeHtml content:

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

and using it in my template this way:

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

This will render the HTML with all inline styles intact, but hyperlinks won't work.

I tried doing this instead:

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

Which results in that Hyperlinks actually works, but inlines styles are not.

Is there a way to get both styles and hyperlinks to work with sanitized content?

Update

This is what the page looks like in Chrome dev tools:

<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>

and the google link is not clickable.

解决方案

bypassSecurityTrustHtml allows <script> tags in the content. For URLs you need bypassSecurityTrustUrl. See here: https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustUrl.

I've never tried stacking the bypassXXX methods, so I don't know if you can do something like this bypassSecurityTrustUrl(bypassSecurityTrustHtml(myContent)) but I would guess probably not since each method takes a string but returns an object (of type SafeHtml/SafeUrl), so it can't be used as the input to the stacked function call which expects a string.

So, you may need to parse the contents, pass each URL into the bypassSecurityTrustUrl and then combine everything back together again.

Update

I just looked at the sanitize method. I haven't tried this, but something like this might work:

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

since sanitize can take a SafeValue as an input. The inner bypassSecurityTrustUrl sanitizes the URLs and returns a SafeUrl, which is unwrapped by the outer sanitize and used as input to make it HTML safe. Like I said, I haven't tried it, but it looks good in theory...

这篇关于带有超链接的Angular 5 DomSanitizer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！