Angular4 绑定html内容警告处理

最新推荐文章于 2024-04-09 23:53:55 发布

原创最新推荐文章于 2024-04-09 23:53:55 发布 · 1w 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angula4 #sanitizing

收录于

angular4 同时被 2 个专栏收录

11 篇文章

订阅专栏

bing-html

1 篇文章

订阅专栏

本文介绍如何在Angular应用中安全地绑定HTML内容，避免XSS攻击风险。通过使用Angular提供的DomSanitizer服务及bypassSecurityTrustHtml方法，可以确保HTML内容的安全呈现。

绑定html内容

如果用正常的方法去绑定的话，可能会出再这种警告

<div [innerHTML]="Catcha" ></div>
---------------------------------------  
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

而且页面上也显示不出东西来。

在网上找了一些，说要写指令对其进行转，好麻烦，从官网也找到一个种办法。
bypassSecurityTrustHtml 用这个来进行安装转换。

在返回的结果对内容，或内容字段进行转换，当然要使用 bypassSecurityTrustHtml 的话，还是要依赖注入 DomSanitizer 服务，

import { DomSanitizer } from '@angular/platform-browser';

export class myPage1{
  constructor(private sanitizer: DomSanitizer) {
  }

  onInit():void{
      this.Catcha = this.sanitizer.bypassSecurityTrustHtml('要进行转换的内容');
      // 这里比如返回的一个html内容，或是其它如一张 svg 的图等，用上面代码转一下就可以了，就不会那那个错误了。
  }
}