feat(site-builder): add block-scoped <style> support to Custom HTML block

2026-08-09 17:10:57 -07:00
parent 6a9b227dda
commit 32f4092156
6 changed files with 831 additions and 10 deletions
@@ -1,6 +1,8 @@
 import React, { CSSProperties, useMemo } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import DOMPurify from 'dompurify';
+import { stableHash } from '../../utils/escape';
+import { scopeCss } from '../../utils/scope-css';

 interface HtmlBlockProps {
  code: string;
@@ -70,6 +72,13 @@ const PURIFY_CONFIG = {
    'line','polyline','polygon','path','text','tspan',
    'lineargradient','radialgradient','stop','clippath','mask','marker',
    'pattern','switch','view',
+    // Task 25: block-scoped <style> support. Formerly in FORBID_TAGS
+    // (stripped entirely). Now allowed through sanitisation -- its CSS is
+    // rewritten by scopeStyleBlocks()/scopeCss() below, immediately after
+    // DOMPurify runs, so it can only match inside this block's own wrapper
+    // element. See the FORCE_BODY comment below and scopeStyleBlocks() for
+    // why allowing the tag alone is not sufficient.
+    'style',
  ],
  // NOTE: supplying ALLOWED_ATTR replaces DOMPurify's own default attribute
  // allowlist rather than extending it, so anything the product needs
@@ -120,13 +129,31 @@ const PURIFY_CONFIG = {
  // be dangerous -- is correctly not in that DOMPurify list).
  ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel):|data:image\/[a-z]+;base64,|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
  // 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'],
+  // they are now deliberately allowed above. script/object/embed/link/meta
+  // stay forbidden. <style> (Task 25) is now allowed too -- see ALLOWED_TAGS
+  // comment above and scopeStyleBlocks() below; it survives sanitisation
+  // here but its CSS gets scoped afterwards, including copies nested inside
+  // the newly-allowed inline <svg> (querySelectorAll('style') in
+  // scopeStyleBlocks() doesn't care about namespace/nesting depth).
+  FORBID_TAGS: ['script','object','embed','link','meta'],
  FORBID_ATTR: [/^on/i],
+  // Task 25: without this, DOMPurify parses `input` as a full (mini) HTML
+  // document via DOMParser and only serializes <body>'s contents. Per the
+  // HTML5 parsing algorithm, a tag that can only legally appear in <head>
+  // -- and now that <style> is allowed, that includes <style> -- gets
+  // implicitly placed in <head> when it appears before any other content,
+  // and is silently lost (DOMPurify never looks at <head>). A block whose
+  // entire `code` is `<style>h1{color:red}</style>` -- a very plausible
+  // paste, style-before-markup is a common snippet shape -- would vanish
+  // with no error anywhere, despite <style> sitting right there in
+  // ALLOWED_TAGS. FORCE_BODY prepends an internal element before parsing so
+  // the parser is already in body-insertion-mode by the time it reaches the
+  // customer's first tag, keeping a leading <style> (or anything else) in
+  // <body> where DOMPurify's body-only serialization actually looks.
+  // Confirmed empirically against dompurify+jsdom directly (not just this
+  // app's behavior) -- see the "leading <style> with nothing before it"
+  // test in HtmlBlock.test.ts.
+  FORCE_BODY: true,
 };

 // M-6: `<iframe>` is allowed (maps/video embeds are a legitimate use case)
@@ -146,6 +173,55 @@ const IFRAME_SANDBOX_HOOK = (node: Element): void => {
  }
 };

+/**
+ * Task 25: rewrite any surviving `<style>` element(s) in `sanitized` (the
+ * DOMPurify output) so their CSS only matches inside this block's own
+ * wrapper element, then wrap the whole thing in that wrapper.
+ *
+ * Deliberately does the LEAST work possible when there's nothing to scope:
+ * a cheap substring check bails out before touching the DOM at all, so a
+ * block that doesn't use <style> -- i.e. every block saved before this task
+ * -- gets `sanitized` back completely unchanged (same string, no wrapper,
+ * no re-serialization round-trip that could subtly reformat attributes).
+ * That byte-for-byte identity is a hard requirement: published pages
+ * already contain `toHtml()` output with NO wrapper element, and adding one
+ * unconditionally would silently change the DOM/box-model of every
+ * existing customer block. See HtmlBlock.test.ts's
+ * "blocks without <style> are byte-identical" tests, which run this
+ * against real fixture content and diff the exact string.
+ *
+ * Scope identifier: `whp-html-${stableHash(rawCode)}` -- `stableHash` is
+ * the existing djb2 hash from utils/escape.ts (already used for this exact
+ * class of problem, see `scopeId` in that file), applied to `rawCode` --
+ * the block's own `code` prop, nothing else. Pure function of the block's
+ * own content: no Math.random, no Date.now, no counter, and deliberately
+ * NOT the Craft node id (unlike `scopeId`), because a scope identifier that
+ * depends on anything outside `code` would make the editor canvas preview
+ * (which calls purifyHtml(code) on render) and the published output (which
+ * calls the same purifyHtml(code) at publish time) diverge whenever that
+ * outside thing differs between the two call sites, and would make the
+ * stored HTML churn on every save even when the block's own content didn't
+ * change. Hashing `code` guarantees purifyHtml(code) is fully deterministic
+ * on its own -- same code in, byte-identical output out, every time, in
+ * both places it's called.
+ */
+function scopeStyleBlocks(sanitized: string, rawCode: string): string {
+  if (!sanitized.includes('<style')) return sanitized;
+
+  const container = document.createElement('div');
+  container.innerHTML = sanitized;
+  const styleEls = Array.from(container.querySelectorAll('style'));
+  const nonEmpty = styleEls.filter((el) => (el.textContent || '').trim() !== '');
+  if (nonEmpty.length === 0) return sanitized;
+
+  const scopeClass = `whp-html-${stableHash(rawCode)}`;
+  for (const el of nonEmpty) {
+    el.textContent = scopeCss(el.textContent || '', `.${scopeClass}`);
+  }
+
+  return `<div class="${scopeClass}">${container.innerHTML}</div>`;
+}
+
 export function purifyHtml(input: string): string {
  // Hook is added immediately before sanitize() and removed immediately
  // after, scoped tightly to this single call -- so it can never leak onto
@@ -154,7 +230,8 @@ export function purifyHtml(input: string): string {
  // multiple copies of the same hook.
  DOMPurify.addHook('afterSanitizeAttributes', IFRAME_SANDBOX_HOOK);
  try {
-    return DOMPurify.sanitize(input || '', PURIFY_CONFIG as any) as unknown as string;
+    const sanitized = DOMPurify.sanitize(input || '', PURIFY_CONFIG as any) as unknown as string;
+    return scopeStyleBlocks(sanitized, input || '');
  } finally {
    DOMPurify.removeHook('afterSanitizeAttributes', IFRAME_SANDBOX_HOOK as any);
  }