diff --git a/craft/src/components/basic/Logo.tsx b/craft/src/components/basic/Logo.tsx index 429f11e..ef34a3d 100644 --- a/craft/src/components/basic/Logo.tsx +++ b/craft/src/components/basic/Logo.tsx @@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react'; import { useNode, UserComponent } from '@craftjs/core'; import { cssPropsToString } from '../../utils/style-helpers'; import { useSiteDesign } from '../../state/SiteDesignContext'; -import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape'; +import { escapeHtml, escapeAttr, safeUrl, safeImageUrl } from '../../utils/escape'; /* ---------- Types ---------- */ @@ -104,7 +104,7 @@ Logo.craft = { let innerHtml: string; if (props.type === 'image' && props.imageSrc) { const imgStyle = cssPropsToString({ width: props.imageWidth || '120px', height: 'auto', display: 'block' }); - innerHtml = `${escapeAttr(props.text || 'Logo')}`; + innerHtml = `${escapeAttr(props.text || 'Logo')}`; } else { const spanStyle = cssPropsToString({ fontWeight: props.fontWeight || '700', diff --git a/craft/src/components/basic/Navbar.tsx b/craft/src/components/basic/Navbar.tsx index 7eaf233..5d1b69e 100644 --- a/craft/src/components/basic/Navbar.tsx +++ b/craft/src/components/basic/Navbar.tsx @@ -2,7 +2,7 @@ import React, { CSSProperties, useState } from 'react'; import { useNode, UserComponent } from '@craftjs/core'; import { cssPropsToString } from '../../utils/style-helpers'; import { useSiteDesign } from '../../state/SiteDesignContext'; -import { escapeHtml, escapeAttr, safeUrl, cssValue, scopeId } from '../../utils/escape'; +import { escapeHtml, escapeAttr, safeUrl, safeImageUrl, cssValue, scopeId } from '../../utils/escape'; /* ---------- Types ---------- */ @@ -252,7 +252,7 @@ Navbar.craft = { let logoHtml: string; if (props.logoType === 'image' && props.logoImage) { const imgStyle = cssPropsToString({ width: props.logoWidth || '120px', height: 'auto', display: 'block' }); - logoHtml = `${escapeAttr(props.logoText || 'Logo')}`; + logoHtml = `${escapeAttr(props.logoText || 'Logo')}`; } else { const logoStyle = cssPropsToString({ fontWeight: '700', diff --git a/craft/src/components/media/ImageBlock.tsx b/craft/src/components/media/ImageBlock.tsx index 050ee41..1320790 100644 --- a/craft/src/components/media/ImageBlock.tsx +++ b/craft/src/components/media/ImageBlock.tsx @@ -1,7 +1,7 @@ import React, { CSSProperties, useCallback, useRef } from 'react'; import { useNode, UserComponent } from '@craftjs/core'; import { cssPropsToString } from '../../utils/style-helpers'; -import { escapeAttr, safeUrl } from '../../utils/escape'; +import { escapeAttr, safeImageUrl } from '../../utils/escape'; export const PLACEHOLDER_SRC = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f1f5f9'/%3E%3Cstop offset='100%25' stop-color='%23e2e8f0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23bg)' width='400' height='300' rx='12'/%3E%3Crect x='2' y='2' width='396' height='296' rx='10' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-dasharray='8 4'/%3E%3Cg transform='translate(200,110)'%3E%3Crect x='-28' y='-28' width='56' height='56' rx='12' fill='%23cbd5e1' opacity='0.5'/%3E%3Cpath d='M-12 8 L-4 -2 L2 4 L8 -6 L16 8Z' fill='%2394a3b8'/%3E%3Ccircle cx='-6' cy='-10' r='5' fill='%2394a3b8'/%3E%3C/g%3E%3Ctext x='200' y='160' text-anchor='middle' fill='%2364748b' font-family='Inter,sans-serif' font-size='15' font-weight='500'%3EDrop image here%3C/text%3E%3Ctext x='200' y='182' text-anchor='middle' fill='%2394a3b8' font-family='Inter,sans-serif' font-size='12'%3Eor click to upload%3C/text%3E%3C/svg%3E"; @@ -95,5 +95,5 @@ ImageBlock.craft = { } const s = cssPropsToString({ display: 'block', maxWidth: '100%', ...props.style }); const alt = props.alt ? ` alt="${escapeAttr(props.alt)}"` : ' alt=""'; - return { html: `` }; + return { html: `` }; }; diff --git a/craft/src/components/sections/Gallery.toHtml.test.ts b/craft/src/components/sections/Gallery.toHtml.test.ts index 1f55cbb..664ee5b 100644 --- a/craft/src/components/sections/Gallery.toHtml.test.ts +++ b/craft/src/components/sections/Gallery.toHtml.test.ts @@ -94,6 +94,32 @@ describe('Gallery.toHtml deterministic + unique scope ids (thread node id, no Ma }); }); +describe('Gallery.toHtml default SVG placeholder images survive export (Bug 2 regression)', () => { + test('a default data:image/svg+xml image emits a non-empty img src, not src=""', () => { + const { html } = toHtml({}, ''); // no images prop -> component default SVG placeholders + expect(html).not.toContain('src=""'); + expect(html).toMatch(/src="data:image\/svg\+xml[^"]*"/); + }); + + test('an explicit data:image/svg+xml gallery image src is preserved (not stripped to empty)', () => { + const svg = 'data:image/svg+xml,%3Csvg%2F%3E'; + const { html } = toHtml({ images: [{ src: svg, alt: 'a' }] }, ''); + expect(html).toContain(`src="${svg}"`); + }); + + test('lightbox data-lb-src also preserves data:image/svg+xml (still an image context)', () => { + const svg = 'data:image/svg+xml,%3Csvg%2F%3E'; + const { html } = toHtml({ images: [{ src: svg, alt: 'a' }], lightbox: true }, ''); + expect(html).toContain(`data-lb-src="${svg}"`); + }); + + test('a javascript: gallery image src still yields an empty src (safeImageUrl still blocks it)', () => { + const { html } = toHtml({ images: [{ src: 'javascript:alert(1)', alt: 'a' }] }, ''); + expect(html).toContain('src=""'); + expect(html).not.toContain('javascript:'); + }); +}); + describe('Gallery.toHtml lightbox focus management (M-2)', () => { const props = { images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }; diff --git a/craft/src/components/sections/Gallery.tsx b/craft/src/components/sections/Gallery.tsx index 035d699..f30e7ab 100644 --- a/craft/src/components/sections/Gallery.tsx +++ b/craft/src/components/sections/Gallery.tsx @@ -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 ` - ${escapeAttr(img.alt)} + ${escapeAttr(img.alt)} ${caption} `; }).join('\n '); diff --git a/craft/src/utils/escape.test.ts b/craft/src/utils/escape.test.ts index 5a93970..b8763ab 100644 --- a/craft/src/utils/escape.test.ts +++ b/craft/src/utils/escape.test.ts @@ -1,5 +1,5 @@ import { describe, test, expect } from 'vitest'; -import { escapeHtml, escapeAttr, safeUrl, stableHash, scopeId, sanitizeFormMethod, sanitizeInputType } from './escape'; +import { escapeHtml, escapeAttr, safeUrl, safeImageUrl, stableHash, scopeId, sanitizeFormMethod, sanitizeInputType } from './escape'; describe('escapeHtml', () => { test('escapes &, <, >, "', () => { @@ -112,6 +112,64 @@ describe('safeUrl', () => { }); }); +describe('safeImageUrl (Bug 2: image-context sink -- data:image/svg+xml is safe as an /CSS url() target)', () => { + test('allows data:image/svg+xml (a raw, non-base64 SVG data URI, as Gallery/ImageBlock placeholders use)', () => { + const s = 'data:image/svg+xml,'; + expect(safeImageUrl(s)).toBe(s); + }); + + test('allows data:image/svg+xml;base64 variant', () => { + const s = 'data:image/svg+xml;base64,PHN2Zy8+'; + expect(safeImageUrl(s)).toBe(s); + }); + + test('allows other data:image/* types unchanged', () => { + expect(safeImageUrl('data:image/png;base64,x')).toBe('data:image/png;base64,x'); + expect(safeImageUrl('data:image/jpeg;base64,x')).toBe('data:image/jpeg;base64,x'); + expect(safeImageUrl('data:image/webp;base64,x')).toBe('data:image/webp;base64,x'); + expect(safeImageUrl('data:image/gif;base64,x')).toBe('data:image/gif;base64,x'); + }); + + test('still blocks javascript: scheme', () => { + expect(safeImageUrl('javascript:alert(1)')).toBe(''); + }); + + test('still blocks vbscript: scheme', () => { + expect(safeImageUrl('vbscript:msgbox(1)')).toBe(''); + }); + + test('still blocks data:text/html', () => { + expect(safeImageUrl('data:text/html,x')).toBe(''); + }); + + test('still blocks non-image data: types generally (e.g. data:application/...)', () => { + expect(safeImageUrl('data:application/javascript,alert(1)')).toBe(''); + }); + + test('blocks obfuscated (whitespace/case) javascript: scheme, same as safeUrl', () => { + expect(safeImageUrl(' JavaScript:alert(1)')).toBe(''); + expect(safeImageUrl('java\tscript:alert(1)')).toBe(''); + expect(safeImageUrl('javascript:alert(1)')).toBe(''); + }); + + test('allows ordinary http(s)/relative urls unchanged, same as safeUrl', () => { + expect(safeImageUrl('https://example.com/photo.jpg')).toBe('https://example.com/photo.jpg'); + expect(safeImageUrl('/assets/photo.jpg')).toBe('/assets/photo.jpg'); + expect(safeImageUrl('')).toBe(''); + }); + + test('coerces non-string to empty string', () => { + expect(safeImageUrl(null as any)).toBe(''); + expect(safeImageUrl(undefined as any)).toBe(''); + }); +}); + +describe('safeUrl still blocks data:image/svg+xml (href/iframe/navigation context unchanged by safeImageUrl addition)', () => { + test('safeUrl(data:image/svg+xml,...) is still blocked', () => { + expect(safeUrl('data:image/svg+xml,')).toBe(''); + }); +}); + describe('stableHash', () => { test('same input always produces the same output', () => { expect(stableHash('hello')).toBe(stableHash('hello')); diff --git a/craft/src/utils/escape.ts b/craft/src/utils/escape.ts index 39bd953..f114c8e 100644 --- a/craft/src/utils/escape.ts +++ b/craft/src/utils/escape.ts @@ -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 (``, CSS + * `url(...)` backgrounds). `data:image/svg+xml` is safe here -- loaded as an + * image, an SVG is rasterized and never executes an inline