时间戳

首页 > 解决方案 > Angular html模板作为带有样式属性的字符串呈现没有样式属性

javascript - Angular html模板作为带有样式属性的字符串呈现没有样式属性

问题描述

我有一个 Util.ts 定义格式函数，如下所示。问题出在具有样式属性的小标签上。

export const formatMessage = (message ) =>{
    return '<b>' + message.name+" </b><small style ='color:black;'>" +message.ts + '</small>  ' + message.c;
  }

然而，当渲染小标签的样式属性被删除。

在此处输入图像描述

我不确定为什么会出现这种行为，formatMessage 函数返回的 HTML 字符串模板使用 DIV 的 innerHTML 附加到 HTML，如下所示。

<ul style="list-style-type: none;">
  <li  *ngFor="let each of messages"><div class='messageStyle' [innerHTML]="each"> </div></li>
</ul>

为什么这个样式属性会被删除（而类属性仍然存在），我该如何解决这个问题？

标签： javascripthtmlcssangulartypescript

解决方案

dom sanitizer 会从您的 html 中删除样式。这样做是为了防止 xss 攻击。您可以通过以下方式绕过安全检查：

  constructor(private s: DomSanitizer) { }
...
  export const formatMessage = (message, sanitizer ) =>{
    return sanitizer.bypassSecurityTrustHtml('<b>' + message.name+" </b><small style ='color:black;'>" +message.ts + '</small>  ' + message.c);
  }

并将 sanitizer 传递给 formatMessage

推荐阅读