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:
+56
-14
@@ -64,20 +64,7 @@ export function safeUrl(s: string): string {
|
||||
const trimmed = s.trim();
|
||||
if (trimmed === '') return '';
|
||||
|
||||
// Build a normalized copy for scheme detection only: decode numeric HTML
|
||||
// entities (catches e.g. j -> 'j'), strip whitespace/control chars,
|
||||
// and lowercase.
|
||||
const normalized = decodeNumericEntities(trimmed)
|
||||
.replace(/[\x00-\x20]+/g, '')
|
||||
.toLowerCase();
|
||||
|
||||
// Strip any colons before matching the scheme prefix. This defeats
|
||||
// obfuscation that splices extra colons into the scheme name itself
|
||||
// (e.g. decoding : mid-word produces "java:script:alert(1)", which
|
||||
// would otherwise dodge a literal "^javascript:" check) while still
|
||||
// reliably catching the real "javascript:"/"vbscript:"/"data:text/html"
|
||||
// prefixes once their own colon is removed.
|
||||
const collapsed = normalized.replace(/:/g, '');
|
||||
const collapsed = normalizeForSchemeCheck(trimmed);
|
||||
|
||||
if (DANGEROUS_SCHEME_PREFIXES.some((prefix) => collapsed.startsWith(prefix))) {
|
||||
return '';
|
||||
@@ -86,6 +73,61 @@ export function safeUrl(s: string): string {
|
||||
return trimmed;
|
||||
}
|
||||
|
||||
/**
|
||||
* Image-context variant of `safeUrl` for IMAGE sinks only (`<img src>`, CSS
|
||||
* `url(...)` backgrounds). `data:image/svg+xml` is safe here -- loaded as an
|
||||
* image, an SVG is rasterized and never executes an inline <script>/onload=
|
||||
* the way it would as a navigation/iframe document -- so, unlike `safeUrl`,
|
||||
* this ALLOWS every `data:image/*` subtype (svg+xml, png, jpeg, gif, webp,
|
||||
* ..., with or without `;base64`).
|
||||
*
|
||||
* Still blocks `javascript:` / `vbscript:` (same obfuscation-resistant
|
||||
* normalization as `safeUrl`), and -- because this is an image sink, not a
|
||||
* general-purpose URL sink -- treats `data:` as an ALLOWLIST rather than a
|
||||
* blocklist: any `data:` URI whose type is NOT `image/*` (`data:text/html`,
|
||||
* `data:application/javascript`, `data:text/javascript`, etc.) is blocked
|
||||
* too, since none of those are legitimate image sources.
|
||||
*
|
||||
* Do NOT use this for href/iframe/form-action/navigation sinks -- keep
|
||||
* those on `safeUrl`, which still blocks `data:image/svg+xml`.
|
||||
*/
|
||||
export function safeImageUrl(s: unknown): string {
|
||||
if (typeof s !== 'string') return '';
|
||||
|
||||
const trimmed = s.trim();
|
||||
if (trimmed === '') return '';
|
||||
|
||||
const collapsed = normalizeForSchemeCheck(trimmed);
|
||||
|
||||
if (collapsed.startsWith('javascript') || collapsed.startsWith('vbscript')) {
|
||||
return '';
|
||||
}
|
||||
if (collapsed.startsWith('data') && !collapsed.startsWith('dataimage')) {
|
||||
// A data: URI whose MIME type isn't image/* -- e.g. data:text/html,
|
||||
// data:application/javascript, data:text/javascript. No legitimate
|
||||
// image source needs these; block unconditionally.
|
||||
return '';
|
||||
}
|
||||
|
||||
return trimmed;
|
||||
}
|
||||
|
||||
// Normalizes a trimmed URL string for scheme-prefix matching only: decodes
|
||||
// numeric HTML entities (catches e.g. j -> 'j'), strips whitespace /
|
||||
// control chars, lowercases, then strips every colon. Stripping colons
|
||||
// defeats obfuscation that splices extra colons into the scheme name itself
|
||||
// (e.g. decoding : mid-word produces "java:script:alert(1)", which would
|
||||
// otherwise dodge a literal "^javascript:" check) while still reliably
|
||||
// catching the real "javascript:"/"vbscript:"/"data:..." prefixes once their
|
||||
// own colon is removed. Used for prefix `.startsWith()` checks only -- the
|
||||
// original (non-collapsed) string is always what gets returned/emitted.
|
||||
function normalizeForSchemeCheck(trimmed: string): string {
|
||||
return decodeNumericEntities(trimmed)
|
||||
.replace(/[\x00-\x20]+/g, '')
|
||||
.toLowerCase()
|
||||
.replace(/:/g, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Neutralizes CSS-context breakout for a single design-token value (color,
|
||||
* length, gradient, etc.) so it is safe to interpolate RAW into either CSS
|
||||
|
||||
Reference in New Issue
Block a user