DataGrid: replace html data with string for security (#32492)

anna-shakhova · web-flow · commit f7cd5c0aa8fc · 2026-02-10T15:19:28.000+01:00
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.css
@@ -21,6 +21,7 @@
   font-size: 14px;
   margin-top: 0;
   margin-bottom: 0;
+  white-space: pre-line;
 }
 
 .progress {
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.html
@@ -26,7 +26,7 @@
 <div class="task-info">
   <div class="info">
     <div id="taskSubject">{{ taskSubject }}</div>
-    <p id="taskDetails" [innerHtml]="taskDetailsHtml"></p>
+    <p id="taskDetails">{{ taskDetails }}</p>
   </div>
   <div class="progress">
     <span id="taskStatus">{{ taskStatus }}</span>
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.ts b/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.ts
@@ -1,5 +1,4 @@
-import { bootstrapApplication,
-  DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 
 import { DxNumberBoxComponent, DxNumberBoxModule, DxCheckBoxModule } from 'devextreme-angular';
@@ -37,7 +36,7 @@ export class AppComponent {
 
   taskSubject: string;
 
-  taskDetailsHtml: SafeHtml;
+  taskDetails: string;
 
   taskStatus: string;
 
@@ -72,7 +71,7 @@ export class AppComponent {
     },
   ];
 
-  constructor(private sanitizer: DomSanitizer, service: Service) {
+  constructor(service: Service) {
     this.dataSource = new DataSource({
       store: new ArrayStore({
         data: service.getTasks(),
@@ -103,7 +102,7 @@ export class AppComponent {
   onFocusedRowChanged(e: DxDataGridTypes.FocusedRowChangedEvent<Task, number>) {
     const data = e.row?.data;
     this.taskSubject = data?.Task_Subject ?? '';
-    this.taskDetailsHtml = this.sanitizer.bypassSecurityTrustHtml(data?.Task_Description ?? '');
+    this.taskDetails = data?.Task_Description ?? '';
     this.taskStatus = data?.Task_Status ?? '';
     this.taskProgress = data?.Task_Completion ? `${data?.Task_Completion}%` : '';
   }
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.service.ts b/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.service.ts
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/React/App.tsx b/apps/demos/Demos/DataGrid/FocusedRow/React/App.tsx
@@ -102,7 +102,7 @@ const App = () => {
       <div className="task-info">
         <div className="info">
           <div id="taskSubject">{taskSubject}</div>
-          <p id="taskDetails" dangerouslySetInnerHTML={{ __html: taskDetails }}></p>
+          <p id="taskDetails">{taskDetails}</p>
         </div>
         <div className="progress">
           <span id="taskStatus">{taskStatus}</span>
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/React/data.ts b/apps/demos/Demos/DataGrid/FocusedRow/React/data.ts
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/React/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/React/styles.css
@@ -21,6 +21,7 @@
   font-size: 14px;
   margin-top: 0;
   margin-bottom: 0;
+  white-space: pre-line;
 }
 
 .progress {
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/App.js b/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/App.js
@@ -97,10 +97,7 @@ const App = () => {
       <div className="task-info">
         <div className="info">
           <div id="taskSubject">{taskSubject}</div>
-          <p
-            id="taskDetails"
-            dangerouslySetInnerHTML={{ __html: taskDetails }}
-          ></p>
+          <p id="taskDetails">{taskDetails}</p>
         </div>
         <div className="progress">
           <span id="taskStatus">{taskStatus}</span>
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/data.js b/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/data.js
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/styles.css
@@ -21,6 +21,7 @@
   font-size: 14px;
   margin-top: 0;
   margin-bottom: 0;
+  white-space: pre-line;
 }
 
 .progress {
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Vue/App.vue b/apps/demos/Demos/DataGrid/FocusedRow/Vue/App.vue
@@ -42,10 +42,7 @@
     <div class="task-info">
       <div class="info">
         <div id="taskSubject">{{ taskSubject }}</div>
-        <p
-          id="taskDetails"
-          v-html="taskDetails"
-        />
+        <p id="taskDetails">{{ taskDetails }}</p>
       </div>
       <div class="progress">
         <span id="taskStatus">{{ taskStatus }}</span>
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Vue/data.ts b/apps/demos/Demos/DataGrid/FocusedRow/Vue/data.ts
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Vue/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/Vue/styles.css
@@ -21,6 +21,7 @@
   font-size: 14px;
   margin-top: 0;
   margin-bottom: 0;
+  white-space: pre-line;
 }
 
 .progress {
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/jQuery/data.js b/apps/demos/Demos/DataGrid/FocusedRow/jQuery/data.js
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/jQuery/index.js b/apps/demos/Demos/DataGrid/FocusedRow/jQuery/index.js
@@ -57,9 +57,9 @@ $(() => {
     onFocusedRowChanged(e) {
       const taskItem = getTaskDataItem(e.row);
       const focusedRowKey = e.component.option('focusedRowKey');
-      $('#taskSubject').html(taskItem.subject);
-      $('#taskDetails').html(taskItem.description);
-      $('#taskStatus').html(taskItem.status);
+      $('#taskSubject').text(taskItem.subject);
+      $('#taskDetails').text(taskItem.description);
+      $('#taskStatus').text(taskItem.status);
       $('#taskProgress').text(taskItem.progress);
       $('#taskId').dxNumberBox('instance').option('value', focusedRowKey);
     },
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/jQuery/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/jQuery/styles.css
@@ -21,6 +21,7 @@
   font-size: 14px;
   margin-top: 0;
   margin-bottom: 0;
+  white-space: pre-line;
 }
 
 .progress {
diff --git a/apps/demos/Demos/TreeList/FocusedRow/jQuery/index.js b/apps/demos/Demos/TreeList/FocusedRow/jQuery/index.js
@@ -71,12 +71,12 @@ $(() => {
           assigned = item.Name;
         });
 
-        $('.task-subject').html(rowData.Task_Subject);
+        $('.task-subject').text(rowData.Task_Subject);
 
-        $('.task-assigned').html(assigned);
-        $('.start-date').html(new Date(rowData.Task_Start_Date).toLocaleDateString());
+        $('.task-assigned').text(assigned);
+        $('.start-date').text(new Date(rowData.Task_Start_Date).toLocaleDateString());
 
-        $('.task-status').html(rowData.Task_Status);
+        $('.task-status').text(rowData.Task_Status);
 
         const progress = rowData.Task_Completion ? `${rowData.Task_Completion}%` : '';
         $('.task-progress').text(progress);

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@`
`21`	`21`	`font-size: 14px;`
`22`	`22`	`margin-top: 0;`
`23`	`23`	`margin-bottom: 0;`
	`24`	`+ white-space: pre-line;`
`24`	`25`	`}`
`25`	`26`
`26`	`27`	`.progress {`