vinext 1.2.1 → 1.3.0

package/dist/shims/image-props.js

@@ -0,0 +1,323 @@
+import { getDeploymentId } from "../utils/deployment-id.js";
+import { hasRemoteMatch, isPrivateIp } from "./image-config.js";
+//#region src/shims/image-props.ts
+/**
+* Image config injected at build time via Vite define.
+* Serialized as JSON — parsed once at module level.
+*/
+const __imageRemotePatterns = (() => {
+	try {
+		return JSON.parse(process.env.__VINEXT_IMAGE_REMOTE_PATTERNS ?? "[]");
+	} catch {
+		return [];
+	}
+})();
+const __imageDomains = (() => {
+	try {
+		return JSON.parse(process.env.__VINEXT_IMAGE_DOMAINS ?? "[]");
+	} catch {
+		return [];
+	}
+})();
+const __hasImageConfig = __imageRemotePatterns.length > 0 || __imageDomains.length > 0;
+const __isDev = process.env.NODE_ENV !== "production";
+const __imageDeviceSizes = (() => {
+	try {
+		return JSON.parse(process.env.__VINEXT_IMAGE_DEVICE_SIZES ?? "[640,750,828,1080,1200,1920,2048,3840]");
+	} catch {
+		return [
+			640,
+			750,
+			828,
+			1080,
+			1200,
+			1920,
+			2048,
+			3840
+		];
+	}
+})();
+const __imageSizes = (() => {
+	try {
+		return JSON.parse(process.env.__VINEXT_IMAGE_SIZES ?? "[32,48,64,96,128,256,384]");
+	} catch {
+		return [
+			32,
+			48,
+			64,
+			96,
+			128,
+			256,
+			384
+		];
+	}
+})();
+/**
+* Whether dangerouslyAllowSVG is enabled in next.config.js.
+* When false (default), .svg sources auto-skip the optimization endpoint
+* and are served directly, matching Next.js behavior.
+* When true, .svg sources are routed through the optimizer (served as-is
+* with security headers).
+*/
+const __dangerouslyAllowSVG = process.env.__VINEXT_IMAGE_DANGEROUSLY_ALLOW_SVG === "true";
+/**
+* Whether dangerouslyAllowLocalIP is enabled in next.config.js.
+* When false (default), remote image URLs with literal private-IP hostnames
+* are blocked to mitigate SSRF risk.
+*/
+const __dangerouslyAllowLocalIP = process.env.__VINEXT_IMAGE_DANGEROUSLY_ALLOW_LOCAL_IP === "true";
+const __globallyUnoptimized = process.env.__VINEXT_IMAGE_UNOPTIMIZED === "true";
+/**
+* Validate that a remote URL is allowed by the configured remote patterns.
+* Returns true if the URL is allowed, false otherwise.
+*
+* When no remotePatterns/domains are configured, all remote URLs are allowed
+* (backwards-compatible — user hasn't opted into restriction).
+*
+* When patterns ARE configured, only matching URLs are allowed.
+* In development, non-matching URLs produce a console warning.
+* In production, non-matching URLs are blocked (src replaced with empty string).
+*
+* Private-IP hostnames are additionally rejected unless dangerouslyAllowLocalIP
+* is set, mirroring Next.js's fetchExternalImage guard.
+*/
+function validateRemoteUrl(src) {
+	let url;
+	try {
+		url = new URL(src, "http://n");
+	} catch {
+		return {
+			allowed: false,
+			reason: `Invalid URL: ${src}`
+		};
+	}
+	if (!__dangerouslyAllowLocalIP && isPrivateIp(url.hostname)) return {
+		allowed: false,
+		reason: `Image URL "${src}" resolved to private IP. If this is expected and you understand SSRF risk, use images.dangerouslyAllowLocalIP = true to continue.`
+	};
+	if (!__hasImageConfig) return { allowed: true };
+	if (hasRemoteMatch(__imageDomains, __imageRemotePatterns, url)) return { allowed: true };
+	return {
+		allowed: false,
+		reason: `Image URL "${src}" is not configured in images.remotePatterns or images.domains in next.config.js. See: https://nextjs.org/docs/messages/next-image-unconfigured-host`
+	};
+}
+/**
+* Sanitize a blurDataURL to prevent CSS injection.
+*
+* A crafted data URL containing `)` can break out of the `url()` CSS function,
+* allowing injection of arbitrary CSS properties or rules. Characters like `{`,
+* `}`, and `\` can also assist in crafting injection payloads.
+*
+* This validates the URL starts with `data:image/` and rejects characters that
+* could escape the `url()` context. Semicolons are allowed since they're part
+* of valid data URLs (`data:image/png;base64,...`) and harmless inside `url()`.
+*
+* Returns undefined for invalid URLs, which causes the blur placeholder to be
+* skipped gracefully.
+*/
+function sanitizeBlurDataURL(url) {
+	if (!url.startsWith("data:image/")) return void 0;
+	if (/[)(}{\\'"\n\r]/.test(url)) return void 0;
+	return url;
+}
+/**
+* Determine if a src is a remote URL (CDN-optimizable) or local.
+*/
+function isRemoteUrl(src) {
+	return src.startsWith("http://") || src.startsWith("https://") || src.startsWith("//");
+}
+function isSvgUrl(src) {
+	try {
+		return new URL(src, "http://vinext.local").pathname.toLowerCase().endsWith(".svg");
+	} catch {
+		return false;
+	}
+}
+function getFillStyle(style, backgroundStyle) {
+	return {
+		position: "absolute",
+		inset: 0,
+		width: "100%",
+		height: "100%",
+		objectFit: "cover",
+		...backgroundStyle,
+		...style
+	};
+}
+/**
+* Resolve src, width, height, blurDataURL from Image props (string or StaticImageData).
+* Shared by the Image component and getImageProps to keep behavior in sync.
+*/
+function resolveImageSource(v) {
+	const staticData = typeof v.src === "object" && "default" in v.src ? v.src.default : v.src;
+	const src = typeof staticData === "string" ? staticData : staticData.src;
+	const sourceWidth = v.width ?? (typeof staticData === "object" ? staticData.width : void 0);
+	const sourceHeight = v.height ?? (typeof staticData === "object" ? staticData.height : void 0);
+	return {
+		src,
+		width: typeof sourceWidth === "string" ? Number(sourceWidth) : sourceWidth,
+		height: typeof sourceHeight === "string" ? Number(sourceHeight) : sourceHeight,
+		blurDataURL: v.blurDataURL ?? (typeof staticData === "object" ? staticData.blurDataURL : void 0)
+	};
+}
+/**
+* Responsive image widths matching Next.js's device sizes config.
+* These are the breakpoints used for srcSet generation.
+* Configurable via `images.deviceSizes` in next.config.js.
+*/
+const RESPONSIVE_WIDTHS = [...__imageDeviceSizes].sort((left, right) => left - right);
+const ALL_IMAGE_WIDTHS = [...RESPONSIVE_WIDTHS, ...__imageSizes].sort((left, right) => left - right);
+function extractLocalDeploymentId(src) {
+	let deploymentId = getDeploymentId();
+	if (!src.startsWith("/") || src.startsWith("//")) return {
+		src,
+		deploymentId
+	};
+	const queryIndex = src.indexOf("?");
+	if (queryIndex === -1) return {
+		src,
+		deploymentId
+	};
+	const params = new URLSearchParams(src.slice(queryIndex + 1));
+	const sourceDeploymentId = params.get("dpl");
+	if (!sourceDeploymentId) return {
+		src,
+		deploymentId
+	};
+	deploymentId = sourceDeploymentId;
+	params.delete("dpl");
+	const remainingQuery = params.toString();
+	return {
+		src: src.slice(0, queryIndex) + (remainingQuery ? `?${remainingQuery}` : ""),
+		deploymentId
+	};
+}
+const __imageEndpoint = `${process.env.__NEXT_ROUTER_BASEPATH ?? ""}/_next/image${process.env.__VINEXT_TRAILING_SLASH === "true" ? "/" : ""}`;
+/**
+* Build a `/_next/image` optimization URL.
+*
+* In production (Cloudflare Workers), the worker intercepts this path and uses
+* the Images binding to resize/transcode on the fly. In dev, the Vite dev
+* server handles it as a passthrough (serves the original file).
+*/
+function imageOptimizationUrl(src, width, quality = 75) {
+	const source = extractLocalDeploymentId(src);
+	const deploymentQuery = source.src.startsWith("/") && source.deploymentId ? `&dpl=${source.deploymentId}` : "";
+	return `${__imageEndpoint}?url=${encodeURIComponent(source.src)}&w=${width}&q=${quality}${deploymentQuery}`;
+}
+/**
+* Generate a srcSet string for responsive images.
+*
+* Each width points to the `/_next/image` optimization endpoint so the
+* server can resize and transcode the image.
+*/
+function getImageWidths(width) {
+	return [...new Set([width, width * 2].map((targetWidth) => ALL_IMAGE_WIDTHS.find((configuredWidth) => configuredWidth >= targetWidth) ?? ALL_IMAGE_WIDTHS[ALL_IMAGE_WIDTHS.length - 1]))];
+}
+function generateImageAttributes(src, width, quality = 75, sizes) {
+	if (sizes) {
+		const viewportPercentages = Array.from(sizes.matchAll(/(^|\s)(1?\d?\d)vw/g), (match) => Number.parseInt(match[2], 10));
+		const minimumWidth = viewportPercentages.length > 0 ? RESPONSIVE_WIDTHS[0] * (Math.min(...viewportPercentages) * .01) : 0;
+		const candidates = ALL_IMAGE_WIDTHS.filter((candidateWidth) => candidateWidth >= minimumWidth);
+		return {
+			src: imageOptimizationUrl(src, candidates[candidates.length - 1], quality),
+			srcSet: candidates.map((candidateWidth) => `${imageOptimizationUrl(src, candidateWidth, quality)} ${candidateWidth}w`).join(", ")
+		};
+	}
+	const widths = getImageWidths(width);
+	return {
+		src: imageOptimizationUrl(src, widths[widths.length - 1], quality),
+		srcSet: widths.map((candidateWidth, index) => `${imageOptimizationUrl(src, candidateWidth, quality)} ${index + 1}x`).join(", ")
+	};
+}
+/**
+* getImageProps — for advanced use cases (picture elements, background images).
+* Returns the props that would be passed to the underlying <img> element.
+*/
+function getImageProps(props) {
+	const { src: srcProp, alt, width, height, fill, preload: _preload, priority, quality: _quality, placeholder, blurDataURL: blurDataURLProp, loader, sizes, className, style, onLoad: _onLoad, onLoadingComplete: _onLoadingComplete, unoptimized: _unoptimized, overrideSrc, loading, ...rest } = props;
+	const { src, width: imgWidth, height: imgHeight, blurDataURL: imgBlurDataURL } = resolveImageSource({
+		src: srcProp,
+		width,
+		height,
+		blurDataURL: blurDataURLProp
+	});
+	const shouldPreload = _preload === true || priority === true;
+	if (_unoptimized === true || __globallyUnoptimized) {
+		const renderedSrc = overrideSrc || src;
+		const sanitizedBlurURL = imgBlurDataURL ? sanitizeBlurDataURL(imgBlurDataURL) : void 0;
+		const blurStyle = placeholder === "blur" && sanitizedBlurURL ? {
+			backgroundImage: `url(${sanitizedBlurURL})`,
+			backgroundSize: "cover",
+			backgroundRepeat: "no-repeat",
+			backgroundPosition: "center"
+		} : void 0;
+		const imageProps = {
+			src: renderedSrc,
+			alt,
+			width: fill ? void 0 : imgWidth,
+			height: fill ? void 0 : imgHeight,
+			loading: priority ? "eager" : shouldPreload ? loading : loading ?? "lazy",
+			fetchPriority: priority ? "high" : void 0,
+			decoding: "async",
+			className,
+			style: fill ? getFillStyle(style, blurStyle) : {
+				...blurStyle,
+				...style
+			},
+			...rest,
+			sizes: sizes ?? (fill ? "100vw" : void 0),
+			srcSet: void 0
+		};
+		return { props: Object.assign(imageProps, { "data-nimg": fill ? "fill" : "1" }) };
+	}
+	let blockedInProd = false;
+	if (isRemoteUrl(src)) {
+		const validation = validateRemoteUrl(src);
+		if (!validation.allowed) {
+			if (__isDev) console.warn(`[next/image] ${validation.reason}`);
+			else {
+				console.error(`[next/image] ${validation.reason}`);
+				blockedInProd = true;
+			}
+		}
+	}
+	const imgQuality = typeof _quality === "string" ? Number(_quality) : _quality ?? 75;
+	const resolvedSrc = blockedInProd ? "" : loader ? loader({
+		src,
+		width: imgWidth ?? 0,
+		quality: imgQuality
+	}) : src;
+	const skipOpt = isSvgUrl(resolvedSrc) && !__dangerouslyAllowSVG || blockedInProd || !!loader || isRemoteUrl(resolvedSrc);
+	const optimizedAttributes = imgWidth && !fill && !skipOpt ? generateImageAttributes(resolvedSrc, imgWidth, imgQuality, sizes) : null;
+	const optimizedSrc = skipOpt ? resolvedSrc : optimizedAttributes ? optimizedAttributes.src : imageOptimizationUrl(resolvedSrc, RESPONSIVE_WIDTHS[0], imgQuality);
+	const srcSet = optimizedAttributes?.srcSet;
+	const sanitizedBlurURL = imgBlurDataURL ? sanitizeBlurDataURL(imgBlurDataURL) : void 0;
+	const blurStyle = placeholder === "blur" && sanitizedBlurURL ? {
+		backgroundImage: `url(${sanitizedBlurURL})`,
+		backgroundSize: "cover",
+		backgroundRepeat: "no-repeat",
+		backgroundPosition: "center"
+	} : void 0;
+	const imageProps = {
+		src: optimizedSrc,
+		alt,
+		width: fill ? void 0 : imgWidth,
+		height: fill ? void 0 : imgHeight,
+		loading: priority ? "eager" : shouldPreload ? loading : loading ?? "lazy",
+		fetchPriority: priority ? "high" : void 0,
+		decoding: "async",
+		srcSet,
+		sizes: sizes ?? (fill ? "100vw" : void 0),
+		className,
+		style: fill ? getFillStyle(style, blurStyle) : {
+			...blurStyle,
+			...style
+		},
+		...rest
+	};
+	return { props: Object.assign(imageProps, { "data-nimg": fill ? "fill" : "1" }) };
+}
+//#endregion
+export { RESPONSIVE_WIDTHS, __dangerouslyAllowSVG, __globallyUnoptimized, __isDev, generateImageAttributes, getFillStyle, getImageProps, imageOptimizationUrl, isRemoteUrl, isSvgUrl, resolveImageSource, sanitizeBlurDataURL, validateRemoteUrl };

package/dist/shims/image.d.ts

@@ -1,18 +1,11 @@
+import { getImageProps, imageOptimizationUrl } from "./image-props.js";
 import React from "react";
-import { ImageLoader, ImageProps as ImageProps$1, ImgProps, StaticImageData, StaticImport, StaticRequire } from "@vinext/types/next/upstream/dist/shared/lib/get-img-props";
+import { ImageLoader, ImageProps as ImageProps$1, StaticImageData, StaticRequire } from "@vinext/types/next/upstream/dist/shared/lib/get-img-props";
 //#region src/shims/image.d.ts
 export type ImageLoaderProps = Parameters<ImageLoader>[0];
 export type ImageProps = ImageProps$1;
-/**
- * Build a `/_next/image` optimization URL.
- *
- * In production (Cloudflare Workers), the worker intercepts this path and uses
- * the Images binding to resize/transcode on the fly. In dev, the Vite dev
- * server handles it as a passthrough (serves the original file).
- */
-export declare function imageOptimizationUrl(src: string, width: number, quality?: number): string;
 declare const Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "alt" | "height" | "loading" | "ref" | "src" | "srcSet" | "width"> & {
-  src: string | StaticImport;
+  src: string | import("@vinext/types/next/upstream/dist/shared/lib/get-img-props").StaticImport;
   alt: string;
   width?: number | `${number}`;
   height?: number | `${number}`;
@@ -33,12 +26,5 @@ declare const Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProp
   lazyBoundary?: string;
   lazyRoot?: string;
 } & React.RefAttributes<HTMLImageElement>>;
-/**
- * getImageProps — for advanced use cases (picture elements, background images).
- * Returns the props that would be passed to the underlying <img> element.
- */
-export declare function getImageProps(props: ImageProps): {
-  props: ImgProps;
-};
 //#endregion
-export { type ImageLoader, type StaticImageData, type StaticRequire, Image as default };
+export { type ImageLoader, type StaticImageData, type StaticRequire, Image as default, getImageProps, imageOptimizationUrl };