security: add safeImageUrl, un-break M-5's over-blocking of image-context SVG data URIs

M-5 made safeUrl() block data:image/svg+xml everywhere, including the
image-only sinks (<img src>, CSS url()) that Gallery's default images and
other SVG placeholders rely on. Loaded as an image, an SVG is rasterized
and never executes an inline <script>/onload= -- that only happens when
it's navigated to or loaded as an <iframe> document -- so M-5 over-blocked
the safe contexts and broke every published Gallery (and other components
using an SVG placeholder) using safeUrl's default images in prod.

Adds safeImageUrl(): identical javascript:/vbscript: handling to safeUrl,
but treats data: as an allowlist of image/* subtypes instead of a
blocklist -- allows all data:image/* (including svg+xml, with or without
base64), still blocks data:text/html and any other non-image data: type.

Swapped to safeImageUrl at IMAGE-src / CSS-image url() sinks only:
- Gallery.tsx img src + lightbox data-lb-src
- ImageBlock.tsx img src (toHtml)
- Logo.tsx / Navbar.tsx logo <img> src (their href/link targets keep safeUrl)
- style-helpers.ts sanitizeCssValue's url(...) handling (background-image
  for HeroSimple/BackgroundSection/Section/CallToAction)

Left on safeUrl (href/iframe/form-action/navigation sinks, where
data:image/svg+xml must stay blocked): ButtonLink, Icon link, SocialLinks,
Menu/Navbar link hrefs, PricingTable buttonHref, _cta-helpers,
ContentSlider buttonHref, FeaturesGrid buttonUrl, FormContainer action
(via form-relay-wiring), MapEmbed/VideoBlock iframe src.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-12 19:45:58 -07:00
parent 802938ec1a
commit 3f3c6fb851
8 changed files with 156 additions and 26 deletions
+6 -2
View File
@@ -1,5 +1,5 @@
import { CSSProperties } from 'react';
import { escapeAttr, safeUrl } from './escape';
import { escapeAttr, safeImageUrl } from './escape';
const camelToKebab = (str: string): string =>
str.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
@@ -41,8 +41,12 @@ function sanitizeCssValue(raw: string): string {
// Neutralize the url(...) reference: validate/strip the scheme and
// re-wrap in single quotes with the contents escaped for attribute
// safety. This is already fully safe, `;` and all.
// Image-context sink (background/mask/border-image url()): use
// safeImageUrl, not safeUrl -- a data:image/svg+xml background is safe
// (rasterized, never executed as a document) and must survive here, the
// same way it must survive on an <img src>.
const inner = m[2];
out += `url('${escapeAttr(safeUrl(inner.trim()))}')`;
out += `url('${escapeAttr(safeImageUrl(inner.trim()))}')`;
lastIndex = URL_RE.lastIndex;
}
out += sanitizeBreakoutChars(raw.slice(lastIndex));