Angular - Создание ссылки HTML для элемента без удаления XSS

Question

У меня есть таблица, которая генерируется из объекта в моем приложении. Эта таблица перебирает данные и выводит их в html.

Я пытаюсь передать HTML-ссылку на таблицу, по которой нужно щелкнуть, но она теряет угол?

 output[i] = {
   'Rule Number': rn,
   'Outcome': this.parentRuleData[i].Value,
   'Impacted Users': '<a style="cursor:pointer;" (click)="viewImpactedUsers('+this.parentRuleData[i].RuleParentID+')">'+Number(iu)+'</a>'
}

HTML:

<tr *ngFor="let item of gridView | filter: filterStringGrid">
   <td *ngFor="let key of item | keys" [innerHTML]="item[key]"></td>
</tr>

Ошибка: ВНИМАНИЕ: дезинфекция HTML лишает некоторого содержимого (см. http://g.co/ng/security#xss).

Как еще можно сгенерировать эту ссылку с событием, поскольку на самом деле это не ссылка на маршрутизатор, которая бы куда-либо направлялась.

Answer 1

Вы должны сообщить Angular, что ваш HTML безопасен. В вашем случае я бы предложил создать канал, который возвращает объект SafeHtml. Для этого в канале введите DomSanitizer an, затем вызовите bypassSecurityTrustHtml(html):

return domSanitizer.bypassSecurityTrustHtml(html);

С такой трубкой вы могли бы сделать это, предполагая, что назвали ее SafePipe:

[innerHTML]="item[key]|safe"

Конечно, вы также можете добавить метод в свой компонент, который делает то же самое, но он менее пригоден для повторного использования:

public sanitize(html: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(html);
}

А потом,

[innerHTML]="santize(item[key])"

Конечно, делайте это, только если вы абсолютно уверены, что ваш HTML-код безопасен.