2

We would like to use [innerHtml] which is sanitized but the attribute data-tab should be bypassed.

Example: http://plnkr.co/edit/dBsWKbfa5MYJmtxLgqzO?p=preview

  • Why is data-tab considered to be unsafe?
  • How to bypass?

Extracted code from plunkr example:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div [innerHtml]="html"></div>
    </div>
  `,
})
export class App {

  name: string;

  // why is data-tab considered to be unsafe ?
  // how to bypass?
  html: string = `
    <div data-tab="first">
      More HTML, possible unsafe html
    </div>
  `;

  constructor() {
    this.name = 'World :-)'
  }

}

(We've developed a table component which we're using in our project. This table may provide additional information in a detail panel which allows (sanitized) HTML. A customer requires now tabs within this detail panel. We're using Semantic UI which requires the attribute data-tab. Further information to Semantic UI tabs see http://semantic-ui.com/modules/tab.html#/examples.)

Thomas
  • 8,357
  • 15
  • 45
  • 81
  • 1
    The sanitizer probably strips out all known-to-be-possibly-dangerous attributes and all unknown ones. Also the second link in the list you provided tells you how to bypass it. :) – Maximilian Riegler Oct 21 '16 at 11:22
  • 1
    Thanks. The main disadvantage of using `bypassSecurityTrustHtml` (second link) and therefore - for us - unfortunately not useful is that the complete HTML will be bypassed. However, other parts of the HTML may be unsafe. ;) Bypassing the complete HTML won't be an option. Actually, I'm looking for an approach to bypass just an attribute (or a part of the HTML). – Thomas Oct 21 '16 at 21:24

0 Answers0