Question

我们希望使用已清理的[innerHtml]，但应绕过属性data-tab。

示例：http://plnkr.co/edit/dBsWKbfa5MYJmtxLgqzO?p=preview

为什么data-tab被认为不安全？
如何绕过？

从plunkr示例中提取代码：

@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 :-)'
  }

}

（我们已经开发了一个我们在项目中使用的表组件。该表可以在详细面板中提供附加信息，允许（清理）HTML。客户现在需要此详细信息面板中的选项卡。我们是使用需要属性data-tab的语义UI。有关语义UI标签的更多信息，请参阅http://semantic-ui.com/modules/tab.html#/examples。）

如何使用DomSanitizer绕过Angular 2中的单个属性？

0 个答案: