angular 2 bypassSecurity

Question

I have a JSON file with data. In each object I've got a field the "description" with HTML tags, style, and text like this:

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

I want to show this styled data on hover The problem is that Title ([attr.title] or Title, or [title]) doesn't show div's styles and browser recommends me to visit this link http://g.co/ng/security#xss

I'm using Pipe with DomSanitizer:

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

This is how I get data:

1) I get JSON

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

2) make it visible on web page

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

3) Html, where i want to show styled "Title" on Hover

<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] works fine, but Title don't... How to make it work with data from JSON file?

Here is screenshot with the error: https://yadi.sk/i/uieFFCfa3BMq4v

Are you running your app in a webserver? or are you using simple file based approach? have a look at [this](http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome) — Ken, Jan 26 '17 at 10:54
@Ken It doesn't matter, it's a angular2 sanitizer, he must use method `bypassSecurityTrustHtml` of `DomSanitizer` class. — Kacper Polak, Jan 26 '17 at 10:57

score 0 · Accepted Answer · answered Jan 26 '17 at 10:52

0

Add this Pipe to your component.

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);
  }
}

Then you can use Pipe on your element in loop. For example:

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

answered Jan 26 '17 at 10:52

Kacper Polak

1,351
12
24

It works with table, all data with tags shows correct! Thank you! But for some reasons it doesnt work with tag "titile" with bootstrap tooltip: ` {{ item.name }} ` And it show like this with tags https://yadi.sk/i/uieFFCfa3BMq4v – George Madiarov Jan 28 '17 at 04:03
@GeorgeMadiarov please try to use `[attr.title]` or title without brackets `title="{{item.description|safeHtml}}"` – Kacper Polak Jan 28 '17 at 16:08
same problem: [attr.title]="item.description|safeHtml" title="{{item.description|safeHtml}}" and many different vatiation edit: rewrite main post – George Madiarov Jan 29 '17 at 00:57

angular 2 bypassSecurity

1 Answers1