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,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 <img>/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,<svg/>';
|
||||
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,<svg onload=alert(1)>')).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('stableHash', () => {
|
||||
test('same input always produces the same output', () => {
|
||||
expect(stableHash('hello')).toBe(stableHash('hello'));
|
||||
|
||||
Reference in New Issue
Block a user