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
@@ -9,12 +9,21 @@ interface HtmlBlockProps {
|
||||
node_id?: string;
|
||||
}
|
||||
|
||||
// Task 24: widening the allow-list after a customer's broad HTML fixture
|
||||
// showed 38% of it silently deleted (tables losing colspan/rowspan/scope,
|
||||
// <dl>/<sub>/<details>/inline <svg>/<video>/<audio> dropped wholesale,
|
||||
// lang/dir/role stripped, <ol start/reversed> flattened). The owner's call:
|
||||
// be generous -- this block is an explicit escape hatch and customers
|
||||
// reasonably expect it to render ordinary HTML, including forms. The four
|
||||
// non-negotiables (no <script>, no on*, no javascript: URLs, iframes stay
|
||||
// sandboxed) are unaffected by the widening and are covered by dedicated
|
||||
// tests in HtmlBlock.test.ts / HtmlBlock.security.test.ts.
|
||||
const PURIFY_CONFIG = {
|
||||
ALLOWED_TAGS: [
|
||||
'a','p','br','hr','div','span','section','article',
|
||||
'header','footer','main','aside','nav',
|
||||
'ul','ol','li',
|
||||
'h1','h2','h3','h4','h5','h6',
|
||||
'h1','h2','h3','h4','h5','h6','hgroup',
|
||||
'em','strong','b','i','u','s',
|
||||
'blockquote','code','pre',
|
||||
'img','figure','figcaption',
|
||||
@@ -22,6 +31,38 @@ const PURIFY_CONFIG = {
|
||||
// Tables: pasted content commonly includes these; dropping them
|
||||
// silently ate customer-pasted tables (see C1 review finding).
|
||||
'table','thead','tbody','tfoot','tr','td','th','caption','colgroup','col',
|
||||
// Text semantics (Task 24).
|
||||
'sub','sup','small','mark','del','ins','abbr','cite','q','time','data',
|
||||
'kbd','samp','var','dfn','address','bdi','bdo','ruby','rt','rp','wbr',
|
||||
// Lists (Task 24).
|
||||
'dl','dt','dd','menu',
|
||||
// Disclosure widget (Task 24). Note: <dialog> and <template> are
|
||||
// deliberately NOT added -- the fixture exercises them wrapped in
|
||||
// on*= handlers specifically to prove they still get neutralized/
|
||||
// dropped by staying outside the allow-list.
|
||||
'details','summary',
|
||||
// Media (Task 24). All URL-bearing attributes on these (src, poster,
|
||||
// srcset...) go through the same ALLOWED_URI_REGEXP gate as everything
|
||||
// else -- see _isValidAttribute in dompurify, which URI-checks every
|
||||
// allowed attribute value except a small fixed "inert" list (alt,
|
||||
// class, id, style, title, ...) that never includes src/poster/srcset.
|
||||
'picture','source','video','audio','track','canvas',
|
||||
// Forms (Task 24). Site owner's explicit decision: allow the full
|
||||
// ordinary form surface. No on*= survives (FORBID_ATTR below), and
|
||||
// action/formaction-style URLs are gated by ALLOWED_URI_REGEXP the
|
||||
// same as href/src, so `javascript:` still cannot survive here either.
|
||||
'form','input','button','select','option','optgroup','textarea',
|
||||
'label','fieldset','legend','datalist','output','progress','meter',
|
||||
// Inline SVG (Task 24) -- see the block comment on IFRAME_SANDBOX_HOOK's
|
||||
// neighbor below for why this is an explicit tag list rather than
|
||||
// DOMPurify's USE_PROFILES svg profile. Deliberately excludes <use> and
|
||||
// <image> (both need xlink:href, an external-reference vector DOMPurify
|
||||
// itself excludes from its own SVG defaults) and <a>/<foreignObject>
|
||||
// (not needed by the fixture; foreignObject can embed arbitrary HTML).
|
||||
'svg','g','defs','symbol','title','desc','rect','circle','ellipse',
|
||||
'line','polyline','polygon','path','text','tspan',
|
||||
'lineargradient','radialgradient','stop','clippath','mask','marker',
|
||||
'pattern','switch','view',
|
||||
],
|
||||
// NOTE: supplying ALLOWED_ATTR replaces DOMPurify's own default attribute
|
||||
// allowlist rather than extending it, so anything the product needs
|
||||
@@ -32,9 +73,39 @@ const PURIFY_CONFIG = {
|
||||
'width','height','class','id','style',
|
||||
'allowfullscreen','allow','frameborder',
|
||||
'sandbox','referrerpolicy',
|
||||
// Task 24 additions.
|
||||
'colspan','rowspan','scope','headers','span','start','reversed',
|
||||
'type','value','name','placeholder','required','disabled','readonly',
|
||||
'checked','selected','multiple','min','max','step','minlength',
|
||||
'maxlength','pattern','rows','cols','accept','action','method','for',
|
||||
'list','label','datetime','cite','lang','dir','role','srcset','media',
|
||||
'sizes','loading','controls','poster','loop','muted','autoplay',
|
||||
'preload','playsinline','kind','srclang','default','open','download',
|
||||
'hidden','contenteditable',
|
||||
// SVG presentation attributes (explicit route -- see ALLOWED_TAGS
|
||||
// comment on the SVG tag list). Covers the fixture's <svg viewBox
|
||||
// role>/<rect>/<circle>/<text> block plus the common presentation
|
||||
// attributes for the shapes/gradients allowed above. Deliberately
|
||||
// excludes xlink:href (no <use>/<image> allowed, so it has nothing
|
||||
// legitimate to attach to) and the SMIL/animation attributes (begin,
|
||||
// dur, repeatCount, ...) which DOMPurify's own SVG defaults exclude
|
||||
// for the same reason on* handlers are excluded.
|
||||
'viewbox','cx','cy','r','rx','ry','x','y','x1','y1','x2','y2',
|
||||
'points','d','fill','stroke','stroke-width','stroke-linecap',
|
||||
'stroke-linejoin','stroke-dasharray','fill-rule','clip-rule','opacity',
|
||||
'fill-opacity','stroke-opacity','text-anchor','dominant-baseline',
|
||||
'font-family','font-size','font-weight','transform','offset',
|
||||
'stop-color','stop-opacity','gradientunits','gradienttransform',
|
||||
'preserveaspectratio',
|
||||
],
|
||||
ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel|data:image\/[a-z]+;base64,):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
|
||||
FORBID_TAGS: ['script','style','object','embed','link','meta','form','input','button','select','textarea'],
|
||||
// form/input/button/select/textarea removed from FORBID_TAGS (Task 24) --
|
||||
// they are now deliberately allowed above. style/script/object/embed/
|
||||
// link/meta stay forbidden; <style> in particular stays blocked even
|
||||
// inside the newly-allowed inline <svg> (a separate task is adding
|
||||
// scoped <style> support later -- see HtmlBlock.security.test.ts for the
|
||||
// svg><style> regression check).
|
||||
FORBID_TAGS: ['script','style','object','embed','link','meta'],
|
||||
FORBID_ATTR: [/^on/i],
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user