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:
@@ -1,7 +1,7 @@
|
||||
import React, { CSSProperties } from 'react';
|
||||
import { useNode, UserComponent } from '@craftjs/core';
|
||||
import { cssPropsToString } from '../../utils/style-helpers';
|
||||
import { escapeHtml, escapeAttr, safeUrl, scopeId, cssValue } from '../../utils/escape';
|
||||
import { escapeHtml, escapeAttr, safeImageUrl, scopeId, cssValue } from '../../utils/escape';
|
||||
|
||||
interface GalleryImage {
|
||||
src: string;
|
||||
@@ -154,10 +154,10 @@ Gallery.craft = {
|
||||
// inline onclick with an interpolated src -- a single delegated click
|
||||
// listener below reads it, so a src containing a quote can't break out
|
||||
// of a per-item event-handler string.
|
||||
const lbAttr = lightbox ? ` data-lb-src="${escapeAttr(safeUrl(img.src || ''))}" role="button" tabindex="0"` : '';
|
||||
const lbAttr = lightbox ? ` data-lb-src="${escapeAttr(safeImageUrl(img.src || ''))}" role="button" tabindex="0"` : '';
|
||||
const itemStyle = lightbox ? 'cursor:pointer;position:relative;overflow:hidden;border-radius:8px' : 'position:relative;overflow:hidden;border-radius:8px';
|
||||
return `<div${lbAttr} style="${itemStyle}">
|
||||
<img src="${escapeAttr(safeUrl(img.src || ''))}" alt="${escapeAttr(img.alt)}" style="width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;background-color:#f1f5f9" />
|
||||
<img src="${escapeAttr(safeImageUrl(img.src || ''))}" alt="${escapeAttr(img.alt)}" style="width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;background-color:#f1f5f9" />
|
||||
${caption}
|
||||
</div>`;
|
||||
}).join('\n ');
|
||||
|
||||
Reference in New Issue
Block a user