Angular使用带有转义元素属性的innerHTML

发布时间：2020-12-17 17:10:27 所属栏目：安全来源：网络整理

导读：嗨我从这样的休息服务器有一个html respose： h3Center Align/h3np style="text-align: center;"This is a paragraph. It is center aligned. Center is,but nature,a fence sitter. A flip flopper. It has a difficult time making up its mind. It wan

嗨我从这样的休息服务器有一个html respose：

<h3>Center Align</h3>n<p style="text-align: center;">This is a paragraph. It is center aligned. Center is,but nature,a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really,it does. It has the best intentions,but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes.</p>

当我使用innerHTML时,渲染为：

<h3>Center Align</h3>
<p>
This is a paragraph. It is center aligned. Center is,but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes.
</p>

缺少< p>的转义属性标签所以我有一个空的< p>而不是< p style =“text-align：center;”>

有没有办法使用其属性呈现此内容？

解决方法

使用 DomSanitizer处理您的HTML.默认情况下这是不安全的.

constructor(private s: DomSanitizer) {
  this.text = 'my HTML';
  this.text = s.bypassSecurityTrustHtml(this.text);
}

见plunk.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!