角度 2 旁路安全

Question

我有一个包含数据的JSON文件。在每个对象中，我都有一个带有HTML标签，样式和文本的"描述"字段，如下所示：

<div>__localname__</div>
 <div style="color: #555; margin-top:2px; margin-left:10px;"><div style="display:inline; color:#d34319 ">[DV]</div> Проверка домена (выдача от 5 минут)</div>
 <div style="color: #555; margin-top:2px; margin-left:10px;">Защищает домен с www и без www (указывайте при заказе домен с www, например www.domain.ru)</div>
 <div style="color: #555; margin-top:2px; margin-left:10px;">Гарантия 10000$</div>

我想在悬停时显示此样式数据问题是标题（[attr.title]或标题，或[title]）不显示div的样式，浏览器建议我访问此链接 http://g.co/ng/security#xss

我正在使用带有DomSanitizer的管道：

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value: any) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

这是我获取数据的方式：

1） 我得到 JSON

getPriceList() {
    return this.httpGet('./ssl.json');
  }

2）使其在网页上可见

ngOnInit() {
    this.appService.getPriceList().subscribe(data => {
      this.pricelist = data.pricelist;
    });
  }

3）Html，我想在悬停时显示样式的"标题"

<tbody>
      <tr *ngFor="let item of pricelist">
        <td>
          <a data-toggle="tooltip" data-html="true" 
          title="{{item.description|safeHtml}}">
              {{ item.name }}
          </a>
        </td>
        <td> от {{ item.price.period[0].cost }} {{ item.price.currency }}</td>
        <td> <div [innerHTML]='item.description | safeHtml'></div> </td>
      </tr>
    </tbody>

[innerHTML] 工作正常，但标题不...如何使其与JSON文件中的数据一起使用？

这是带有错误的屏幕截图：https://yadi.sk/i/uieFFCfa3BMq4v

Answer 1

将此

Pipe添加到组件中。

import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

然后，您可以在循环中使用元素上的Pipe。例如：

<div *ngFor="let price of pricelist">
    {{ price.description | safeHtml }}
</div>