Recursive Angular 2 HTML Binding

Question

Here's my problem, I want to include a button inside an HTML template, that links to an external website. But, when HTML is read, Google Chrome says :

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

It seems that the Angular 2's innerHTML attribute doesn't allow 2 recursive HTML bindings.

Here's my code :

<ion-col width-80 innerHtml="{{ slide.content + '<p><button round full (click)=`' 
+ slide.button.url +'`>'+slide.button.text+'</button>' }}"></ion-col>

The (click) attribute is deleted, and only (slide.button.text) is displayed as single text.

Any solution ?

slide is like this :

{
    img: 'img/picture.png',
    content: `sometext`,
    button : {
        url: `http://www.foo.com`,
        text: `Site foo`
    }
}

See http://stackoverflow.com/questions/34467000/sanitize-input-in-angular2 — Günter Zöchbauer, Aug 09 '16 at 14:40
I'm reading the comments, and it seems that it didn't fix my problem... — Thomas Dussaut, Aug 09 '16 at 14:44
" seems that it didn't fix my problem" is hardly actionable ;-) What did you try? How did it not work? The message you get is from https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizationService-class.html You need to tell Angular2 that you're sure the content is safe. — Günter Zöchbauer, Aug 09 '16 at 14:50
I tried to include the pipe that PierreDuc wrote, but the return type of `this._sanitizer.bypassSecurityTrustHtml` is SafeHtml. And I don't know this object ^^ Check [here](https://angular.io/docs/ts/latest/api/platform-browser/index/SafeHtml-interface.html) for the doc of SafeHtml — Thomas Dussaut, Aug 09 '16 at 14:58
Why do you need to know this object? Just pass it to `[innerHTML]="..."´ — Günter Zöchbauer, Aug 09 '16 at 15:00
That's what I have done ^^' And Chrome says that he can't find `sanitizeHtml` — Thomas Dussaut, Aug 09 '16 at 15:03
The `(click)="..."` will be ignored by Angular and won't fire on click events. — Günter Zöchbauer, Aug 09 '16 at 15:03
Then you didn't add the pipe to `pipes: [SanitizeHtml]` of the `@Component()` decorator where you're using it. — Günter Zöchbauer, Aug 09 '16 at 15:04
Indeed. I forgot the pipes. But my `(click)="..."` is still ignored :/ It appears in my html code, but it doesn't look like a button anymore : — Thomas Dussaut, Aug 09 '16 at 15:11
As mentioned above adding `(click)="..."` or other Angular2 syntax using `[innerHTML]="..."` is pointless. Angular doesn't look at HTML added this way except sanitization (for security purposes). — Günter Zöchbauer, Aug 09 '16 at 15:12
So there is no way to do this ? Must I change my code structure ? — Thomas Dussaut, Aug 09 '16 at 15:16
If you want to add dynamic content you can add components like demonstrated in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 — Günter Zöchbauer, Aug 09 '16 at 15:17
I use this : `goPage(page : string){ window.location.href=page; }`. i forgot to paste it — Thomas Dussaut, Aug 10 '16 at 06:58
I diverted the problem by adding an extra `div` tag in my HTML. — Thomas Dussaut, Aug 10 '16 at 07:56

score 2 · Accepted Answer · answered Aug 09 '16 at 15:21

NOTE: I don't know ion thing so changed it to HTML control. changed button to a (link) control.

You can use DomSanitizationService as shown below,

working demo : http://plnkr.co/edit/y2BXvIO8egNxJPmM3j43?p=preview

//our root app component
import {Component, Pipe} from '@angular/core'
import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  selector: 'my-app',

  template: `
    <span [innerHTML]="myHTML"></span>
  `,
})

export class AppComponent {
  slide={
    img: 'img/picture.png',
    content: `sometext`,
    button : {
        url: `http://www.foo.com`,
        text: `Site foo`
    }
  };

  dangerousUrl='<p><a href='+`${this.slide.button.url}`+'>'+`${this.slide.button.text}`+'</a></p>';

  constructor(sanitizer: DomSanitizationService) {
       this.myHTML= sanitizer.bypassSecurityTrustHtml(this.dangerousUrl);
  }
}

Recursive Angular 2 HTML Binding

1 Answers1