fix: Escape HTML in error content (#83)

Author: AylenHoz

src/templates/error_info/main.ts

@@ -9,7 +9,7 @@
 
 import { BaseComponent } from '../../component.js'
 import { publicDirURL } from '../../public_dir.js'
-import { wordWrap, colors } from '../../helpers.js'
+import { wordWrap, colors, htmlEscape } from '../../helpers.js'
 import type { ErrorInfoProps } from '../../types.js'
 
 const ERROR_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v6m0 4.01.01-.011M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"/></svg>`
@@ -41,15 +41,15 @@ export class ErrorInfo extends BaseComponent<ErrorInfoProps> {
    */
   async toHTML(props: ErrorInfoProps): Promise<string> {
     return `<section>
-      <h4 id="error-name">${props.error.name}</h4>
-      <h1 id="error-title">${props.title}</h1>
+      <h4 id="error-name">${htmlEscape(props.error.name)}</h4>
+      <h1 id="error-title">${htmlEscape(props.title)}</h1>
     </section>
     <section>
       <div class="card">
         <div class="card-body">
           <h2 id="error-message">
             <span>${ERROR_ICON_SVG}</span>
-            <span>${props.error.message}</span>
+            <span>${htmlEscape(props.error.message)}</span>
             <button
               id="copy-error-btn"
               data-error-text="${htmlAttributeEscape(`${props.error.name}: ${props.error.message}`)}"

src/templates/error_metadata/main.ts

@@ -11,6 +11,7 @@ import { dump, themes } from '@poppinss/dumper/html'
 
 import { BaseComponent } from '../../component.js'
 import { publicDirURL } from '../../public_dir.js'
+import { htmlEscape } from '../../helpers.js'
 import type { ErrorMetadataProps, ErrorMetadataRow } from '../../types.js'
 
 /**
@@ -29,7 +30,7 @@ export class ErrorMetadata extends BaseComponent<ErrorMetadataProps> {
     }
 
     if (this.#primitives.includes(typeof value) || value === null) {
-      return value
+      return typeof value === 'string' ? htmlEscape(value) : value
     }
 
     return dump(value, { styles: themes.cssVariables, cspNonce })

tests/templates.spec.ts

@@ -256,4 +256,39 @@ test.group('Templates', () => {
       'Something went wrong'
     )
   })
+
+  test('renders error fields with inline HTML as literal text', async ({ expect }) => {
+    const error = new Error('<b>Error message with HTML</b>', { cause: '<i>Cause with HTML</i>' })
+
+    error.name = '<ul>Name with HTML</ul>'
+
+    const metadata = new Metadata()
+
+    metadata.group('Request', { url: { key: 'url', value: '<span>URL with HTML</span>' } })
+
+    const templates = new Templates(true)
+    const html = await templates.toHTML({
+      title: '<ul>Error with HTML</ul>',
+      metadata,
+      error: await new ErrorParser().parse(error),
+    })
+
+    const { window } = new JSDOM(html)
+
+    expect(window.document.querySelector('#error-message')?.textContent?.trim()).toBe(
+      '<b>Error message with HTML</b>'
+    )
+    expect(window.document.querySelector('#error-name')?.textContent?.trim()).toBe(
+      '<ul>Name with HTML</ul>'
+    )
+    expect(window.document.querySelector('#error-title')?.textContent?.trim()).toBe(
+      '<ul>Error with HTML</ul>'
+    )
+    expect(window.document.querySelector('#error-cause')?.textContent?.trim()).toContain(
+      '<i>Cause with HTML</i>'
+    )
+    expect(
+      window.document.querySelector('.metadata-group .card-subtitle + span')?.textContent?.trim()
+    ).toBe('<span>URL with HTML</span>')
+  })
 })