fix: sanitize generated image filenames (#14160)

ascorbic · web-flow · commit d2e25c6e9d52 · 2025-07-30T13:41:42.000+01:00
* fix: sanitize generated image filenames

* Updtae test domain

* Infer size in test
diff --git a/.changeset/purple-peaches-allow.md b/.changeset/purple-peaches-allow.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a bug that meant some remote image URLs could cause invalid filenames to be used for processed images
diff --git a/packages/astro/src/assets/utils/transformToPath.ts b/packages/astro/src/assets/utils/transformToPath.ts
@@ -5,6 +5,10 @@ import { shorthash } from '../../runtime/server/shorthash.js';
 import type { ImageTransform } from '../types.js';
 import { isESMImportedImage } from './imageKind.js';
 
+// Taken from https://github.com/rollup/rollup/blob/a8647dac0fe46c86183be8596ef7de25bc5b4e4b/src/utils/sanitizeFileName.ts
+// eslint-disable-next-line no-control-regex
+const INVALID_CHAR_REGEX = /[\u0000-\u001F"#$%&*+,:;<=>?[\]^`{|}\u007F]/g;
+
 /**
  * Converts a file path and transformation properties of the transformation image service, into a formatted filename.
  *
@@ -33,12 +37,12 @@ export function propsToFilename(filePath: string, transform: ImageTransform, has
 	if (filePath.startsWith('data:')) {
 		filename = shorthash(filePath);
 	} else {
-		filename = basename(filename, ext);
+		filename = basename(filename, ext).replace(INVALID_CHAR_REGEX, '_');
 	}
 	const prefixDirname = isESMImportedImage(transform.src) ? dirname(filePath) : '';
 
 	let outputExt = transform.format ? `.${transform.format}` : ext;
-	return decodeURIComponent(`${prefixDirname}/${filename}_${hash}${outputExt}`);
+	return `${prefixDirname}/${filename}_${hash}${outputExt}`;
 }
 
 /**
diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js
@@ -904,7 +904,7 @@ describe('astro:image', () => {
 				root: './fixtures/core-image-ssg/',
 				image: {
 					service: testImageService(),
-					domains: ['astro.build', 'avatars.githubusercontent.com'],
+					domains: ['astro.build', 'avatars.githubusercontent.com', 'kaleidoscopic-biscotti-6fe98c.netlify.app'],
 				},
 			});
 			// Remove cache directory
@@ -953,6 +953,18 @@ describe('astro:image', () => {
 			assert.equal(data instanceof Buffer, true);
 		});
 
+		it('handles remote images with special characters', async () => {
+			const html = await fixture.readFile('/special-chars/index.html');
+			const $ = cheerio.load(html);
+			const $img = $('img');
+			assert.equal($img.length, 1);
+			const src = $img.attr('src');
+			// The filename should be encoded and sanitized
+			assert.ok(src.startsWith('/_astro/c_23'));
+			const data = await fixture.readFile(src, null);
+			assert.ok(data instanceof Buffer);
+		});
+
 		it('Picture component images are written', async () => {
 			const html = await fixture.readFile('/picturecomponent/index.html');
 			const $ = cheerio.load(html);
diff --git a/packages/astro/test/fixtures/core-image-ssg/src/pages/special-chars.astro b/packages/astro/test/fixtures/core-image-ssg/src/pages/special-chars.astro
@@ -0,0 +1,11 @@
+---
+import { Image } from 'astro:assets';
+---
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>Special Characters in Image Paths</title>
+</head>
+<body>
+	<Image src="https://kaleidoscopic-biscotti-6fe98c.netlify.app/c%2523.png" alt="C#" inferSize />
+</html>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'astro': patch
 +---
++
 +Fixes a bug that meant some remote image URLs could cause invalid filenames to be used for processed images