fix(site-builder): widen Custom HTML block sanitiser allow-list
A customer's broad HTML fixture showed 38% of it silently deleted by the shipped DOMPurify config: colspan/rowspan/scope, <dl>, <sub>/<sup>, <details>/<summary>, inline <svg>, <video>/<audio>, lang/dir/role, and <ol start/reversed> were all stripped. The site owner's call: be generous, this block is an explicit escape hatch, allow forms too. Widens PURIFY_CONFIG in HtmlBlock.tsx (45->119 tags, 16->108 attrs; form/input/button/select/textarea removed from FORBID_TAGS) while keeping the four non-negotiables intact: no <script>, no on*, no javascript: URLs, iframes stay sandboxed. <style> stays blocked (separate task adds scoped support later), including inside the newly allowed inline SVG. SVG support is an explicit tag list mirroring DOMPurify's own SVG vocabulary rather than USE_PROFILES, which turned out to silently discard ALLOWED_ATTR entirely and pull in unaudited tags (dialog, template, marquee, ...) not in scope here. Fixture survival goes from 61.6% (9,739/15,815 bytes) to 94.2% (14,899/15,815 bytes). Adds a fixture-driven regression + security test file (HtmlBlock.security.test.ts) plus a checked-in copy of the reference fixture, loaded via Vite's ?raw import so tests need no new dependencies and can't silently drift from the thing being tested. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,426 @@
|
||||
<!-- ============================================================
|
||||
HTML test fixture — everything below goes inside <body>
|
||||
Unstyled on purpose. No external assets (SVG/data URIs only)
|
||||
except the media/iframe block, which is intentionally broken
|
||||
so you can see fallback behavior.
|
||||
============================================================ -->
|
||||
|
||||
<a href="#main">Skip to content</a>
|
||||
|
||||
<header>
|
||||
<h1>HTML Test Fixture</h1>
|
||||
<p><small>A wide sample of elements for rendering, sanitizing, and parsing tests.</small></p>
|
||||
<nav aria-label="Primary">
|
||||
<ul>
|
||||
<li><a href="#text">Text</a></li>
|
||||
<li><a href="#lists">Lists</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#media">Media</a></li>
|
||||
<li><a href="#edge">Edge cases</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
|
||||
<!-- ========== HEADINGS ========== -->
|
||||
<section id="headings">
|
||||
<h2>Headings</h2>
|
||||
<h1>Heading level 1</h1>
|
||||
<h2>Heading level 2</h2>
|
||||
<h3>Heading level 3</h3>
|
||||
<h4>Heading level 4</h4>
|
||||
<h5>Heading level 5</h5>
|
||||
<h6>Heading level 6</h6>
|
||||
<hgroup>
|
||||
<h2>Grouped heading</h2>
|
||||
<p>Subtitle paragraph inside hgroup</p>
|
||||
</hgroup>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ========== TEXT & INLINE ========== -->
|
||||
<section id="text">
|
||||
<h2>Text and inline elements</h2>
|
||||
|
||||
<p>A normal paragraph with a fair amount of text so you can check line height, wrapping, and measure. It runs long enough to break across several lines in most containers, which is the whole point of including it here at all.</p>
|
||||
|
||||
<p>
|
||||
<strong>strong</strong>, <b>b</b>, <em>em</em>, <i>i</i>, <u>u</u>,
|
||||
<s>s</s>, <del>del</del>, <ins>ins</ins>, <mark>mark</mark>,
|
||||
<small>small</small>, H<sub>2</sub>O, x<sup>2</sup>,
|
||||
<code>inline code</code>, <kbd>Ctrl</kbd>+<kbd>C</kbd>,
|
||||
<samp>output text</samp>, <var>variable</var>,
|
||||
<abbr title="HyperText Markup Language">HTML</abbr>,
|
||||
<dfn>definition term</dfn>,
|
||||
<time datetime="2026-08-09">August 9, 2026</time>,
|
||||
<data value="42">forty-two</data>,
|
||||
<q>short inline quote</q>,
|
||||
<cite>Cited Work</cite>,
|
||||
<bdi>إسم</bdi>,
|
||||
<bdo dir="rtl">reversed direction</bdo>,
|
||||
<ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Links:
|
||||
<a href="#top">internal anchor</a> ·
|
||||
<a href="https://example.com">absolute</a> ·
|
||||
<a href="/relative/path">relative</a> ·
|
||||
<a href="mailto:test@example.com">mailto</a> ·
|
||||
<a href="tel:+15555550123">tel</a> ·
|
||||
<a href="https://example.com" target="_blank" rel="noopener noreferrer">new tab</a> ·
|
||||
<a href="#" download>download attr</a>
|
||||
</p>
|
||||
|
||||
<blockquote cite="https://example.com/source">
|
||||
<p>A block quotation. It contains its own paragraph and a nested quote so you can check indentation stacking.</p>
|
||||
<blockquote><p>Nested block quotation.</p></blockquote>
|
||||
<footer>— <cite>Someone, Somewhere</cite></footer>
|
||||
</blockquote>
|
||||
|
||||
<pre><code>#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
|
||||
for i in {1..3}; do
|
||||
printf 'iteration %d\n' "$i"
|
||||
done
|
||||
|
||||
# a deliberately long line to force horizontal overflow: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
|
||||
</code></pre>
|
||||
|
||||
<p>Line break here,<br>after the break.</p>
|
||||
<p>Word break opportunity: super<wbr>cali<wbr>fragilistic<wbr>expiali<wbr>docious</p>
|
||||
|
||||
<address>
|
||||
Contact: <a href="mailto:admin@example.com">admin@example.com</a><br>
|
||||
123 Nowhere St, Somewhere
|
||||
</address>
|
||||
|
||||
<p>Entities: & < > " ' © ® ™ — … € 😀</p>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ========== LISTS ========== -->
|
||||
<section id="lists">
|
||||
<h2>Lists</h2>
|
||||
|
||||
<h3>Unordered, nested</h3>
|
||||
<ul>
|
||||
<li>First item</li>
|
||||
<li>Second item
|
||||
<ul>
|
||||
<li>Nested item
|
||||
<ul><li>Deeply nested item</li></ul>
|
||||
</li>
|
||||
<li>Another nested item</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Third item with a longer body of text so that it wraps onto more than one line and you can confirm the hanging indent behaves.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Ordered variants</h3>
|
||||
<ol>
|
||||
<li>Default numbering</li>
|
||||
<li>Second
|
||||
<ol type="a"><li>Lower alpha</li><li>Second alpha</li></ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol start="5" reversed>
|
||||
<li>Reversed, starting at 5</li>
|
||||
<li>Next</li>
|
||||
<li>Next</li>
|
||||
</ol>
|
||||
|
||||
<h3>Description list</h3>
|
||||
<dl>
|
||||
<dt>Term one</dt>
|
||||
<dd>Definition of the first term.</dd>
|
||||
<dt>Term two</dt>
|
||||
<dt>Term two, alias</dt>
|
||||
<dd>Definition covering both terms above.</dd>
|
||||
</dl>
|
||||
|
||||
<h3>Menu</h3>
|
||||
<menu>
|
||||
<li><button type="button">Copy</button></li>
|
||||
<li><button type="button">Paste</button></li>
|
||||
</menu>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ========== TABLES ========== -->
|
||||
<section id="tables">
|
||||
<h2>Tables</h2>
|
||||
|
||||
<table>
|
||||
<caption>Quarterly figures with spans and a footer</caption>
|
||||
<colgroup>
|
||||
<col span="1">
|
||||
<col span="2">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Region</th>
|
||||
<th scope="col">Q1</th>
|
||||
<th scope="col">Q2</th>
|
||||
<th scope="col">Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">North</th>
|
||||
<td>1,204</td>
|
||||
<td>1,391</td>
|
||||
<td rowspan="2">Shared note spanning two rows</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">South</th>
|
||||
<td>988</td>
|
||||
<td>1,022</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">East</th>
|
||||
<td colspan="2">Merged across two quarters</td>
|
||||
<td>—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th scope="row">Total</th>
|
||||
<td>2,192</td>
|
||||
<td>2,413</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<h3>Wide table (horizontal overflow)</h3>
|
||||
<table>
|
||||
<tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th><th>I</th><th>J</th><th>K</th><th>L</th></tr>
|
||||
<tr><td>value-1</td><td>value-2</td><td>value-3</td><td>value-4</td><td>value-5</td><td>value-6</td><td>value-7</td><td>value-8</td><td>value-9</td><td>value-10</td><td>value-11</td><td>value-12</td></tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ========== FORMS ========== -->
|
||||
<section id="forms">
|
||||
<h2>Forms</h2>
|
||||
|
||||
<form action="#" method="get">
|
||||
<fieldset>
|
||||
<legend>Text inputs</legend>
|
||||
<p><label for="f-text">Text</label> <input id="f-text" name="text" type="text" placeholder="Placeholder" value="Prefilled"></p>
|
||||
<p><label for="f-search">Search</label> <input id="f-search" type="search" list="suggestions"></p>
|
||||
<datalist id="suggestions">
|
||||
<option value="alpha"></option>
|
||||
<option value="beta"></option>
|
||||
<option value="gamma"></option>
|
||||
</datalist>
|
||||
<p><label for="f-email">Email</label> <input id="f-email" type="email" required></p>
|
||||
<p><label for="f-url">URL</label> <input id="f-url" type="url"></p>
|
||||
<p><label for="f-tel">Tel</label> <input id="f-tel" type="tel" pattern="[0-9-+ ]+"></p>
|
||||
<p><label for="f-pass">Password</label> <input id="f-pass" type="password" minlength="8"></p>
|
||||
<p><label for="f-num">Number</label> <input id="f-num" type="number" min="0" max="100" step="5" value="25"></p>
|
||||
<p><label for="f-area">Textarea</label><br><textarea id="f-area" rows="4" cols="40">Multiline
|
||||
content
|
||||
here</textarea></p>
|
||||
<p><label for="f-ro">Readonly</label> <input id="f-ro" type="text" value="read only" readonly></p>
|
||||
<p><label for="f-dis">Disabled</label> <input id="f-dis" type="text" value="disabled" disabled></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Date, time, color, range, file</legend>
|
||||
<p><label for="f-date">Date</label> <input id="f-date" type="date" value="2026-08-09"></p>
|
||||
<p><label for="f-time">Time</label> <input id="f-time" type="time" value="13:45"></p>
|
||||
<p><label for="f-dtl">Datetime-local</label> <input id="f-dtl" type="datetime-local"></p>
|
||||
<p><label for="f-month">Month</label> <input id="f-month" type="month"></p>
|
||||
<p><label for="f-week">Week</label> <input id="f-week" type="week"></p>
|
||||
<p><label for="f-color">Color</label> <input id="f-color" type="color" value="#336699"></p>
|
||||
<p><label for="f-range">Range</label> <input id="f-range" type="range" min="0" max="10" value="7"></p>
|
||||
<p><label for="f-file">File</label> <input id="f-file" type="file" multiple accept=".txt,.md"></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Choices</legend>
|
||||
<p>
|
||||
<label><input type="checkbox" name="c" value="1" checked> Checked</label>
|
||||
<label><input type="checkbox" name="c" value="2"> Unchecked</label>
|
||||
<label><input type="checkbox" name="c" value="3" disabled> Disabled</label>
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="radio" name="r" value="a" checked> Option A</label>
|
||||
<label><input type="radio" name="r" value="b"> Option B</label>
|
||||
</p>
|
||||
<p>
|
||||
<label for="f-select">Select</label>
|
||||
<select id="f-select" name="select">
|
||||
<option value="">— choose —</option>
|
||||
<optgroup label="Group one">
|
||||
<option value="1" selected>One</option>
|
||||
<option value="2">Two</option>
|
||||
</optgroup>
|
||||
<optgroup label="Group two" disabled>
|
||||
<option value="3">Three</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="f-multi">Multi-select</label><br>
|
||||
<select id="f-multi" multiple size="4">
|
||||
<option>Red</option><option selected>Green</option><option>Blue</option><option>Violet</option>
|
||||
</select>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Output and buttons</legend>
|
||||
<p><label for="f-prog">Progress</label> <progress id="f-prog" value="0.6">60%</progress></p>
|
||||
<p><label for="f-meter">Meter</label> <meter id="f-meter" min="0" max="100" low="30" high="80" optimum="90" value="72">72</meter></p>
|
||||
<p><output name="result" for="f-num f-range">Computed output</output></p>
|
||||
<p>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
<button type="button">Plain button</button>
|
||||
<button type="button" disabled>Disabled button</button>
|
||||
<input type="submit" value="Input submit">
|
||||
<input type="button" value="Input button">
|
||||
</p>
|
||||
<input type="hidden" name="csrf" value="hidden-value">
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ========== MEDIA & EMBEDS ========== -->
|
||||
<section id="media">
|
||||
<h2>Media and embeds</h2>
|
||||
|
||||
<h3>Inline SVG</h3>
|
||||
<svg width="180" height="90" viewBox="0 0 180 90" role="img" aria-label="Two shapes">
|
||||
<rect x="5" y="5" width="80" height="80" fill="none" stroke="currentColor" stroke-width="3"></rect>
|
||||
<circle cx="135" cy="45" r="40" fill="none" stroke="currentColor" stroke-width="3"></circle>
|
||||
<text x="45" y="50" text-anchor="middle" font-size="14" fill="currentColor">svg</text>
|
||||
</svg>
|
||||
|
||||
<h3>Figure with data-URI image</h3>
|
||||
<figure>
|
||||
<img alt="Small red square"
|
||||
width="64" height="64"
|
||||
src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'64'%20height%3D'64'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'%23c0392b'%2F%3E%3C%2Fsvg%3E">
|
||||
<figcaption>Figure caption describing the image above.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h3>Broken image (alt-text fallback test)</h3>
|
||||
<img src="does-not-exist.png" alt="This alt text should render because the source is missing" width="200" height="100">
|
||||
|
||||
<h3>Picture element</h3>
|
||||
<picture>
|
||||
<source media="(min-width: 800px)" srcset="wide.png">
|
||||
<source media="(min-width: 400px)" srcset="medium.png">
|
||||
<img src="narrow.png" alt="Responsive image fallback" width="150" height="80">
|
||||
</picture>
|
||||
|
||||
<h3>Video and audio (sources intentionally missing)</h3>
|
||||
<video controls width="320" poster="poster.jpg">
|
||||
<source src="clip.webm" type="video/webm">
|
||||
<source src="clip.mp4" type="video/mp4">
|
||||
<track kind="captions" src="captions.vtt" srclang="en" label="English">
|
||||
Your browser does not support the video element.
|
||||
</video>
|
||||
<audio controls>
|
||||
<source src="tone.ogg" type="audio/ogg">
|
||||
<source src="tone.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
|
||||
<h3>Canvas and iframe</h3>
|
||||
<canvas width="200" height="60">Canvas fallback text</canvas>
|
||||
<iframe title="Sandboxed iframe" src="about:blank" width="300" height="120" sandbox loading="lazy"></iframe>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ========== INTERACTIVE / SEMANTIC ========== -->
|
||||
<section id="interactive">
|
||||
<h2>Interactive and semantic containers</h2>
|
||||
|
||||
<details>
|
||||
<summary>Collapsed disclosure</summary>
|
||||
<p>Hidden content revealed on toggle.</p>
|
||||
</details>
|
||||
<details open>
|
||||
<summary>Open disclosure</summary>
|
||||
<ul><li>With a list inside</li><li>Second item</li></ul>
|
||||
</details>
|
||||
|
||||
<dialog id="test-dialog">
|
||||
<p>Non-modal dialog content.</p>
|
||||
<button type="button" onclick="this.closest('dialog').close()">Close</button>
|
||||
</dialog>
|
||||
<button type="button" onclick="document.getElementById('test-dialog').show()">Open dialog</button>
|
||||
|
||||
<article>
|
||||
<header><h3>Article header</h3></header>
|
||||
<p>Article body content.</p>
|
||||
<aside><p>An aside nested inside the article.</p></aside>
|
||||
<footer><p>Article footer.</p></footer>
|
||||
</article>
|
||||
|
||||
<p><span contenteditable="true">Editable inline region</span></p>
|
||||
<p hidden>This paragraph has the hidden attribute and should not render.</p>
|
||||
|
||||
<template id="tpl">
|
||||
<p>Template content — must not render until cloned.</p>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ========== EDGE CASES ========== -->
|
||||
<section id="edge">
|
||||
<h2>Edge cases</h2>
|
||||
|
||||
<p>Very long unbroken token (overflow test):</p>
|
||||
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
|
||||
<p>Long URL: https://example.com/a/very/long/path/segment/that/keeps/going/and/going?query=1&another=2&third=3#fragment-identifier</p>
|
||||
|
||||
<p lang="ar" dir="rtl">هذا نص عربي لاختبار الاتجاه من اليمين إلى اليسار.</p>
|
||||
<p lang="he" dir="rtl">זהו טקסט עברי לבדיקה.</p>
|
||||
<p lang="ja">日本語のテキストです。改行と折り返しの確認用。</p>
|
||||
<p lang="de">Straßenverkehrsordnung — Grüße aus München</p>
|
||||
<p>Emoji & combining: 👋🏽 👨👩👧👦 🇺🇸 é vs é (precomposed vs combining)</p>
|
||||
<p>Zero-width chars between letters: a​b​c</p>
|
||||
|
||||
<p>Escaped tag text: <script>alert(1)</script></p>
|
||||
<p>Attribute with quotes: <span title='He said "hello"'>hover me</span></p>
|
||||
|
||||
<p>Empty elements follow:</p>
|
||||
<div></div>
|
||||
<p></p>
|
||||
<ul></ul>
|
||||
<table></table>
|
||||
|
||||
<p>Deep nesting:</p>
|
||||
<div><div><div><div><div><div><div><p>Seven levels deep.</p></div></div></div></div></div></div></div>
|
||||
|
||||
<p>Inline element stress:
|
||||
<strong><em><u><s><mark>all five at once</mark></s></u></em></strong>
|
||||
</p>
|
||||
|
||||
<p style="color: teal;">Inline style attribute (teal).</p>
|
||||
<p class="custom-class another-class" data-test-id="edge-1" data-value="42">Element with classes and data attributes.</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p><small>End of fixture — <time datetime="2026-08-09">2026-08-09</time></small></p>
|
||||
</footer>
|
||||
Reference in New Issue
Block a user