Merge pull request #46 from DHTMLX/GS-3246

xss protection for wrappers

Author: AlexKlimenkov

docs/guides/app-security.md

@@ -383,4 +383,41 @@ It helps preventing various code injection attacks and improve the safety of app
 
 [Read more about applying the CSP standard to a dhtmlxGantt application](api/config/csp.md).
 
+## Framework Wrapper XSS Protection
+
+Starting from v9.2, the [React](integrations/react.md), [Vue](integrations/vue.md), and [Angular](integrations/angular.md) wrappers automatically HTML-escape string values returned by user-provided template functions. This covers:
+
+- Functions passed via the `templates` prop
+- `config.columns[].template` functions
+- `config.scales[].format` functions
+
+This means that if a template returns a string containing HTML tags, those tags will be rendered as text rather than as markup, preventing XSS through unsanitized data.
+
+### Per-template opt-out
+
+If a specific template needs to return raw HTML, wrap it with the `allowRawHTML` helper exported from the wrapper package:
+
+~~~js
+import { allowRawHTML, escapeHTML } from "@dhx/react-gantt";
+
+const templates = {
+  task_text: allowRawHTML((start, end, task) => {
+    return `<b>${escapeHTML(task.text)}</b>`;
+  })
+};
+~~~
+
+:::note
+When using `allowRawHTML`, you are responsible for sanitizing any user-provided data inside that template. Use the exported `escapeHTML` utility for values that come from user input.
+:::
+
+### Global opt-out
+
+Set the `allowRawHTML` component prop to `true` to disable escaping for all templates:
+
+~~~jsx
+<ReactGantt allowRawHTML={true} />
+~~~
+
+See [Migration notes](migration.md#91---92) for more details.
 

docs/integrations/angular/configuration-props.md

@@ -104,6 +104,11 @@ This page documents the public wrapper surface of `@dhtmlx/trial-angular-gantt`
       <td>ResourceFilter</td>
       <td>Predicate for filtering rows in the configured resource datastore.</td>
     </tr>
+    <tr>
+      <td>allowRawHTML</td>
+      <td>boolean</td>
+      <td>When <code>false</code> (default), string values returned from template functions are HTML-escaped to prevent XSS. Set to <code>true</code> to allow raw HTML in all templates. For per-template control, wrap individual template functions with the exported <code>allowRawHTML()</code> helper. See <a href="/migration#91---92">Migration notes</a>.</td>
+    </tr>
   </tbody>
 </table>
 

docs/integrations/react/configuration-props.md

@@ -110,6 +110,11 @@ This page describes the props accepted by React Gantt and how they map to DHTMLX
   <td>Allows replacing <code>onBeforeTaskDelete</code> and <code>onBeforeLinkDelete</code> modals with custom components.</td>
   </tr>
   <tr>
+  <td>allowRawHTML</td>
+  <td>boolean</td>
+  <td>When <code>false</code> (default), string values returned from template functions are HTML-escaped to prevent XSS. Set to <code>true</code> to allow raw HTML in all templates. For per-template control, wrap individual template functions with the exported <code>allowRawHTML()</code> helper. See <a href="/migration#91---92">Migration notes</a>.</td>
+  </tr>
+  <tr>
   <td>(Event Props)</td>
   <td>Function</td>
   <td>The wrapper also supports passing event handler props that correspond to DHTMLX Gantt events. For example, onTaskClick, onAfterTaskAdd, etc. If the prop name matches the event name, it's attached automatically.</td>

docs/integrations/vue/configuration-props.md

@@ -121,6 +121,11 @@ Use it as a reference after [Overview](integrations/vue/overview.md) or [Quick S
       <td>VueGanttEvents</td>
       <td>Event-name to handler map.</td>
     </tr>
+    <tr>
+      <td>allowRawHTML</td>
+      <td>boolean</td>
+      <td>When <code>false</code> (default), string values returned from template functions are HTML-escaped to prevent XSS. Set to <code>true</code> to allow raw HTML in all templates. For per-template control, wrap individual template functions with the exported <code>allowRawHTML()</code> helper. See <a href="/migration#91---92">Migration notes</a>.</td>
+    </tr>
   </tbody>
 </table>
 

docs/migration.md

@@ -5,6 +5,58 @@ sidebar_label: "Migration from Older Versions"
 
 # Migration from Older Versions
 
+## 9.1 -> 9.2 {#91---92}
+
+### XSS protection in framework wrappers
+
+Starting from v9.2, [React Gantt](integrations/react.md), [Vue Gantt](integrations/vue.md), and [Angular Gantt](integrations/angular.md) wrappers automatically HTML-escape string values returned from user-provided template functions. This prevents XSS vulnerabilities caused by unsanitized user data rendered through templates.
+
+The escaping applies to:
+
+- Functions passed via the `templates` prop
+- `config.columns[].template` functions
+- `config.scales[].format` functions
+
+If your templates intentionally return HTML markup (e.g. `<b>`, `<span>`, `<div>`), the markup will now be escaped and rendered as plain text by default.
+
+#### Per-template opt-out (recommended)
+
+Wrap specific templates that need to output raw HTML with the `allowRawHTML` helper:
+
+~~~jsx
+import { allowRawHTML } from "@dhx/react-gantt";
+// or "@dhx/vue-gantt" / "@dhx/angular-gantt"
+
+<ReactGantt
+  templates={{
+    task_text: allowRawHTML((start, end, task) => {
+      return `<b>${escapeHTML(task.text)}</b>`;
+    }),
+    task_class: (start, end, task) => task.priority // still escaped
+  }}
+/>
+~~~
+
+:::note
+When using `allowRawHTML`, you are responsible for sanitizing any user-provided data inside that template. Use the exported `escapeHTML` utility for values that come from user input.
+:::
+
+#### Full opt-out
+
+Set the `allowRawHTML` component prop to `true` to restore pre-9.2 behavior and disable escaping for all templates:
+
+~~~jsx
+<ReactGantt allowRawHTML={true} /* ... */ />
+~~~
+
+~~~vue
+<VueGantt :allowRawHTML="true" /* ... */ />
+~~~
+
+~~~html
+<dhx-gantt [allowRawHTML]="true" /* ... */></dhx-gantt>
+~~~
+
 ## 9.0 -> 9.1
 
 The v9.1 does not introduce breaking changes but several configuration options have been **deprecated** and 

docs/whats-new.md

@@ -9,6 +9,19 @@ sidebar_label: "What's New"
 Updating from an earlier version? Check the [migration guide](migration.md) for required changes and update steps.
 :::
 
+## 9.2
+
+<span class='release_date'>Minor update</span>
+
+### Breaking Changes
+
+This update brings some changes in the behavior of framework wrappers. Make sure to check the
+[Migration notes](migration.md#91---92) to be on the safe side.
+
+### New Functionality
+
+- [React Gantt](integrations/react.md), [Vue Gantt](integrations/vue.md), and [Angular Gantt](integrations/angular.md) wrappers now **HTML-escape string values returned from template functions** by default to prevent XSS attacks. This applies to `templates`, `config.columns[].template`, and `config.scales[].format` functions
+
 ## 9.1.3
 
 <span class='release_date'>March 16, 2026. Bugfix release</span>