@openfairygui/functions 0.2.0-alpha.34 → 0.2.0-alpha.36

package/src/adapters/web/raster.ts

@@ -6,6 +6,7 @@ import type {
 	PublishFileSystem,
 	PublishSourceFileSystem,
 } from '../../publish/contracts.js';
+import { XMLParser, XMLValidator } from 'fast-xml-parser';
 
 type BrowserCanvas = OffscreenCanvas | HTMLCanvasElement;
 
@@ -39,6 +40,137 @@ interface BrowserRaster {
 	height: number;
 }
 
+const MAX_SVG_SOURCE_BYTES = 8 * 1024 * 1024;
+const MAX_SVG_DIMENSION = 16_384;
+const MAX_SVG_PIXELS = 64 * 1024 * 1024;
+const MAX_SVG_NODES = 50_000;
+const UNSAFE_SVG_ELEMENTS = new Set([
+	'a',
+	'animate',
+	'animatecolor',
+	'animatemotion',
+	'animatetransform',
+	'audio',
+	'canvas',
+	'discard',
+	'embed',
+	'feimage',
+	'foreignobject',
+	'iframe',
+	'image',
+	'object',
+	'script',
+	'set',
+	'style',
+	'video',
+]);
+
+type ParsedSvgEntry = Record<string, unknown> & { ':@'?: Record<string, unknown> };
+
+function unsafeSvg(message: string): never {
+	throw new Error(`publishBrowser: unsafe SVG input (${message}).`);
+}
+
+function svgLocalName(name: string): string {
+	return name.split(':').at(-1)!.toLowerCase();
+}
+
+function parseSvgLength(value: unknown, name: string): number | undefined {
+	if (value === undefined) return undefined;
+	const match = String(value).match(/^\s*(?:\d+(?:\.\d+)?|\.\d+)(?:px)?\s*$/iu);
+	if (!match) unsafeSvg(`${name} must use a finite pixel value`);
+	const parsed = Number.parseFloat(match[0]);
+	if (!Number.isFinite(parsed) || parsed <= 0 || parsed > MAX_SVG_DIMENSION) {
+		unsafeSvg(`${name} exceeds the supported dimensions`);
+	}
+	return parsed;
+}
+
+function validateSvgAttribute(name: string, value: unknown): void {
+	const normalizedName = name.toLowerCase();
+	if (normalizedName === 'xmlns' || normalizedName.startsWith('xmlns:')) return;
+	const localName = svgLocalName(name);
+	const text = String(value);
+	if (localName.startsWith('on')) unsafeSvg(`event attribute "${name}" is not allowed`);
+	if (localName === 'style' || localName === 'src') unsafeSvg(`attribute "${name}" is not allowed`);
+	if (localName === 'href' && !/^#[A-Za-z_][\w:.-]*$/u.test(text)) {
+		unsafeSvg(`external reference in "${name}" is not allowed`);
+	}
+	if (/(?:^|[\s("'=])(?:https?:|file:|javascript:|data:|\/\/)/iu.test(text)) {
+		unsafeSvg(`external URL in "${name}" is not allowed`);
+	}
+	for (const match of text.matchAll(/url\s*\(([^)]*)\)/giu)) {
+		const reference = (match[1] ?? '').trim().replace(/^(['"])(.*)\1$/u, '$2');
+		if (!/^#[A-Za-z_][\w:.-]*$/u.test(reference)) unsafeSvg(`external url() in "${name}" is not allowed`);
+	}
+}
+
+function visitSvgEntry(entry: ParsedSvgEntry): void {
+	const pending = [entry];
+	let nodeCount = 0;
+	while (pending.length > 0) {
+		const current = pending.pop()!;
+		for (const [name, value] of Object.entries(current)) {
+			if (name === ':@' || name.startsWith('#') || name.startsWith('?')) continue;
+			if (++nodeCount > MAX_SVG_NODES) unsafeSvg('node count exceeds the supported limit');
+			const localName = svgLocalName(name);
+			if (UNSAFE_SVG_ELEMENTS.has(localName)) unsafeSvg(`element <${name}> is not allowed`);
+			for (const [attributeName, attributeValue] of Object.entries(current[':@'] ?? {})) {
+				validateSvgAttribute(attributeName, attributeValue);
+			}
+			if (Array.isArray(value)) {
+				for (const child of value) {
+					if (child && typeof child === 'object' && !Array.isArray(child)) pending.push(child as ParsedSvgEntry);
+				}
+			}
+		}
+	}
+}
+
+function validateSvg(bytes: Uint8Array): void {
+	if (bytes.byteLength === 0 || bytes.byteLength > MAX_SVG_SOURCE_BYTES) unsafeSvg('source size is unsupported');
+	let source: string;
+	try {
+		source = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+	} catch {
+		unsafeSvg('source is not valid UTF-8');
+	}
+	if (/<!\s*(?:doctype|entity)\b|<\?xml-stylesheet\b/iu.test(source)) unsafeSvg('DTD, entities, and stylesheets are not allowed');
+	if (XMLValidator.validate(source, { allowBooleanAttributes: false }) !== true) unsafeSvg('source is not well-formed XML');
+	const parsed = new XMLParser({
+		preserveOrder: true,
+		ignoreAttributes: false,
+		attributeNamePrefix: '',
+		parseAttributeValue: false,
+		parseTagValue: false,
+		processEntities: false,
+		trimValues: false,
+	}).parse(source) as ParsedSvgEntry[];
+	const roots = parsed.flatMap((entry) => Object.keys(entry)
+		.filter((name) => name !== ':@' && !name.startsWith('#') && !name.startsWith('?'))
+		.map((name) => ({ entry, name })));
+	if (roots.length !== 1 || svgLocalName(roots[0]!.name) !== 'svg') unsafeSvg('a single <svg> root is required');
+	const root = roots[0]!.entry;
+	visitSvgEntry(root);
+	const attributes = root[':@'] ?? {};
+	const width = parseSvgLength(attributes.width, 'width');
+	const height = parseSvgLength(attributes.height, 'height');
+	let viewBoxWidth: number | undefined;
+	let viewBoxHeight: number | undefined;
+	if (attributes.viewBox !== undefined) {
+		const viewBox = String(attributes.viewBox).trim().split(/[\s,]+/u).map(Number);
+		if (viewBox.length !== 4 || viewBox.some((value) => !Number.isFinite(value)) || viewBox[2]! <= 0 || viewBox[3]! <= 0) {
+			unsafeSvg('viewBox must contain four finite values with positive dimensions');
+		}
+		viewBoxWidth = viewBox[2];
+		viewBoxHeight = viewBox[3];
+		if (viewBoxWidth > MAX_SVG_DIMENSION || viewBoxHeight > MAX_SVG_DIMENSION) unsafeSvg('viewBox exceeds the supported dimensions');
+	}
+	const rasterWidth = width ?? viewBoxWidth ?? 300;
+	const rasterHeight = height ?? viewBoxHeight ?? 150;
+	if (rasterWidth * rasterHeight > MAX_SVG_PIXELS) unsafeSvg('pixel count exceeds the supported limit');
+}
+
 function getBrowserContext(canvas: BrowserCanvas): BrowserContext {
 	const context = canvas.getContext('2d');
 	if (!context) throw new Error('publishBrowser: a 2D canvas context is unavailable.');
@@ -115,7 +247,15 @@ async function decodeRaster(bytes: Uint8Array, mimeType: string): Promise<Browse
 		throw new Error('publishBrowser: createImageBitmap is required for atlas PNG generation.');
 	}
 	const copy = bytes.slice();
-	const bitmap = await createImageBitmap(new Blob([copy.buffer as ArrayBuffer], { type: mimeType }));
+	if (mimeType === 'image/svg+xml') validateSvg(copy);
+	const blob = new Blob([copy.buffer as ArrayBuffer], { type: mimeType });
+	let bitmap: ImageBitmap;
+	try {
+		bitmap = await createImageBitmap(blob);
+	} catch (error) {
+		if (mimeType !== 'image/svg+xml') throw error;
+		return decodeSvgWithDom(blob);
+	}
 	try {
 		const raster = createRaster(bitmap.width, bitmap.height);
 		getBrowserContext(raster.canvas).drawImage(bitmap, 0, 0);
@@ -125,6 +265,36 @@ async function decodeRaster(bytes: Uint8Array, mimeType: string): Promise<Browse
 	}
 }
 
+async function decodeSvgWithDom(blob: Blob): Promise<BrowserRaster> {
+	if (typeof globalThis.Image !== 'function'
+		|| typeof globalThis.URL?.createObjectURL !== 'function'
+		|| typeof globalThis.URL?.revokeObjectURL !== 'function'
+	) {
+		throw new Error('publishBrowser: createImageBitmap rejected SVG and DOM image decoding is unavailable.');
+	}
+	const url = globalThis.URL.createObjectURL(blob);
+	try {
+		const image = new globalThis.Image();
+		await new Promise<void>((resolve, reject) => {
+			image.onload = () => resolve();
+			image.onerror = () => reject(new Error('publishBrowser: DOM image decoding failed for SVG.'));
+			image.src = url;
+		});
+		const width = image.naturalWidth || image.width;
+		const height = image.naturalHeight || image.height;
+		if (!Number.isFinite(width) || !Number.isFinite(height)
+			|| width <= 0 || height <= 0
+			|| width > MAX_SVG_DIMENSION || height > MAX_SVG_DIMENSION
+			|| width * height > MAX_SVG_PIXELS
+		) unsafeSvg('decoded dimensions exceed the supported limit');
+		const raster = createRaster(width, height);
+		getBrowserContext(raster.canvas).drawImage(image, 0, 0);
+		return raster;
+	} finally {
+		globalThis.URL.revokeObjectURL(url);
+	}
+}
+
 class BrowserImagePipeline implements AtlasRasterPipeline {
 	private rawOutput = false;
 

package/src/atlas/inputs.ts

@@ -21,7 +21,7 @@ import {
 } from '../publish/package-context.js';
 import type { ExtrasMap } from '../shared-types.js';
 import { parseFnt } from './font.js';
-import { extractJtaFrames } from './jta.js';
+import { prepareJtaForPublish, type PreparedJtaData } from './jta.js';
 
 /** Trim info for a single image. */
 interface TrimInfo {
@@ -181,6 +181,36 @@ export interface PagedAtlasGroup {
 	inputs: InputItem[];
 }
 
+export function resolveMovieClipSourcePath(resource: MovieClipResource, pkg: Package, basePath: string): string {
+	const fileName = `${resource.getName()}.jta`;
+	const resourcePath = resource.getPath() ?? '/';
+	return `${basePath}/${pkg.getName()}${resourcePath}${fileName}`;
+}
+
+export async function prepareMovieClipResource(
+	resource: MovieClipResource,
+	pkg: Package,
+	encoder: AtlasRasterBackend | undefined,
+	basePath: string,
+	readFileRaw: (path: string) => Promise<Uint8Array>,
+): Promise<PreparedJtaData> {
+	const filePath = resolveMovieClipSourcePath(resource, pkg, basePath);
+	let raw: Uint8Array;
+	try {
+		raw = await readFileRaw(filePath);
+	} catch {
+		throw new Error(`atlas: Could not read MovieClip "${filePath}".`);
+	}
+
+	try {
+		return await prepareJtaForPublish(raw, encoder, filePath);
+	} catch (error) {
+		if (error instanceof Error && error.message.startsWith('atlas:')) throw error;
+		const detail = error instanceof Error ? ` ${error.message}` : '';
+		throw new Error(`atlas: Could not parse MovieClip "${filePath}".${detail}`);
+	}
+}
+
 /** Collect a single ImageResource into the inputs array. */
 export async function collectImage(
 	resource: ImageResource,
@@ -216,9 +246,12 @@ export async function collectImage(
 					.toBuffer();
 				sourceHasAlpha = true;
 			}
-		} catch {
+		} catch (error) {
 			if (options.strictOutput) {
-				throw new Error(`atlas: Could not read image "${filePath}".`);
+				const detail = error instanceof Error && error.message.startsWith('publishBrowser:')
+					? ` ${error.message}`
+					: '';
+				throw new Error(`atlas: Could not read image "${filePath}".${detail}`);
 			}
 			if (origW === 0 || origH === 0) {
 				logger.warn(`atlas: Could not read image "${filePath}", skipping.`);
@@ -285,130 +318,62 @@ export async function collectMovieClipFrames(
 	}
 
 	const mcId = resource.getId();
-	const mcName = resource.getName() + '.jta';
-	const mcPath = resource.getPath() ?? '/';
-	const filePath = `${options.basePath}/${pkg.getName()}${mcPath}${mcName}`;
+	const filePath = resolveMovieClipSourcePath(resource, pkg, options.basePath);
 
 	try {
-		const raw = await options.readFileRaw(filePath);
-		const jta = extractJtaFrames(raw);
-		if (jta.frames.length === 0) return;
-
-		const frameMetas = jta.meta?.frames ?? [];
+		const jta =
+			options.preparedMovieClips?.get(resource) ??
+			(await prepareMovieClipResource(resource, pkg, encoder, options.basePath, options.readFileRaw));
 		for (const frame of resource.listFrames()) {
 			resource.removeFrame(frame);
 		}
 		resource
-			.setInterval(jta.meta?.interval ?? 100)
-			.setSwing(jta.meta?.swing ?? false)
-			.setRepeatDelay(jta.meta?.repeatDelay ?? 0);
-
-		if (frameMetas.length > 0) {
-			const firstFrameIndexByTextureIndex = new Map<number, number>();
-			for (let frameIndex = 0; frameIndex < frameMetas.length; frameIndex += 1) {
-				const meta = frameMetas[frameIndex];
-				const textureIndex = Number.isFinite(meta.textureIndex) ? meta.textureIndex : frameIndex;
-				if (!firstFrameIndexByTextureIndex.has(textureIndex)) {
-					firstFrameIndexByTextureIndex.set(textureIndex, frameIndex);
-				}
-			}
-
-			const spriteIdByTextureIndex = new Map<number, string>();
-			for (let textureIndex = 0; textureIndex < jta.frames.length; textureIndex += 1) {
-				const exportFrameIndex = firstFrameIndexByTextureIndex.get(textureIndex);
-				if (exportFrameIndex === undefined) continue;
-				const itemId = `${mcId}_${exportFrameIndex}`;
-			const input = await createMovieClipFrameInput(
-				jta.frames[textureIndex],
-				itemId,
+			.setInterval(jta.meta.interval)
+			.setSwing(jta.meta.swing)
+			.setRepeatDelay(jta.meta.repeatDelay);
+		const spriteIdByTextureIndex = new Map<number, string>();
+		for (const texture of jta.referencedTextures) {
+			if (texture.width <= 0 || texture.height <= 0) continue;
+			const itemId = `${mcId}_${texture.firstFrameIndex}`;
+			inputs.push({
+				id: itemId,
+				width: texture.width,
+				height: texture.height,
+				originalWidth: texture.width,
+				originalHeight: texture.height,
+				offsetX: 0,
+				offsetY: 0,
 				resource,
-				encoder,
-				options.strictOutput,
-			);
-				if (!input) continue;
-				inputs.push(input);
-				spriteIdByTextureIndex.set(textureIndex, itemId);
-			}
+				trimBuffer: texture.buffer,
+				sourceKind: 'movieclip-frame',
+			});
+			spriteIdByTextureIndex.set(texture.textureIndex, itemId);
+		}
 
-			for (let frameIndex = 0; frameIndex < frameMetas.length; frameIndex += 1) {
-				const meta = frameMetas[frameIndex];
-				const textureIndex = Number.isFinite(meta.textureIndex) ? meta.textureIndex : frameIndex;
-				const frame = doc.createMovieFrame(`${mcId}_${frameIndex}`);
-				frame
-					.setRectX(meta.offsetX)
-					.setRectY(meta.offsetY)
-					.setRectWidth(meta.width)
-					.setRectHeight(meta.height)
-					.setAddDelay(meta.addDelay)
-					.setSpriteId(spriteIdByTextureIndex.get(textureIndex) ?? '');
-				resource.addFrame(frame);
-			}
-		} else {
-			for (let frameIndex = 0; frameIndex < jta.frames.length; frameIndex += 1) {
-				const itemId = `${mcId}_${frameIndex}`;
-				const input = await createMovieClipFrameInput(
-					jta.frames[frameIndex],
-					itemId,
-					resource,
-					encoder,
-					options.strictOutput,
-				);
-				if (!input) continue;
-				inputs.push(input);
-				const frame = doc.createMovieFrame(itemId);
-				frame
-					.setRectX(0)
-					.setRectY(0)
-					.setRectWidth(input.originalWidth)
-					.setRectHeight(input.originalHeight)
-					.setAddDelay(0)
-					.setSpriteId(itemId);
-				resource.addFrame(frame);
-			}
+		for (let frameIndex = 0; frameIndex < jta.meta.frames.length; frameIndex += 1) {
+			const meta = jta.meta.frames[frameIndex]!;
+			const frame = doc.createMovieFrame(`${mcId}_${frameIndex}`);
+			frame
+				.setRectX(meta.offsetX)
+				.setRectY(meta.offsetY)
+				.setRectWidth(meta.width)
+				.setRectHeight(meta.height)
+				.setAddDelay(meta.addDelay)
+				.setSpriteId(meta.textureIndex === -1 ? '' : (spriteIdByTextureIndex.get(meta.textureIndex) ?? ''));
+			resource.addFrame(frame);
 		}
 
-		if ((jta.meta?.width ?? 0) > 0 && (jta.meta?.height ?? 0) > 0) {
-			resource.setWidth(jta.meta?.width ?? 0);
-			resource.setHeight(jta.meta?.height ?? 0);
+		if (jta.meta.width > 0 && jta.meta.height > 0) {
+			resource.setWidth(jta.meta.width);
+			resource.setHeight(jta.meta.height);
 		}
-	} catch {
-		const message = `atlas: Could not parse MovieClip "${filePath}".`;
-		if (options.strictOutput) throw new Error(message);
+	} catch (error) {
+		const message = error instanceof Error ? error.message : `atlas: Could not parse MovieClip "${filePath}".`;
+		if (options.strictOutput) throw error;
 		logger.warn(`${message} Skipping frames.`);
 	}
 }
 
-async function createMovieClipFrameInput(
-	buffer: Uint8Array,
-	itemId: string,
-	resource: MovieClipResource,
-	encoder: AtlasRasterBackend | undefined,
-	strictOutput: boolean,
-): Promise<InputItem | null> {
-	if (!encoder || buffer.length === 0) return null;
-	try {
-		const meta = await encoder(buffer).metadata();
-		const width = meta.width ?? 0;
-		const height = meta.height ?? 0;
-		if (width <= 0 || height <= 0) return null;
-		return {
-			id: itemId,
-			width,
-			height,
-			originalWidth: width,
-			originalHeight: height,
-			offsetX: 0,
-			offsetY: 0,
-			resource,
-			trimBuffer: buffer,
-			sourceKind: 'movieclip-frame',
-		};
-	} catch {
-		if (strictOutput) throw new Error(`atlas: Could not decode MovieClip frame "${itemId}".`);
-		return null;
-	}
-}
-
 /** Collect a Bitmap Font's texture image, packed under the font's ID. */
 export async function collectFontTexture(
 	doc: Document,