Add escHtml utility and sanitize widget output in Counter, WidgetDescription, HeadlineSlot, and ErrorView components

Author: Jiří Fencl

.changeset/shy-chicken-flow.md

@@ -0,0 +1,10 @@
+---
+"@merkur/create-widget": patch
+---
+
+Escape HTML output in vanilla template to prevent XSS
+
+- **What** Added `escHtml()` calls around all widget state and property values interpolated into template literals in `Counter.js`, `WidgetDescription.js`, `HeadlineSlot.js`, and `ErrorView.js`. Also fixed `className` to `class` in `ErrorView.js`.
+- **Why** Raw interpolation of widget state into HTML strings is vulnerable to XSS. Any user-controlled value (e.g. `widget.state.counter`, `widget.name`, `widget.error.message`) could inject arbitrary HTML.
+- **How** Nothing.
+

packages/create-widget/views/vanilla/template/src/components/Counter.js

@@ -1,8 +1,10 @@
+import { escHtml } from '../utils';
+
 export default function Counter(widget) {
   return `
     <div>
       <h3>Counter widget:</h3>
-      <p>Count: <span data-merkur="counter">${widget.state.counter}</span></p>
+      <p>Count: <span data-merkur="counter">${escHtml(widget.state.counter)}</span></p>
       <button data-merkur="on-increase">
         increase counter
       </button>

packages/create-widget/views/vanilla/template/src/components/WidgetDescription.js

@@ -1,3 +1,5 @@
+import { escHtml } from '../utils';
+
 export default function ViewDescription(widget) {
-  return `<p>The widget's name is <strong>${widget.name}@${widget.version}</strong>.</p>`;
+  return `<p>The widget's name is <strong>${escHtml(widget.name)}@${escHtml(widget.version)}</strong>.</p>`;
 }

packages/create-widget/views/vanilla/template/src/slots/HeadlineSlot.js

@@ -1,3 +1,4 @@
+import { escHtml } from '../utils';
 import Welcome from '../components/Welcome';
 import WidgetDescription from '../components/WidgetDescription';
 import ErrorView from '../views/ErrorView';
@@ -19,9 +20,7 @@ function HeadlineSlot(widget) {
         <div class='merkur__headline'>
           <div class='merkur__view'>
             ${Welcome(widget)}
-            <h3>Current count: <span data-merkur="counter">${
-              widget.state.counter
-            }</span></h3>
+            <h3>Current count: <span data-merkur="counter">${escHtml(widget.state.counter)}</span></h3>
             ${WidgetDescription(widget)}
           </div>
         </div>

packages/create-widget/views/vanilla/template/src/utils.js

@@ -0,0 +1,7 @@
+export function escHtml(s) {
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}

packages/create-widget/views/vanilla/template/src/views/ErrorView.js

@@ -1,9 +1,11 @@
+import { escHtml } from '../utils';
+
 export default function ErrorView(widget) {
   return `
-    <div className='merkur__error'>
-      <h1>Status: ${widget.error.status}</h1>
-      <h2>Message: ${widget.error.message}</h2>
-      <pre>${widget.error.stack}</pre>
+    <div class='merkur__error'>
+      <h1>Status: ${escHtml(widget.error.status)}</h1>
+      <h2>Message: ${escHtml(widget.error.message)}</h2>
+      <pre>${escHtml(widget.error.stack)}</pre>
     </div>
   `;
 }