fix: improve Blueprint asset handling

Author: jstarpl

meteor/server/api/blueprints/api.ts

@@ -112,23 +112,32 @@ export async function uploadBlueprintAsset(cred: RequestCredentials, fileId: str
 	assertConnectionHasOneOfPermissions(cred, ...PERMISSIONS_FOR_MANAGE_BLUEPRINTS)
 
 	const storePath = getSystemStorePath()
+	const assetsDir = path.resolve(storePath, 'assets') + path.sep
+	const assetPath = path.resolve(path.join(assetsDir, fileId))
+	if (!assetPath.startsWith(assetsDir)) {
+		throw new Error('Asset name outside of asset storage path')
+	}
 
 	// TODO: add access control here
 	const data = Buffer.from(body, 'base64')
-	const parsedPath = path.parse(fileId)
-	logger.info(
-		`Write ${data.length} bytes to ${path.join(storePath, fileId)} (storePath: ${storePath}, fileId: ${fileId})`
-	)
+	logger.info(`Write ${data.length} bytes to ${assetPath} (storePath: ${storePath}, fileId: ${fileId})`)
 
-	await fsp.mkdir(path.join(storePath, parsedPath.dir), { recursive: true })
-	await fsp.writeFile(path.join(storePath, fileId), data)
+	const assetDirPath = path.dirname(assetPath)
+
+	await fsp.mkdir(assetDirPath, { recursive: true })
+	await fsp.writeFile(assetPath, data)
 }
 export function retrieveBlueprintAsset(_cred: RequestCredentials, fileId: string): ReadStream {
 	check(fileId, String)
 
 	const storePath = getSystemStorePath()
+	const assetsDir = path.resolve(storePath, 'assets') + path.sep
+	const assetPath = path.resolve(path.join(assetsDir, fileId))
+	if (!assetPath.startsWith(assetsDir)) {
+		throw new Error('Requested asset outside of asset storage path')
+	}
 
-	return createReadStream(path.join(storePath, fileId))
+	return createReadStream(assetPath)
 }
 /** Only to be called from internal functions */
 export async function internalUploadBlueprint(

meteor/server/api/blueprints/http.ts

@@ -179,12 +179,12 @@ blueprintsRouter.post(
 	}
 )
 
-blueprintsRouter.get('/assets/*splat', async (ctx) => {
+blueprintsRouter.get('/assets/*fileId', async (ctx) => {
 	logger.debug(`Blueprint Asset: ${ctx.socket.remoteAddress} GET "${ctx.url}"`)
 	// TODO - some sort of user verification
 	// for now just check it's a png to prevent snapshots being downloaded
 
-	const filePath = ctx.params[0]
+	const filePath = ctx.params.fileId
 	if (filePath.match(/\.(png|svg|gif)?$/)) {
 		try {
 			const dataStream = retrieveBlueprintAsset(ctx, filePath)
@@ -200,8 +200,17 @@ blueprintsRouter.get('/assets/*splat', async (ctx) => {
 			ctx.set('Cache-Control', `public, max-age=${BLUEPRINT_ASSET_MAX_AGE}, immutable`)
 			ctx.statusCode = 200
 			ctx.body = dataStream
-		} catch {
-			ctx.statusCode = 404 // Probably
+		} catch (e) {
+			if (e instanceof Error && 'code' in e && e.code === 'ENOENT') {
+				logger.warn('Blueprint asset not found: ' + e)
+				ctx.statusCode = 404
+			} else if (e instanceof Error && e.message.includes('outside of asset storage path')) {
+				logger.warn('Blueprint asset path traversal attempt: ' + e)
+				ctx.statusCode = 400
+			} else {
+				logger.warn('Blueprint asset retrieval failed: ' + e)
+				ctx.statusCode = 500
+			}
 		}
 	} else {
 		ctx.statusCode = 403

packages/webui/src/client/lib/Components/BlueprintAssetIcon.tsx

@@ -6,7 +6,7 @@ const GLOBAL_BLUEPRINT_ASSET_CACHE: Record<string, string> = {}
 export function BlueprintAssetIcon({ src, className }: { src: string; className?: string }): JSX.Element | null {
 	const url = useMemo(() => {
 		if (src.startsWith('data:')) return new URL(src)
-		return new URL(createPrivateApiPath('/blueprints/assets/' + src), location.href)
+		return new URL(createPrivateApiPath('blueprints/assets/' + src), location.href)
 	}, [src])
 	const [svgAsset, setSvgAsset] = useState<string | null>(GLOBAL_BLUEPRINT_ASSET_CACHE[url.href] ?? null)
 

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContext.tsx

@@ -50,7 +50,7 @@ export function convertSourceLayerItemToPreview(
 				case PreviewType.BlueprintImage:
 					contents.push({
 						type: 'image',
-						src: createPrivateApiPath('/blueprints/assets/' + popupPreview.preview.image),
+						src: createPrivateApiPath('blueprints/assets/' + popupPreview.preview.image),
 					})
 					break
 				case PreviewType.HTML:
@@ -82,7 +82,7 @@ export function convertSourceLayerItemToPreview(
 					contents.push({
 						type: 'boxLayout',
 						boxSourceConfiguration: popupPreview.preview.boxes,
-						backgroundArtSrc: createPrivateApiPath('/blueprints/assets/' + popupPreview.preview.background),
+						backgroundArtSrc: createPrivateApiPath('blueprints/assets/' + popupPreview.preview.background),
 					})
 					break
 				case PreviewType.Table:
@@ -288,7 +288,7 @@ export function convertSourceLayerItemToPreview(
 		const content = item.content as TransitionContent
 		if (content.preview)
 			return {
-				contents: [{ type: 'image', src: createPrivateApiPath('/blueprints/assets/' + content.preview) }],
+				contents: [{ type: 'image', src: createPrivateApiPath('blueprints/assets/' + content.preview) }],
 				options: {},
 			}
 	}