fix(assets): skip allowlist for data URIs, restore incorrectly modified tests

- Skip domain allowlist check for data: URIs (inline content, not remote fetches)
- Restore CSP-compliant position/style tests that were incorrectly rewritten
- Restore deleted format detection tests (SVG, data URI, extensionless URL)
- Add images.unsplash.com to Netlify missing-dimension fixture so MissingImageDimension fires before RemoteImageNotAllowed

Author: matthewp

packages/astro/src/assets/internal.ts

@@ -78,8 +78,13 @@ export async function getImage(
 		src: await resolveSrc(options.src),
 	};
 
-	// Check remote image allowlist for all remote images, not just inferSize
-	if (isRemoteImage(resolvedOptions.src) && isRemotePath(resolvedOptions.src)) {
+	// Check remote image allowlist for all remote images, not just inferSize.
+	// Skip data: URIs — they are inline content, not remote fetches.
+	if (
+		isRemoteImage(resolvedOptions.src) &&
+		isRemotePath(resolvedOptions.src) &&
+		!resolvedOptions.src.startsWith('data:')
+	) {
 		if (!isRemoteAllowed(resolvedOptions.src, imageConfig)) {
 			throw new AstroError({
 				...AstroErrorData.RemoteImageNotAllowed,

packages/astro/test/units/assets/getImage.test.ts

@@ -280,7 +280,7 @@ describe('getImage', () => {
 			assert.equal(result.attributes.position, undefined);
 		});
 
-		it('includes object-position in style attribute when position is provided', async () => {
+		it('does not add inline style for position (CSP compliance)', async () => {
 			const result = await renderImage({
 				src: 'https://example.com/photo.jpg',
 				width: 300,
@@ -290,10 +290,24 @@ describe('getImage', () => {
 				position: 'left top',
 			});
 
-			assert.match(result.attributes.style, /object-position:\s*left top/);
+			// Position should only live in the data attribute, not in inline styles
+			assert.equal(result.attributes['data-astro-image-pos'], 'left-top');
+			const style = result.attributes.style;
+			if (typeof style === 'string') {
+				assert.ok(
+					!style.includes('object-position'),
+					'inline style should not contain object-position',
+				);
+			} else if (typeof style === 'object' && style !== null) {
+				assert.equal(
+					'objectPosition' in style,
+					false,
+					'style object should not contain objectPosition',
+				);
+			}
 		});
 
-		it('merges position into existing style object without overwriting', async () => {
+		it('preserves user-provided style without injecting position', async () => {
 			const result = await renderImage({
 				src: 'https://example.com/photo.jpg',
 				width: 300,
@@ -304,15 +318,14 @@ describe('getImage', () => {
 				style: { color: 'red' },
 			});
 
-			assert.deepStrictEqual(result.attributes.style, {
-				color: 'red',
-				objectPosition: 'top right',
-			});
+			// User style should be preserved as-is, position only in data attribute
+			assert.equal(result.attributes['data-astro-image-pos'], 'top-right');
+			assert.deepStrictEqual(result.attributes.style, { color: 'red' });
 		});
 	});
 
 	describe('format', () => {
-		it('defaults to webp format', async () => {
+		it('defaults to webp for remote images with a non-svg extension', async () => {
 			const result = await renderImage({
 				src: 'https://example.com/photo.jpg',
 				width: 800,
@@ -324,6 +337,41 @@ describe('getImage', () => {
 			assert.equal(params.get('f'), 'webp');
 		});
 
+		it('defaults to svg for remote URLs ending in .svg so they pass through', async () => {
+			const result = await renderImage({
+				src: 'https://example.com/icon.svg',
+				width: 64,
+				height: 64,
+				alt: 'Format test',
+			});
+			const params = new URL(result.src, 'http://localhost').searchParams;
+			assert.equal(params.get('f'), 'svg');
+		});
+
+		it('defaults to svg for data:image/svg+xml so they pass through', async () => {
+			// Data URIs aren't in the test allowlist, so the URL is returned as-is by getURL — verify
+			// the resolved transform options instead.
+			const svg = 'data:image/svg+xml,%3Csvg/%3E';
+			const result = await renderImage({
+				src: svg,
+				width: 32,
+				height: 32,
+				alt: 'Format test',
+			});
+			assert.equal(result.options.format, 'svg');
+		});
+
+		it('omits format param for remote URLs without a detectable extension (resolved by /_image at request time)', async () => {
+			const result = await renderImage({
+				src: 'https://example.com/api/avatar',
+				width: 64,
+				height: 64,
+				alt: 'Format test',
+			});
+			const params = new URL(result.src, 'http://localhost').searchParams;
+			assert.equal(params.has('f'), false);
+		});
+
 		it('respects explicit format', async () => {
 			const result = await renderImage({
 				src: 'https://example.com/photo.jpg',

packages/integrations/netlify/test/static/fixtures/image-missing-dimension/astro.config.mjs

@@ -5,6 +5,7 @@ export default defineConfig({
   adapter: netlify(),
   output: 'static',
   image: {
+    domains: ['images.unsplash.com'],
     service: {
       entrypoint: 'astro/assets/services/sharp'
     }