nuxt-og-image 7.0.0 → 7.0.2

package/dist/chunks/tw4.mjs

@@ -2,7 +2,7 @@ import { readFile } from 'node:fs/promises';
 import { pathToFileURL } from 'node:url';
 import { resolveModulePath } from 'exsolve';
 import { dirname, join } from 'pathe';
-import { e as extractVariantBaseClasses, r as resolveVariantPrefixes, h as resolveExtractedVars, l as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, m as loadLightningCss, a as extractCssVars, c as extractUniversalVars, d as extractPerClassVars, g as extractVarsFromCss, f as extractClassStyles } from '../shared/nuxt-og-image.DR_SxdDv.mjs';
+import { e as extractVariantBaseClasses, r as resolveVariantPrefixes, h as resolveExtractedVars, l as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, m as loadLightningCss, a as extractCssVars, c as extractUniversalVars, d as extractPerClassVars, g as extractVarsFromCss, f as extractClassStyles } from '../shared/nuxt-og-image.CSPRgfu6.mjs';
 import 'node:fs';
 import 'node:module';
 import '@nuxt/kit';
@@ -225,7 +225,7 @@ async function parseCssOutput(rawCss, vars, extractedAccum) {
       if (!extractedAccum.rootVars.has(n))
         extractedAccum.rootVars.set(n, v);
     }
-    extractedAccum.qualifiedRules.push(...fresh.qualifiedRules);
+    extractedAccum.qualifiedRules = fresh.qualifiedRules;
     for (const [n, v] of fresh.universalVars) {
       if (!extractedAccum.universalVars.has(n))
         extractedAccum.universalVars.set(n, v);
@@ -254,7 +254,16 @@ const LINEAR_GRADIENT_DIRECTIONS = {
   "bg-gradient-to-b": "to bottom",
   "bg-gradient-to-bl": "to bottom left",
   "bg-gradient-to-l": "to left",
-  "bg-gradient-to-tl": "to top left"
+  "bg-gradient-to-tl": "to top left",
+  // Tailwind v4 names
+  "bg-linear-to-t": "to top",
+  "bg-linear-to-tr": "to top right",
+  "bg-linear-to-r": "to right",
+  "bg-linear-to-br": "to bottom right",
+  "bg-linear-to-b": "to bottom",
+  "bg-linear-to-bl": "to bottom left",
+  "bg-linear-to-l": "to left",
+  "bg-linear-to-tl": "to top left"
 };
 const RADIAL_GRADIENT_SHAPES = {
   "bg-radial": "circle at center",
@@ -268,32 +277,31 @@ const RADIAL_GRADIENT_SHAPES = {
   "bg-radial-at-tl": "circle at top left",
   "bg-radial-at-c": "circle at center"
 };
-async function resolveGradientColor(cls, vars) {
+async function toGradientColor(value, vars) {
+  const resolved = await resolveVarsDeep(value, vars);
+  if (resolved.includes("var("))
+    return null;
+  const simplified = await simplifyCss(`.x{color:${resolved}}`);
+  return simplified.match(RE_CSS_COLOR_VALUE)?.[1]?.trim() ?? resolved;
+}
+async function resolveGradientColor(cls, vars, classVars) {
   const colorName = cls.replace(RE_GRADIENT_STOP_PREFIX, "");
   const shadeMatch = colorName.match(RE_COLOR_SHADE);
   if (shadeMatch?.[1] && shadeMatch?.[2]) {
-    const varName2 = `--color-${shadeMatch[1]}-${shadeMatch[2]}`;
-    const value2 = vars.get(varName2);
-    if (value2) {
-      const resolved = await resolveVarsDeep(value2, vars);
-      if (!resolved.includes("var(")) {
-        const simplified = await simplifyCss(`.x{color:${resolved}}`);
-        return simplified.match(RE_CSS_COLOR_VALUE)?.[1]?.trim() ?? resolved;
-      }
-    }
+    const value2 = vars.get(`--color-${shadeMatch[1]}-${shadeMatch[2]}`);
+    const color2 = value2 ? await toGradientColor(value2, vars) : null;
+    if (color2)
+      return color2;
   }
-  const varName = `--color-${colorName}`;
-  const value = vars.get(varName);
-  if (value) {
-    const resolved = await resolveVarsDeep(value, vars);
-    if (!resolved.includes("var(")) {
-      const simplified = await simplifyCss(`.x{color:${resolved}}`);
-      return simplified.match(RE_CSS_COLOR_VALUE)?.[1]?.trim() ?? resolved;
-    }
-  }
-  return null;
+  const value = vars.get(`--color-${colorName}`);
+  const color = value ? await toGradientColor(value, vars) : null;
+  if (color)
+    return color;
+  const stop = cls.match(RE_GRADIENT_STOP_PREFIX)?.[1];
+  const own = stop ? classVars?.get(`--tw-gradient-${stop}`) : void 0;
+  return own ? toGradientColor(own, vars) : null;
 }
-async function buildGradient(classes, vars) {
+async function buildGradient(classes, vars, perClassVars) {
   const linearDir = classes.find((c) => LINEAR_GRADIENT_DIRECTIONS[c]);
   const radialShape = classes.find((c) => RADIAL_GRADIENT_SHAPES[c]);
   const fromClass = classes.find((c) => c.startsWith("from-"));
@@ -303,9 +311,9 @@ async function buildGradient(classes, vars) {
     return null;
   if (!fromClass && !toClass)
     return null;
-  const fromColor = fromClass ? await resolveGradientColor(fromClass, vars) : null;
-  const viaColor = viaClass ? await resolveGradientColor(viaClass, vars) : null;
-  const toColor = toClass ? await resolveGradientColor(toClass, vars) : null;
+  const fromColor = fromClass ? await resolveGradientColor(fromClass, vars, perClassVars?.get(fromClass)) : null;
+  const viaColor = viaClass ? await resolveGradientColor(viaClass, vars, perClassVars?.get(viaClass)) : null;
+  const toColor = toClass ? await resolveGradientColor(toClass, vars, perClassVars?.get(toClass)) : null;
   if (!fromColor && !toColor)
     return null;
   const stops = [fromColor, viaColor, toColor].filter(Boolean).join(", ");
@@ -348,21 +356,20 @@ async function resolveClassesToStyles(classes, options, context, theme) {
     const outputCss = compiler.build(uncached);
     const { classes: parsedClasses, perClassVars } = await parseCssOutput(outputCss, vars, cachedExtractedVars || void 0);
     const resolveVarsForClass = theme ? buildThemeVars(vars, cachedExtractedVars, theme, options.nuxtUiColors) : vars;
-    for (const [className, rawStyles] of parsedClasses) {
-      const classVars = perClassVars.get(className);
-      const mergedVars = classVars ? new Map([...resolveVarsForClass, ...classVars]) : resolveVarsForClass;
-      const styles = await postProcessStyles(rawStyles, mergedVars, void 0, context);
+    for (const className of uncached) {
       const cacheKey = cacheKeyFor(className);
-      if (!styles && className.startsWith("bg-gradient-")) {
-        resolvedStyleCache.set(cacheKey, rawStyles);
-      } else {
-        resolvedStyleCache.set(cacheKey, styles);
+      const rawStyles = parsedClasses.get(className);
+      if (!rawStyles) {
+        resolvedStyleCache.set(cacheKey, null);
+        continue;
       }
-    }
-    for (const c of uncached) {
-      const key = cacheKeyFor(c);
-      if (!resolvedStyleCache.has(key))
-        resolvedStyleCache.set(key, null);
+      if (LINEAR_GRADIENT_DIRECTIONS[className] || RADIAL_GRADIENT_SHAPES[className]) {
+        resolvedStyleCache.set(cacheKey, {});
+        continue;
+      }
+      const classVars = perClassVars.get(className);
+      const mergedVars = classVars ? new Map([...resolveVarsForClass, ...classVars]) : resolveVarsForClass;
+      resolvedStyleCache.set(cacheKey, await postProcessStyles(rawStyles, mergedVars, void 0, context));
     }
   }
   const result = {};
@@ -372,7 +379,7 @@ async function resolveClassesToStyles(classes, options, context, theme) {
       result[cls] = resolved;
   }
   const gradientVars = theme ? buildThemeVars(vars, cachedExtractedVars, theme, options.nuxtUiColors) : vars;
-  const gradient = await buildGradient(classes, gradientVars);
+  const gradient = await buildGradient(classes, gradientVars, cachedExtractedVars?.perClassVars);
   if (gradient) {
     result[gradient.gradientClass] = { "background-image": gradient.value };
     for (const colorClass of gradient.colorClasses) {

package/dist/chunks/uno.mjs

@@ -1,8 +1,8 @@
 import { readFile } from 'node:fs/promises';
 import { defu } from 'defu';
 import { logger } from '../../dist/runtime/logger.js';
-import { e as extractVariantBaseClasses, s as simplifyCss, a as extractCssVars, b as extractPropertyInitialValues, c as extractUniversalVars, d as extractPerClassVars, f as extractClassStyles, p as postProcessStyles, r as resolveVariantPrefixes, i as importOptionalPeer, g as extractVarsFromCss, h as resolveExtractedVars } from '../shared/nuxt-og-image.DR_SxdDv.mjs';
-export { j as importResolvedModule, k as resolveOptionalModulePath } from '../shared/nuxt-og-image.DR_SxdDv.mjs';
+import { e as extractVariantBaseClasses, s as simplifyCss, a as extractCssVars, b as extractPropertyInitialValues, c as extractUniversalVars, d as extractPerClassVars, f as extractClassStyles, p as postProcessStyles, r as resolveVariantPrefixes, i as importOptionalPeer, g as extractVarsFromCss, h as resolveExtractedVars } from '../shared/nuxt-og-image.CSPRgfu6.mjs';
+export { j as importResolvedModule, k as resolveOptionalModulePath } from '../shared/nuxt-og-image.CSPRgfu6.mjs';
 import 'node:fs';
 import 'node:module';
 import 'node:url';

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": "^4.6.1 || ^5.0.0-0"
   },
   "configKey": "ogImage",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -7,7 +7,7 @@ import 'defu';
 import 'fnv1a-64';
 import 'nuxtseo-shared/kit';
 import 'pathe';
-export { n as default } from './shared/nuxt-og-image.DR_SxdDv.mjs';
+export { n as default } from './shared/nuxt-og-image.CSPRgfu6.mjs';
 import '../dist/runtime/logger.js';
 import '../dist/runtime/shared/publish.js';
 import 'node:crypto';

package/dist/runtime/server/og-image/cache/publish.d.ts

@@ -26,7 +26,10 @@ interface Unavailable {
     _tag: 'Unavailable';
     reason: unknown;
 }
-/** Normalize signed image paths without loading a renderer during page SSR. */
+/**
+ * Normalize signed image paths without loading a renderer during page SSR.
+ * The key is a full SHA-256 hex digest, so it has one fixed format.
+ */
 export declare function getPublishKey(url: string, defaults: Record<string, unknown>, cacheVersion: string): string;
 /** A page may reference the bucket only while its manifest and object both exist. */
 export declare function getPublishedImage(input: PublishInput): Promise<Published | Unavailable | {

package/dist/runtime/server/og-image/cache/publish.js

@@ -1,12 +1,12 @@
 import { parseURL } from "ufo";
 import { parsePublishConfig } from "../../../shared/publish.js";
-import { extractEncodedSegment, hashOgImageOptions } from "../../../shared/urlEncoding.js";
+import { digestCanonical, extractEncodedSegment } from "../../../shared/urlEncoding.js";
 import { withTimeout } from "../../util/withTimeout.js";
 export function getPublishKey(url, defaults, cacheVersion) {
   const { pathname: path, host, protocol } = parseURL(url);
   const extension = path.split(".").pop();
   const segment = decodeURIComponent(extractEncodedSegment(path, extension)).replace(/,s_[^,]+$/, "");
-  return hashOgImageOptions({ segment, defaults, host, protocol }, "", cacheVersion);
+  return digestCanonical([{ segment, defaults, host, protocol }, cacheVersion]);
 }
 export async function getPublishedImage(input) {
   return withTimeout((async () => {

package/dist/runtime/server/og-image/context.d.ts

@@ -1,4 +1,3 @@
 import type { H3Error, H3Event } from '#nuxtseo/h3';
 import type { OgImageRenderEventContext } from '../../types.js';
-export declare function resolvePathCacheKey(e: H3Event, path: string, resolvedOptions?: Record<string, any>): string;
 export declare function resolveContext(e: H3Event): Promise<H3Error | OgImageRenderEventContext>;

package/dist/runtime/server/og-image/context.js

@@ -1,6 +1,5 @@
 import { defu } from "defu";
-import { parseURL, withoutLeadingSlash, withoutTrailingSlash, withQuery } from "ufo";
-import { normalizeKey } from "unstorage";
+import { parseURL, withoutTrailingSlash, withQuery } from "ufo";
 import { createError } from "#nuxtseo/h3";
 import { useNitroApp } from "#nuxtseo/nitro";
 import { prerenderOptionsCache } from "#og-image-cache";
@@ -8,33 +7,18 @@ import { getSiteConfig } from "#site-config/server/composables/getSiteConfig";
 import { createSitePathResolver } from "#site-config/server/composables/utils";
 import { logger } from "../../logger.js";
 import { decodeOgImageParams, extractEncodedSegment, sanitizeProps, separateProps, verifyOgImageSignature } from "../../shared.js";
-import { hashKey } from "../../shared/hash.js";
+import { digestCanonical } from "../../shared/urlEncoding.js";
 import { createNitroRouteRuleMatcher } from "../util/kit.js";
 import { normaliseOptions } from "../util/options.js";
 import { getEventQuery } from "../util/query.js";
 import { parseSameOriginPath } from "../util/ssrf.js";
+import { toStorageKey } from "../util/storageKey.js";
 import { createTimings, TIMING_CTX_KEY } from "../util/timings.js";
 import { withTimeout } from "../util/withTimeout.js";
 import { useOgImageRuntimeConfig } from "../utils.js";
 import { getBrowserRenderer, getSatoriRenderer, getTakumiRenderer } from "./instances.js";
 const RE_HASH_MODE = /^o_([a-z0-9]+)$/i;
 const RE_SIGNATURE_SUFFIX = /,s_([^,]+)$/;
-export function resolvePathCacheKey(e, path, resolvedOptions) {
-  const siteConfig = getSiteConfig(e, {
-    resolveRefs: true
-  });
-  const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path)));
-  const hashParts = [
-    basePath,
-    import.meta.prerender ? "" : siteConfig.url
-  ];
-  if (resolvedOptions)
-    hashParts.push(hashKey(resolvedOptions));
-  return [
-    !basePath || basePath === "/" ? "index" : basePath,
-    hashKey(hashParts)
-  ].join(":");
-}
 export async function resolveContext(e) {
   const runtimeConfig = useOgImageRuntimeConfig(e);
   const resolvePathWithBase = createSitePathResolver(e, {
@@ -73,7 +57,7 @@ export async function resolveContext(e) {
   if (hashMatch) {
     const optionsHash = hashMatch[1];
     if (import.meta.prerender && prerenderOptionsCache) {
-      const cached = await prerenderOptionsCache.getItem(`hash:${optionsHash}`);
+      const cached = await prerenderOptionsCache.getItem(toStorageKey("prerender", optionsHash));
       if (cached && typeof cached === "object") {
         urlOptions = cached;
       } else {
@@ -121,13 +105,14 @@ export async function resolveContext(e) {
     queryParams = separateProps(queryParams);
   }
   const rawPath = urlOptions._path ?? "/";
-  const basePath = parseSameOriginPath(typeof rawPath === "string" ? withoutTrailingSlash(rawPath) : rawPath);
-  if (!basePath) {
+  const parsedPath = parseSameOriginPath(typeof rawPath === "string" ? withoutTrailingSlash(rawPath) : rawPath);
+  if (parsedPath._tag === "Err") {
     return createError({
       statusCode: 400,
-      statusMessage: "[Nuxt OG Image] The _path option must be a same-origin path."
+      statusMessage: `[Nuxt OG Image] The _path option must be a same-origin path. ${parsedPath.reason}`
     });
   }
+  const basePath = parsedPath.value;
   const componentHash = urlOptions._componentHash || "";
   delete urlOptions._path;
   delete urlOptions._hash;
@@ -174,8 +159,8 @@ export async function resolveContext(e) {
     normalised.options.props = filtered;
   }
   const rendererType = normalised.renderer;
-  const baseCacheKey = normalised.options.cacheKey || (hashMatch ? `hash:${hashMatch[1]}` : resolvePathCacheKey(e, basePathWithQuery, normalised.options));
-  const key = componentHash ? `${baseCacheKey}:${componentHash}` : baseCacheKey;
+  const identity = normalised.options.cacheKey ? ["cacheKey", String(normalised.options.cacheKey)] : hashMatch ? ["hash", hashMatch[1]] : ["page", basePathWithQuery, import.meta.prerender ? "" : getSiteConfig(e, { resolveRefs: true }).url, normalised.options];
+  const key = digestCanonical([...identity, componentHash]);
   let renderer;
   switch (rendererType) {
     case "satori":

package/dist/runtime/server/og-image/core/plugins/imageSrc.js

@@ -1,4 +1,4 @@
-import { withBase, withoutLeadingSlash } from "ufo";
+import { parseURL, withBase, withoutLeadingSlash } from "ufo";
 import { useStorage } from "#nuxtseo/nitro";
 import { toBase64Image } from "../../../../shared.js";
 import { decodeHtml } from "../../../util/encoding.js";
@@ -6,15 +6,18 @@ import { fetchLocalAsset } from "../../../util/fetchLocalAsset.js";
 import { getFetchTimeout } from "../../../util/fetchTimeout.js";
 import { logger } from "../../../util/logger.js";
 import { getOgImageOrigin } from "../../../util/origin.js";
-import { fetchWithRedirectValidation, isBlockedUrl } from "../../../util/ssrf.js";
+import { fetchWithRedirectValidation, isBlockedUrl, parseSameOriginPath } from "../../../util/ssrf.js";
 import { getImageDimensions } from "../../utils/image-detector.js";
 import { defineTransformer } from "../plugins.js";
 const RE_URL_LEADING = /^url\(['"]?/;
 const RE_URL_TRAILING = /['"]?\)$/;
 const SUBREQUEST_HEADERS = { "x-nuxt-og-image": "1" };
 async function resolveLocalFilePathImage(publicStoragePath, src) {
+  const path = parseSameOriginPath(parseURL(src).pathname);
+  if (path._tag === "Err")
+    return;
   const normalizedSrc = withoutLeadingSlash(
-    src.replace("_nuxt/@fs/", "").replace("_nuxt/", "").replace("./", "")
+    decodeURIComponent(path.value).replace("_nuxt/@fs/", "").replace("_nuxt/", "").replace("./", "")
   ).replaceAll("/", ":");
   const key = `${publicStoragePath}:${normalizedSrc}`;
   if (await useStorage().hasItem(key))

package/dist/runtime/server/og-image/core/transforms/emojis/fetch.js

@@ -1,6 +1,7 @@
 import { $fetch } from "ofetch";
 import { emojiCache } from "#og-image-cache";
 import { getFetchTimeout } from "../../../../util/fetchTimeout.js";
+import { toStorageKey } from "../../../../util/storageKey.js";
 import { getEmojiCodePoint, getEmojiIconNames } from "./emoji-utils.js";
 export async function getEmojiSvg(ctx, emojiChar) {
   const emojiSet = ctx.options.emojis;
@@ -8,7 +9,7 @@ export async function getEmojiSvg(ctx, emojiChar) {
   const possibleNames = getEmojiIconNames(codePoint, emojiSet);
   let svg = null;
   for (const iconName of possibleNames) {
-    const key = ["1", emojiSet, iconName].join("|");
+    const key = toStorageKey("emoji", [emojiSet, iconName]);
     if (await emojiCache.hasItem(key)) {
       svg = await emojiCache.getItem(key);
       if (svg)
@@ -24,15 +25,14 @@ export async function getEmojiSvg(ctx, emojiChar) {
         if (deadline.aborted)
           break;
         try {
-          svg = await $fetch(`https://api.iconify.design/${emojiSet}/${iconName}.svg`, {
+          svg = await $fetch(`https://api.iconify.design/${encodeURIComponent(emojiSet)}/${encodeURIComponent(iconName)}.svg`, {
             responseType: "text",
             retry: 0,
             signal: deadline,
             timeout
           });
           if (svg && svg !== "404") {
-            const key = ["1", emojiSet, iconName].join("|");
-            await emojiCache.setItem(key, svg);
+            await emojiCache.setItem(toStorageKey("emoji", [emojiSet, iconName]), svg);
             break;
           }
         } catch {

package/dist/runtime/server/og-image/devtools.d.ts

@@ -7,4 +7,4 @@ export interface DevToolsExtractPayload {
         images: DevToolsMetaDataExtraction[];
     };
 }
-export declare function fetchPathHtmlAndExtractOptions(e: H3Event, path: string, cacheKey: string): Promise<H3Error | DevToolsExtractPayload>;
+export declare function fetchPathHtmlAndExtractOptions(e: H3Event, path: string, key: string): Promise<H3Error | DevToolsExtractPayload>;

package/dist/runtime/server/og-image/devtools.js

@@ -3,6 +3,7 @@ import { createError } from "#nuxtseo/h3";
 import { htmlPayloadCache } from "#og-image-cache";
 import { extractSocialPreviewTags } from "../../pure.js";
 import { logger } from "../util/logger.js";
+import { toStorageKey } from "../util/storageKey.js";
 const PAYLOAD_REGEX = /<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/;
 function extractOptionsFromHtml(html) {
   const match = String(html).match(PAYLOAD_REGEX);
@@ -36,7 +37,8 @@ async function doFetchWithErrorHandling(fetch, path) {
   }
   return [res._data || await res.text(), null];
 }
-export async function fetchPathHtmlAndExtractOptions(e, path, cacheKey) {
+export async function fetchPathHtmlAndExtractOptions(e, path, key) {
+  const cacheKey = toStorageKey("devtools", key);
   const cachedHtmlPayload = await htmlPayloadCache.getItem(cacheKey);
   if (!import.meta.dev && cachedHtmlPayload && cachedHtmlPayload.expiresAt > Date.now())
     return cachedHtmlPayload.value;

package/dist/runtime/server/plugins/prerender.js

@@ -4,12 +4,11 @@ import { appendResponseHeader } from "#nuxtseo/h3";
 import { defineNitroPlugin, useRuntimeConfig, useStorage } from "#nuxtseo/nitro";
 import { prerenderOptionsCache } from "#og-image-cache";
 import { getSiteConfig } from "#site-config/server/composables/getSiteConfig";
-import { createSitePathResolver } from "#site-config/server/composables/utils";
 import { logger } from "../../logger.js";
 import { isInternalRoute } from "../../shared.js";
 import { getPublishKey, publishImage } from "../og-image/cache/publish.js";
-import { resolvePathCacheKey } from "../og-image/context.js";
 import { createNitroRouteRuleMatcher } from "../util/kit.js";
+import { toStorageKey } from "../util/storageKey.js";
 import { useOgImageRuntimeConfig } from "../utils.js";
 const PAYLOAD_REGEX = /<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/;
 const RE_SCRIPT_OPTIONS = /<script id="nuxt-og-image-options" type="application\/json">[\s\S]*?<\/script>/;
@@ -46,16 +45,10 @@ export default defineNitroPlugin(async (nitro) => {
       return;
     const parsed = parse(_payload);
     const payloads = parsed.map((opt) => [opt.key || "og", opt]);
-    const resolvePathWithBase = createSitePathResolver(ctx.event, {
-      absolute: false,
-      withBase: true
-    });
-    const key = resolvePathCacheKey(ctx.event, resolvePathWithBase(path));
-    await prerenderOptionsCache.setItem(key, payloads);
     const pagePath = withoutBase(path, useRuntimeConfig().app.baseURL);
     for (const [_ogKey, opt] of payloads) {
       if (opt._hash) {
-        await prerenderOptionsCache.setItem(`hash:${opt._hash}`, { ...opt, _path: pagePath });
+        await prerenderOptionsCache.setItem(toStorageKey("prerender", opt._hash), { ...opt, _path: pagePath });
       }
     }
     const prerenderPaths = ctx.event.context._ogImagePrerenderPaths;
@@ -69,7 +62,7 @@ export default defineNitroPlugin(async (nitro) => {
             const extension = prerenderPath.split(".").pop();
             if (!prerenderPath.includes("/_og/s/") || extension !== "png" && extension !== "jpeg" && extension !== "jpg" && extension !== "webp")
               continue;
-            const opt = payloads.find(([key2]) => key2 === ogKey)?.[1];
+            const opt = payloads.find(([key]) => key === ogKey)?.[1];
             if (!opt)
               continue;
             const result = await publishImage({
@@ -84,9 +77,8 @@ export default defineNitroPlugin(async (nitro) => {
               render: async () => {
                 if (opt.component === "PageScreenshot") {
                   opt._prerenderHtml = `<!DOCTYPE html><html ${(html.htmlAttrs || []).join(" ")}><head>${html.head.join("")}</head><body ${(html.bodyAttrs || []).join(" ")}>${[...html.bodyPrepend || [], ...html.body || [], ...html.bodyAppend].join("")}</body></html>`;
-                  await prerenderOptionsCache.setItem(key, payloads);
                   if (opt._hash)
-                    await prerenderOptionsCache.setItem(`hash:${opt._hash}`, { ...opt, _path: pagePath });
+                    await prerenderOptionsCache.setItem(toStorageKey("prerender", opt._hash), { ...opt, _path: pagePath });
                 }
                 const response = await nitro.localFetch(opt._query ? withQuery(prerenderPath, { _query: opt._query }) : prerenderPath);
                 if (!response.ok || !response.headers.get("content-type")?.startsWith("image/"))

package/dist/runtime/server/routes/resolve.js

@@ -1,4 +1,4 @@
-import { parseURL, withLeadingSlash, withQuery } from "ufo";
+import { parseURL, withQuery } from "ufo";
 import { createError, defineEventHandler, getRequestHost, sendRedirect } from "#nuxtseo/h3";
 import { fetchWithEvent } from "#nuxtseo/nitro";
 import { getSiteConfig } from "#site-config/server/composables/getSiteConfig";
@@ -78,13 +78,15 @@ export default defineEventHandler(async (event) => {
       statusMessage: `[Nuxt OG Image] Target path exceeds ${MAX_RESOLVE_PATH_LENGTH} characters.`
     });
   }
-  if (targetPath.includes("://") || !parseSameOriginPath(targetPath)) {
+  const parsedPath = parseSameOriginPath(targetPath);
+  if (targetPath.includes("://") || parsedPath._tag === "Err") {
     throw createError({
       statusCode: 400,
       statusMessage: "[Nuxt OG Image] Target path must be a same-origin path."
     });
   }
-  if (isInternalRoute(targetPath)) {
+  const pagePath = parsedPath.value;
+  if (isInternalRoute(pagePath)) {
     throw createError({
       statusCode: 400,
       statusMessage: "[Nuxt OG Image] Cannot resolve og:image for internal route."
@@ -98,7 +100,7 @@ export default defineEventHandler(async (event) => {
     if (!k.startsWith("_og_"))
       forwardQuery[k] = v;
   }
-  const fetchPath = withQuery(withLeadingSlash(targetPath), forwardQuery);
+  const fetchPath = withQuery(pagePath, forwardQuery);
   const html = await fetchWithEvent(event, fetchPath, {
     headers: { accept: "text/html" },
     responseType: "text"

package/dist/runtime/server/util/cache.d.ts

@@ -1,10 +1,10 @@
-import type { H3Error } from '#nuxtseo/h3';
 import type { OgImageRenderEventContext } from '../../types.js';
 export declare function useOgImageBufferCache(ctx: OgImageRenderEventContext, options: {
     baseCacheKey: string | false;
     cacheMaxAgeSeconds?: number;
-    secret?: string;
-}): Promise<void | H3Error | {
+    /** The caller has checked the purge token. Drop the stored entry and render again. */
+    purge?: boolean;
+}): Promise<void | {
     cachedItem: false | BufferSource;
     enabled: boolean;
     expiresAt: number;

package/dist/runtime/server/util/cache.js

@@ -1,18 +1,10 @@
 import { fnv1a64Base36 } from "fnv1a-64";
 import { withTrailingSlash } from "ufo";
 import { prefixStorage } from "unstorage";
-import { createError, handleCacheHeaders, setHeader, setHeaders } from "#nuxtseo/h3";
+import { handleCacheHeaders, setHeader, setHeaders } from "#nuxtseo/h3";
 import { useStorage } from "#nuxtseo/nitro";
 import { logger } from "../../logger.js";
-import { getEventQuery } from "./query.js";
-function safeCompare(a, b) {
-  if (a.length !== b.length)
-    return false;
-  let mismatch = 0;
-  for (let i = 0; i < a.length; i++)
-    mismatch |= a.charCodeAt(i) ^ b.charCodeAt(i);
-  return mismatch === 0;
-}
+import { toStorageKey } from "./storageKey.js";
 function warnCacheBackendUnreachable(ctx, baseCacheKey, e) {
   if (ctx._nitro._ogImageCacheBackendWarned)
     return;
@@ -24,7 +16,7 @@ export async function useOgImageBufferCache(ctx, options) {
   const intentionallyEnabled = options.baseCacheKey !== false && !import.meta.dev && !import.meta.prerender && maxAge > 0;
   let enabled = intentionallyEnabled;
   const cache = options.baseCacheKey === false ? void 0 : prefixStorage(useStorage(), withTrailingSlash(options.baseCacheKey));
-  const key = ctx.key;
+  const key = toStorageKey("image", ctx.key);
   let cachedItem = false;
   let cacheExpiresAt = 0;
   if (enabled && cache) {
@@ -40,14 +32,7 @@ export async function useOgImageBufferCache(ctx, options) {
     }) : null;
     if (entry) {
       const { value, expiresAt, headers } = entry;
-      const purgeValue = getEventQuery(ctx.e).purge;
-      if (typeof purgeValue !== "undefined") {
-        if (options.secret && !safeCompare(String(purgeValue), options.secret)) {
-          return createError({
-            statusCode: 403,
-            statusMessage: "[Nuxt OG Image] Invalid purge token. Provide the signing secret as ?purge=<secret>."
-          });
-        }
+      if (options.purge) {
         await cache.removeItem(key).catch((err) => {
           void err;
         });

package/dist/runtime/server/util/eventHandlers.js

@@ -11,6 +11,7 @@ import { html } from "../og-image/templates/html.js";
 import { useOgImageRuntimeConfig } from "../utils.js";
 import { useOgImageBufferCache } from "./cache.js";
 import { warnPublishUnavailable } from "./publishWarnings.js";
+import { parsePurgeRequest } from "./purge.js";
 import { getEventQuery } from "./query.js";
 export async function imageEventHandler(e) {
   const reqStart = performance.now();
@@ -64,6 +65,14 @@ async function renderOgImage(e, ctx) {
       }
     }
   }
+  const purgeRequest = import.meta.dev || import.meta.prerender ? { _tag: "None" } : parsePurgeRequest(getEventQuery(e).purge, security?.secret);
+  if (purgeRequest._tag === "Denied") {
+    return createError({
+      statusCode: 403,
+      statusMessage: "[Nuxt OG Image] Invalid purge token. Provide the signing secret as ?purge=<secret>."
+    });
+  }
+  const purge = purgeRequest._tag === "Authorized";
   if ((import.meta.dev || debug) && isDevToolsContextRequest) {
     setHeader(e, "Content-Type", "application/json");
     const [extract, rendererDebug] = await Promise.all([
@@ -122,7 +131,6 @@ async function renderOgImage(e, ctx) {
     timings.record("cache-hit", 0);
     return buildCachedImage;
   }
-  const purge = typeof getEventQuery(e).purge !== "undefined";
   let publication = publish && !import.meta.dev && !import.meta.prerender ? (() => {
     const key = getPublishKey(new URL(e.path, getSiteConfig(e).url).href, config.defaults, publish.cacheVersion);
     return {
@@ -158,14 +166,11 @@ async function renderOgImage(e, ctx) {
   const cacheApi = await useOgImageBufferCache(ctx, {
     cacheMaxAgeSeconds: ctx.options.cacheMaxAgeSeconds,
     baseCacheKey,
-    secret: security?.secret || void 0
+    purge
   }).finally(endCacheLookup);
   if (typeof cacheApi === "undefined") {
     return;
   }
-  if (cacheApi instanceof H3Error) {
-    return cacheApi;
-  }
   if (publication && purge)
     publication.cache.forget(publication.cacheKey);
   let image = cacheApi.cachedItem;

package/dist/runtime/server/util/purge.d.ts

@@ -0,0 +1,14 @@
+/** What a request asks of the runtime cache through its `purge` query value. */
+export type PurgeRequest = {
+    _tag: 'None';
+} | {
+    _tag: 'Authorized';
+} | {
+    _tag: 'Denied';
+};
+/**
+ * Parse the `purge` query value. A purge needs the signing secret as its
+ * value, the same secret that signs image URLs. Without a secret, no purge
+ * can pass.
+ */
+export declare function parsePurgeRequest(value: unknown, secret: string | false | undefined): PurgeRequest;

package/dist/runtime/server/util/purge.js

@@ -0,0 +1,15 @@
+function safeCompare(a, b) {
+  if (a.length !== b.length)
+    return false;
+  let mismatch = 0;
+  for (let i = 0; i < a.length; i++)
+    mismatch |= a.charCodeAt(i) ^ b.charCodeAt(i);
+  return mismatch === 0;
+}
+export function parsePurgeRequest(value, secret) {
+  if (value === void 0)
+    return { _tag: "None" };
+  if (typeof secret !== "string" || !secret || typeof value !== "string")
+    return { _tag: "Denied" };
+  return safeCompare(value, secret) ? { _tag: "Authorized" } : { _tag: "Denied" };
+}

package/dist/runtime/server/util/ssrf.d.ts

@@ -21,17 +21,24 @@ declare const sameOriginPathBrand: unique symbol;
 export type SameOriginPath = string & {
     readonly [sameOriginPathBrand]: true;
 };
+export type SameOriginPathResult = {
+    _tag: 'Ok';
+    value: SameOriginPath;
+} | {
+    _tag: 'Err';
+    reason: string;
+};
 /**
  * Parse an untrusted path (for example the `_path` URL option) into a
- * same-origin path. Returns `undefined` for anything that could leave the
- * origin: absolute URLs, other schemes, protocol-relative `//host`,
- * backslash variants, control characters, and paths without a leading `/`
- * (which a string concatenation with the origin turns into `origin@host`).
+ * normalized same-origin path. The input is decoded once and must then be a
+ * plain absolute path: one leading `/`, no `.` or `..` segments, no
+ * encoded separators, no `?` or `#`, and no control characters. The value
+ * is the percent-encoded pathname, so it resolves the same way everywhere.
  *
  * GHSA-h5qf-97cw-2h86: an absolute `_path` navigated the browser renderer to
  * an internal host and reflected the response into the image.
  */
-export declare function parseSameOriginPath(input: unknown): SameOriginPath | undefined;
+export declare function parseSameOriginPath(input: unknown): SameOriginPathResult;
 /**
  * Resolve `path` against `origin` and return the href, but only when the result
  * stays on that origin. Returns null for a missing or unparseable origin, and for

package/dist/runtime/server/util/ssrf.js

@@ -153,28 +153,45 @@ export function isBlockedAddress(address) {
   return isBlockedUrl(`http://${address.includes(":") ? `[${address}]` : address}/`);
 }
 const PROBE_ORIGIN = "http://og-image.invalid";
-function hasUnsafePathChar(input) {
+const RE_PERCENT_ESCAPE = /%[\da-f]{2}/i;
+const RE_ENCODED_SEPARATOR = /%(?:2f|5c)/i;
+function hasReservedPathChar(input) {
   for (let i = 0; i < input.length; i++) {
     const code = input.charCodeAt(i);
-    if (code <= 31 || code === 127 || code === 92)
+    if (code <= 31 || code === 127 || code === 92 || code === 63 || code === 35)
       return true;
   }
   return false;
 }
+function err(reason) {
+  return { _tag: "Err", reason };
+}
 export function parseSameOriginPath(input) {
   if (typeof input !== "string" || input[0] !== "/" || input[1] === "/")
-    return void 0;
-  if (hasUnsafePathChar(input))
-    return void 0;
+    return err("The path must start with a single /.");
+  if (RE_ENCODED_SEPARATOR.test(input))
+    return err("The path must not encode a / or \\.");
+  let decoded;
+  try {
+    decoded = decodeURIComponent(input);
+  } catch {
+    return err("The path has an invalid percent-encoding.");
+  }
+  if (RE_PERCENT_ESCAPE.test(decoded))
+    return err("The path must be percent-encoded once.");
+  if (hasReservedPathChar(decoded))
+    return err("The path must not contain ?, #, \\ or control characters.");
+  if (decoded.split("/").some((segment) => segment === "." || segment === ".."))
+    return err("The path must not contain . or .. segments.");
   let resolved;
   try {
     resolved = new URL(input, PROBE_ORIGIN);
   } catch {
-    return void 0;
+    return err("The path is not a valid URL path.");
   }
-  if (resolved.origin !== PROBE_ORIGIN)
-    return void 0;
-  return input;
+  if (resolved.origin !== PROBE_ORIGIN || resolved.search || resolved.hash)
+    return err("The path must stay on the same origin.");
+  return { _tag: "Ok", value: resolved.pathname };
 }
 export function resolveSameOriginUrl(path, origin) {
   if (!origin)

package/dist/runtime/server/util/storageKey.d.ts

@@ -0,0 +1,14 @@
+declare const storageKeyBrand: unique symbol;
+/**
+ * A storage key made of a fixed namespace and a SHA-256 hex digest. Only
+ * `toStorageKey` creates one, so every key has the same short, fixed format
+ * whatever the identity it stands for.
+ */
+export type StorageKey = string & {
+    readonly [storageKeyBrand]: true;
+};
+/** Each namespace keeps one kind of entry apart from the others. */
+export type StorageKeyNamespace = 'image' | 'devtools' | 'emoji' | 'prerender';
+/** Derive the storage key for an identity. The same identity always gives the same key. */
+export declare function toStorageKey(namespace: StorageKeyNamespace, identity: unknown): StorageKey;
+export {};

package/dist/runtime/server/util/storageKey.js

@@ -0,0 +1,4 @@
+import { digestCanonical } from "../../shared/urlEncoding.js";
+export function toStorageKey(namespace, identity) {
+  return `${namespace}:${digestCanonical(identity)}`;
+}

package/dist/runtime/shared/urlEncoding.d.ts

@@ -1,3 +1,8 @@
+/**
+ * SHA-256 hex digest (64 chars of [0-9a-f]) of a canonical, key-sorted
+ * serialization. Equal structures produce equal digests in every runtime.
+ */
+export declare function digestCanonical(value: unknown): string;
 /**
  * Generate a deterministic hash from options object
  * Excludes _path so images with same options can be cached across pages,

package/dist/runtime/shared/urlEncoding.js

@@ -112,11 +112,14 @@ function base64UrlToHex(input) {
   }
   return hex;
 }
+export function digestCanonical(value) {
+  return base64UrlToHex(digest(canonicalJson(value)));
+}
 export function hashOgImageOptions(options, componentHash, version) {
   const { _path, _hash, ...rest } = options;
   const hashableOptions = rest.component === "PageScreenshot" ? { ...rest, _path } : rest;
   const hashInput = componentHash || version ? [hashableOptions, componentHash || "", version || ""] : hashableOptions;
-  return base64UrlToHex(digest(canonicalJson(hashInput))).slice(0, 16);
+  return digestCanonical(hashInput).slice(0, 16);
 }
 export function encodeOgImageParams(options, defaults) {
   const parts = [];

package/dist/shared/{nuxt-og-image.DR_SxdDv.mjs → nuxt-og-image.CSPRgfu6.mjs}

@@ -671,7 +671,7 @@ const RE_CSS_DECL = /([\w-]+)\s*:\s*([^\s;][^;]*)(?:;|$)/g;
 const RE_CSS_TOGGLE = /(--[\w-]+)\s*:\s+;/g;
 const RE_CSS_CLASS_RULE = /\.((?:\\[0-9a-f]{1,6}\s?|\\[^0-9a-f]|[^\\\s{])+)\s*\{([^}]+)\}/gi;
 const RE_ROOT_HOST_BLOCK = /:(?:root|host)[^\s{]*\s*\{([^}]+)\}/g;
-const RE_UNIVERSAL_BLOCK = /\*[^{]*\{([^}]+)\}/g;
+const RE_UNIVERSAL_BLOCK = /(?:^|[{};])\s*\*[^{};]*\{([^{}]+)\}/g;
 const RE_PROPERTY_AT_RULE = /@property\s+(--[\w-]+)\s*\{([^}]+)\}/g;
 const RE_INITIAL_VALUE = /initial-value\s*:\s*([^\s;][^;]*);?/;
 const RE_CSS_ESCAPE_HEX = /\\([0-9a-f]{1,6})\s?/gi;
@@ -1112,15 +1112,24 @@ async function extractVarsFromCss(css) {
   }
   return { rootVars, qualifiedRules, universalVars, propertyInitials, perClassVars };
 }
+const MAX_VAR_SUBSTITUTIONS = 100;
 function resolveCssVars(css, vars) {
   let result = css;
-  let iterations = 0;
-  while (result.includes("var(") && iterations < 20) {
-    const next = resolveInnermostVar(result, vars);
-    if (next === result)
+  let cursor = result.length;
+  for (let substitutions = 0; substitutions < MAX_VAR_SUBSTITUTIONS; ) {
+    const idx = result.lastIndexOf("var(", cursor);
+    if (idx === -1)
       break;
-    result = next;
-    iterations++;
+    const resolved = substituteVar(result, idx, vars);
+    if (resolved === void 0) {
+      if (idx === 0)
+        break;
+      cursor = idx - 1;
+      continue;
+    }
+    result = result.substring(0, idx) + resolved.value + result.substring(resolved.end);
+    cursor = idx + resolved.value.length;
+    substitutions++;
   }
   return result;
 }
@@ -1136,23 +1145,19 @@ function findClosingParen(str, startIdx) {
   }
   return -1;
 }
-function resolveInnermostVar(css, vars) {
-  const idx = css.lastIndexOf("var(");
-  if (idx === -1)
-    return css;
+function substituteVar(css, idx, vars) {
   const closeIdx = findClosingParen(css, idx + 4);
   if (closeIdx === -1)
-    return css;
+    return void 0;
   const content = css.substring(idx + 4, closeIdx);
-  if (content.includes("var("))
-    return css;
   const comma = content.indexOf(",");
   const name = (comma >= 0 ? content.substring(0, comma) : content).trim();
   const fallback = comma >= 0 ? content.substring(comma + 1).trim() : void 0;
-  const resolved = vars.get(name) ?? fallback;
+  const value = vars.get(name);
+  const resolved = value !== void 0 && value.trim() !== "initial" ? value : fallback;
   if (resolved === void 0)
-    return css;
-  return css.substring(0, idx) + resolved + css.substring(closeIdx + 1);
+    return void 0;
+  return { value: resolved, end: closeIdx + 1 };
 }
 function decodeCssClassName(selector) {
   let className = selector.startsWith(".") ? selector.slice(1) : selector;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
     "website": "https://harlanzw.com",