Fix image-block placeholder (src="" override) + published Gallery/SVG regression (safeImageUrl) #5

2026-07-13T02:54:24Z

jknapp commented

2026-07-13 02:54:24 +00:00

Two confirmed bugs (Fable diagnosed the placeholder live in-editor):

Image placeholder broken — BlocksPanel created the Image block with an explicit src="", overriding the default-param PLACEHOLDER_SRC (defaults only apply on undefined) → <img src=""> broken icon. Long-standing. Fix: render guard src={src||PLACEHOLDER_SRC} + drop the src="" + ImageStylePanel falls back on clear.
Published Gallery images broken since 2026.07.22 — my M-5 change blocked data:image/svg+xml in safeUrl, which broke Galleries whose default images are SVG data URIs. Root fix: data:image/svg+xml is safe in <img>/CSS-url() (no script exec) but not as href/iframe targets. Added safeImageUrl (allows data:image/*) for image sinks (Gallery, ImageBlock, Logo/Navbar logo, FeaturesGrid, ContentSlider bg, cssValue url()); kept safeUrl (blocks data:svg) for href/iframe/action. Tightened the allowlist to require data:image/.

554 tests (from 549); adversarially reviewed (no bypass, no nav sink weakened).

🤖 Generated with Claude Code

Two confirmed bugs (Fable diagnosed the placeholder live in-editor): 1. **Image placeholder broken** — `BlocksPanel` created the Image block with an explicit `src=""`, overriding the default-param `PLACEHOLDER_SRC` (defaults only apply on `undefined`) → `<img src="">` broken icon. Long-standing. Fix: render guard `src={src||PLACEHOLDER_SRC}` + drop the `src=""` + ImageStylePanel falls back on clear. 2. **Published Gallery images broken since 2026.07.22** — my M-5 change blocked `data:image/svg+xml` in `safeUrl`, which broke Galleries whose default images are SVG data URIs. Root fix: `data:image/svg+xml` is safe in `<img>`/CSS-`url()` (no script exec) but not as href/iframe targets. Added `safeImageUrl` (allows `data:image/*`) for image sinks (Gallery, ImageBlock, Logo/Navbar logo, FeaturesGrid, ContentSlider bg, cssValue url()); kept `safeUrl` (blocks `data:svg`) for href/iframe/action. Tightened the allowlist to require `data:image/`. 554 tests (from 549); adversarially reviewed (no bypass, no nav sink weakened). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

jknapp added 3 commits 2026-07-13 02:54:24 +00:00

fix(builder): Image block placeholder no longer overridden by explicit src="" 802938ec1a

BlocksPanel dropped a new Image block with an explicit `src=""` prop, which
overrides ImageBlock's `src = PLACEHOLDER_SRC` default parameter (defaults
only apply when a prop is undefined, not when it's an empty string). Craft
then persisted `src:''`, and the canvas rendered a broken-image icon instead
of the placeholder.

- ImageBlock render now falls back to PLACEHOLDER_SRC whenever src is falsy
  (belt-and-braces: also recovers any legacy saved src:'' state).
- BlocksPanel no longer passes src="" when dropping a new Image block, so
  the craft default applies.
- ImageStylePanel now restores the placeholder (instead of blanking to '')
  when the URL field is cleared.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

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>

fix(builder): safeImageUrl for FeaturesGrid/ContentSlider image sinks + tighten data:image allowlist 621bb21d52

FeaturesGrid's <img src> and ContentSlider's CSS background-image url()
were still on safeUrl, which blocks data:image/svg+xml -- inconsistent
with other image sinks already swapped to safeImageUrl and a latent
regression for those two components. Swapped both to safeImageUrl;
left their navigation sinks (buttonUrl/buttonHref) on safeUrl.

Also tightened safeImageUrl's data:image allowlist check to require the
slash (dataimage/ not dataimage), so a bogus MIME like
data:imagehtml/... can no longer slip past the prefix check.

jknapp merged commit 1b12b79a0d into main

2026-07-13 02:54:24 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cloud-hosting-platform/site-builder#5