From e8184773acb247700f9b6233fedc6d39c4fd283e Mon Sep 17 00:00:00 2001
From: Maxi <ralfrabbit@gmail.com>
Date: Thu, 21 Nov 2024 09:43:48 +0100
Subject: [PATCH] fix: do not bind content as `innerHTML` by default (#126)

BREAKING CHANGE:
Previously, cell values were bound using `innerHTML`.
With this change they are now bound using normal data binding.
This means that any html markup will no longer be rendered.
To restore the previous behavior set `bindAsUnsafeHtml`
on columns where needed.

We decided to change this behavior,
as binding `innerHTML` can lead to HTML injection.
Especially in table content which are often untrusted
user generated content.

BREAKING CHANGE:
Header cell names are now bound using data binding
instead of `innerHTML`.
Use a `headerTemplate` to provide custom html markup.
---
 .../src/lib/components/body/body-cell.component.ts        | 6 +++++-
 .../src/lib/components/columns/column.directive.ts        | 1 +
 .../src/lib/components/header/header-cell.component.ts    | 3 ++-
 projects/ngx-datatable/src/lib/types/table-column.type.ts | 8 ++++++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts
index ecc48a985..fe7cfb605 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts
@@ -76,7 +76,11 @@ import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
         }
 
         @if (!column.cellTemplate) {
-          <span [title]="sanitizedValue" [innerHTML]="value"> </span>
+          @if (column.bindAsUnsafeHtml) {
+            <span [title]="sanitizedValue" [innerHTML]="value"> </span>
+          } @else {
+            <span [title]="sanitizedValue">{{ value }}</span>
+          }
         } @else {
           <ng-template
             #cellTemplate
diff --git a/projects/ngx-datatable/src/lib/components/columns/column.directive.ts b/projects/ngx-datatable/src/lib/components/columns/column.directive.ts
index 5deb17dcd..193e7cce1 100644
--- a/projects/ngx-datatable/src/lib/components/columns/column.directive.ts
+++ b/projects/ngx-datatable/src/lib/components/columns/column.directive.ts
@@ -25,6 +25,7 @@ export class DataTableColumnDirective<TRow> implements TableColumn, OnChanges {
   private columnChangesService = inject(ColumnChangesService);
   @Input() name: string;
   @Input() prop: TableColumnProp;
+  @Input({ transform: booleanAttribute }) bindAsUnsafeHtml?: boolean;
   @Input({ transform: booleanAttribute }) frozenLeft: boolean;
   @Input({ transform: booleanAttribute }) frozenRight: boolean;
   @Input({ transform: numberAttribute }) flexGrow: number;
diff --git a/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts b/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts
index ad534bf39..9be783394 100644
--- a/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts
+++ b/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts
@@ -47,7 +47,8 @@ import { NgTemplateOutlet } from '@angular/common';
         </ng-template>
       } @else {
         <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label draggable" (click)="onSort()" [innerHTML]="name">
+          <span class="datatable-header-cell-label draggable" (click)="onSort()">
+            {{ name }}
           </span>
         </span>
       }
diff --git a/projects/ngx-datatable/src/lib/types/table-column.type.ts b/projects/ngx-datatable/src/lib/types/table-column.type.ts
index a8d1505a9..c4d636a64 100644
--- a/projects/ngx-datatable/src/lib/types/table-column.type.ts
+++ b/projects/ngx-datatable/src/lib/types/table-column.type.ts
@@ -119,6 +119,14 @@ export interface TableColumn<TRow = any> {
    */
   prop?: TableColumnProp;
 
+  /**
+   * By default, the property is bound using normal data binding `<span>{{content}}</span>`.
+   * If this property is set to true, the property will be bound as `<span [innerHTML]="content" />`.
+   *
+   * **DANGER** If enabling this feature, make sure the source of the data is trusted. This can be a vector for HTML injection attacks.
+   */
+  bindAsUnsafeHtml?: boolean;
+
   /**
    * Cell template ref
    */