@nuxt/scripts 1.0.0-beta.3 → 1.0.0-beta.30

package/dist/runtime/server/google-maps-geocode-proxy.js

@@ -0,0 +1,34 @@
+import { useRuntimeConfig } from "#imports";
+import { createError, defineEventHandler, getQuery, setHeader } from "h3";
+import { $fetch } from "ofetch";
+import { withQuery } from "ufo";
+export default defineEventHandler(async (event) => {
+  const runtimeConfig = useRuntimeConfig();
+  const privateConfig = runtimeConfig["nuxt-scripts"]?.googleMapsGeocodeProxy;
+  const apiKey = privateConfig?.apiKey;
+  if (!apiKey) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Google Maps API key not configured for geocode proxy"
+    });
+  }
+  const query = getQuery(event);
+  const { key: _clientKey, ...safeQuery } = query;
+  const geocodeUrl = withQuery("https://maps.googleapis.com/maps/api/geocode/json", {
+    ...safeQuery,
+    key: apiKey
+  });
+  const data = await $fetch(geocodeUrl, {
+    headers: {
+      "User-Agent": "Nuxt Scripts Google Geocode Proxy"
+    }
+  }).catch((error) => {
+    throw createError({
+      statusCode: error.statusCode || 500,
+      statusMessage: error.statusMessage || "Failed to geocode"
+    });
+  });
+  setHeader(event, "Content-Type", "application/json");
+  setHeader(event, "Cache-Control", "public, max-age=86400, s-maxage=86400");
+  return data;
+});

package/dist/runtime/server/google-static-maps-proxy.js

@@ -1,7 +1,7 @@
-import { createError, defineEventHandler, getHeader, getQuery, setHeader } from "h3";
+import { useRuntimeConfig } from "#imports";
+import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { $fetch } from "ofetch";
 import { withQuery } from "ufo";
-import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (event) => {
   const runtimeConfig = useRuntimeConfig();
   const publicConfig = runtimeConfig.public["nuxt-scripts"]?.googleStaticMapsProxy;
@@ -19,17 +19,6 @@ export default defineEventHandler(async (event) => {
       statusMessage: "Google Maps API key not configured for proxy"
     });
   }
-  const referer = getHeader(event, "referer");
-  const host = getHeader(event, "host");
-  if (referer && host) {
-    const refererUrl = new URL(referer).host;
-    if (refererUrl !== host) {
-      throw createError({
-        statusCode: 403,
-        statusMessage: "Invalid referer"
-      });
-    }
-  }
   const query = getQuery(event);
   const { key: _clientKey, ...safeQuery } = query;
   const googleMapsUrl = withQuery("https://maps.googleapis.com/maps/api/staticmap", {

package/dist/runtime/server/gravatar-proxy.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<any>>;
+export default _default;

package/dist/runtime/server/gravatar-proxy.js

@@ -0,0 +1,46 @@
+import { useRuntimeConfig } from "#imports";
+import { createError, defineEventHandler, getQuery, setHeader } from "h3";
+import { $fetch } from "ofetch";
+import { withQuery } from "ufo";
+export default defineEventHandler(async (event) => {
+  const runtimeConfig = useRuntimeConfig();
+  const proxyConfig = runtimeConfig.public["nuxt-scripts"]?.gravatarProxy;
+  const query = getQuery(event);
+  let hash = query.hash;
+  const email = query.email;
+  if (!hash && email) {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(email.trim().toLowerCase());
+    const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+    hash = Array.from(new Uint8Array(hashBuffer), (b) => b.toString(16).padStart(2, "0")).join("");
+  }
+  if (!hash) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Either hash or email parameter is required"
+    });
+  }
+  const size = query.s || "80";
+  const defaultImg = query.d || "mp";
+  const rating = query.r || "g";
+  const gravatarUrl = withQuery(`https://www.gravatar.com/avatar/${hash}`, {
+    s: size,
+    d: defaultImg,
+    r: rating
+  });
+  const response = await $fetch.raw(gravatarUrl, {
+    headers: {
+      "User-Agent": "Nuxt Scripts Gravatar Proxy"
+    }
+  }).catch((error) => {
+    throw createError({
+      statusCode: error.statusCode || 500,
+      statusMessage: error.statusMessage || "Failed to fetch Gravatar avatar"
+    });
+  });
+  const cacheMaxAge = proxyConfig?.cacheMaxAge ?? 3600;
+  setHeader(event, "Content-Type", response.headers.get("content-type") || "image/jpeg");
+  setHeader(event, "Cache-Control", `public, max-age=${cacheMaxAge}, s-maxage=${cacheMaxAge}`);
+  setHeader(event, "Vary", "Accept-Encoding");
+  return response._data;
+});

package/dist/runtime/server/instagram-embed-asset.js

@@ -1,42 +1,9 @@
-import { createError, defineEventHandler, getQuery, setHeader } from "h3";
-import { $fetch } from "ofetch";
-export default defineEventHandler(async (event) => {
-  const query = getQuery(event);
-  const url = query.url?.replace(/&/g, "&");
-  if (!url) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Asset URL is required"
-    });
-  }
-  let parsedUrl;
-  try {
-    parsedUrl = new URL(url);
-  } catch {
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Invalid asset URL"
-    });
-  }
-  if (parsedUrl.hostname !== "static.cdninstagram.com") {
-    throw createError({
-      statusCode: 403,
-      statusMessage: "Domain not allowed"
-    });
-  }
-  const response = await $fetch.raw(url, {
-    headers: {
-      "Accept": "*/*",
-      "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36"
-    }
-  }).catch((error) => {
-    throw createError({
-      statusCode: error.statusCode || 500,
-      statusMessage: error.statusMessage || "Failed to fetch asset"
-    });
-  });
-  const contentType = response.headers.get("content-type") || "application/octet-stream";
-  setHeader(event, "Content-Type", contentType);
-  setHeader(event, "Cache-Control", "public, max-age=86400, s-maxage=86400");
-  return response._data;
+import { createImageProxyHandler } from "./utils/image-proxy.js";
+export default createImageProxyHandler({
+  allowedDomains: ["static.cdninstagram.com"],
+  accept: "*/*",
+  userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
+  cacheMaxAge: 86400,
+  contentType: "application/octet-stream",
+  decodeAmpersands: true
 });

package/dist/runtime/server/instagram-embed-image.js

@@ -1,54 +1,7 @@
-import { createError, defineEventHandler, getQuery, setHeader } from "h3";
-import { $fetch } from "ofetch";
-export default defineEventHandler(async (event) => {
-  const query = getQuery(event);
-  const url = query.url?.replace(/&/g, "&");
-  if (!url) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Image URL is required"
-    });
-  }
-  let parsedUrl;
-  try {
-    parsedUrl = new URL(url);
-  } catch {
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Invalid image URL"
-    });
-  }
-  if (parsedUrl.protocol !== "http:" && parsedUrl.protocol !== "https:") {
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Invalid URL scheme"
-    });
-  }
-  if (!parsedUrl.hostname.endsWith(".cdninstagram.com") && parsedUrl.hostname !== "scontent.cdninstagram.com") {
-    throw createError({
-      statusCode: 403,
-      statusMessage: "Domain not allowed"
-    });
-  }
-  const response = await $fetch.raw(url, {
-    redirect: "manual",
-    headers: {
-      "Accept": "image/webp,image/jpeg,image/png,image/*,*/*;q=0.8",
-      "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36"
-    }
-  }).catch((error) => {
-    throw createError({
-      statusCode: error.statusCode || 500,
-      statusMessage: error.statusMessage || "Failed to fetch image"
-    });
-  });
-  if (response.status >= 300 && response.status < 400) {
-    throw createError({
-      statusCode: 403,
-      statusMessage: "Redirects not allowed"
-    });
-  }
-  setHeader(event, "Content-Type", response.headers.get("content-type") || "image/jpeg");
-  setHeader(event, "Cache-Control", "public, max-age=3600, s-maxage=3600");
-  return response._data;
+import { createImageProxyHandler } from "./utils/image-proxy.js";
+export default createImageProxyHandler({
+  allowedDomains: (hostname) => hostname.endsWith(".cdninstagram.com") || hostname === "scontent.cdninstagram.com",
+  userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
+  followRedirects: false,
+  decodeAmpersands: true
 });

package/dist/runtime/server/instagram-embed.d.ts

@@ -1,2 +1,18 @@
+export declare const RSRC_RE: RegExp;
+export declare const AMP_RE: RegExp;
+export declare const SCONTENT_RE: RegExp;
+export declare const STATIC_CDN_RE: RegExp;
+export declare const LOOKASIDE_RE: RegExp;
+export declare const INSTAGRAM_IMAGE_HOSTS: string[];
+export declare const INSTAGRAM_ASSET_HOST = "static.cdninstagram.com";
+export declare function proxyImageUrl(url: string): string;
+export declare function proxyAssetUrl(url: string): string;
+export declare function rewriteUrl(url: string): string;
+export declare function rewriteUrlsInText(text: string): string;
+/**
+ * Scope CSS rules under a parent selector and strip global/page-level rules.
+ * Removes :root, html, body selectors and @charset/@import at-rules.
+ */
+export declare function scopeCss(css: string, scopeSelector: string): string;
 declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<string>>;
 export default _default;

package/dist/runtime/server/instagram-embed.js

@@ -1,5 +1,128 @@
 import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { $fetch } from "ofetch";
+import { ELEMENT_NODE, parse, renderSync, TEXT_NODE, walkSync } from "ultrahtml";
+export const RSRC_RE = /url\(\/rsrc\.php([^)]+)\)/g;
+export const AMP_RE = /&/g;
+export const SCONTENT_RE = /https:\/\/scontent[^"'\s),]+\.cdninstagram\.com[^"'\s),]+/g;
+export const STATIC_CDN_RE = /https:\/\/static\.cdninstagram\.com[^"'\s),]+/g;
+export const LOOKASIDE_RE = /https:\/\/lookaside\.instagram\.com[^"'\s),]+/g;
+export const INSTAGRAM_IMAGE_HOSTS = ["scontent.cdninstagram.com", "lookaside.instagram.com"];
+export const INSTAGRAM_ASSET_HOST = "static.cdninstagram.com";
+const CHARSET_RE = /@charset\s[^;]+;/gi;
+const IMPORT_RE = /@import\s[^;]+;/gi;
+const WHITESPACE_RE = /\s/;
+const AT_RULE_NAME_RE = /@([\w-]+)/;
+const MULTI_SPACE_RE = /\s+/g;
+const SRCSET_SPLIT_RE = /\s+/;
+export function proxyImageUrl(url) {
+  return `/_scripts/embed/instagram-image?url=${encodeURIComponent(url.replace(AMP_RE, "&"))}`;
+}
+export function proxyAssetUrl(url) {
+  return `/_scripts/embed/instagram-asset?url=${encodeURIComponent(url.replace(AMP_RE, "&"))}`;
+}
+export function rewriteUrl(url) {
+  try {
+    const parsed = new URL(url);
+    if (parsed.hostname === INSTAGRAM_ASSET_HOST)
+      return proxyAssetUrl(url);
+    if (INSTAGRAM_IMAGE_HOSTS.some((h) => parsed.hostname === h || parsed.hostname.endsWith(`.cdninstagram.com`)))
+      return proxyImageUrl(url);
+  } catch {
+  }
+  return url;
+}
+export function rewriteUrlsInText(text) {
+  return text.replace(SCONTENT_RE, (m) => proxyImageUrl(m)).replace(STATIC_CDN_RE, (m) => proxyAssetUrl(m)).replace(LOOKASIDE_RE, (m) => proxyImageUrl(m));
+}
+function removeNode(node) {
+  node.type = TEXT_NODE;
+  node.value = "";
+  node.name = void 0;
+  node.attributes = {};
+  node.children = [];
+}
+export function scopeCss(css, scopeSelector) {
+  let result = css.replace(CHARSET_RE, "");
+  result = result.replace(IMPORT_RE, "");
+  return processRules(result, scopeSelector);
+}
+function processRules(css, scopeSelector) {
+  const output = [];
+  let i = 0;
+  while (i < css.length) {
+    while (i < css.length && WHITESPACE_RE.test(css[i])) i++;
+    if (i >= css.length)
+      break;
+    if (css[i] === "@") {
+      const atRule = extractAtRule(css, i);
+      if (atRule) {
+        const atName = atRule.content.match(AT_RULE_NAME_RE)?.[1]?.toLowerCase();
+        if (atName === "media" || atName === "supports" || atName === "layer") {
+          const braceStart = atRule.content.indexOf("{");
+          const innerCss = atRule.content.slice(braceStart + 1, -1);
+          const scopedInner = processRules(innerCss, scopeSelector);
+          output.push(`${atRule.content.slice(0, braceStart + 1) + scopedInner}}`);
+        } else if (atName === "keyframes" || atName === "-webkit-keyframes" || atName === "font-face") {
+          output.push(atRule.content);
+        }
+        i = atRule.end;
+        continue;
+      }
+    }
+    const bracePos = css.indexOf("{", i);
+    if (bracePos === -1)
+      break;
+    const selector = css.slice(i, bracePos).trim();
+    const block = extractBlock(css, bracePos);
+    if (!block)
+      break;
+    i = block.end;
+    if (!selector)
+      continue;
+    const selectors = selector.split(",").map((s) => s.trim());
+    const filteredSelectors = selectors.filter((s) => {
+      const normalized = s.replace(MULTI_SPACE_RE, " ").trim().toLowerCase();
+      return normalized !== ":root" && normalized !== "html" && normalized !== "body" && !normalized.startsWith(":root ") && !normalized.startsWith("html ") && !normalized.startsWith("body ") && normalized !== "html, body";
+    });
+    if (filteredSelectors.length === 0)
+      continue;
+    const scopedSelectors = filteredSelectors.map((s) => {
+      return `${scopeSelector} ${s}`;
+    });
+    output.push(`${scopedSelectors.join(", ")} ${block.content}`);
+  }
+  return output.join("\n");
+}
+function extractAtRule(css, start) {
+  const bracePos = css.indexOf("{", start);
+  const semiPos = css.indexOf(";", start);
+  if (semiPos !== -1 && (bracePos === -1 || semiPos < bracePos)) {
+    return { content: css.slice(start, semiPos + 1), end: semiPos + 1 };
+  }
+  if (bracePos === -1)
+    return null;
+  const block = extractBlock(css, bracePos);
+  if (!block)
+    return null;
+  return {
+    content: css.slice(start, bracePos) + block.content,
+    end: block.end
+  };
+}
+function extractBlock(css, openBrace) {
+  let depth = 0;
+  for (let j = openBrace; j < css.length; j++) {
+    if (css[j] === "{") {
+      depth++;
+    } else if (css[j] === "}") {
+      depth--;
+      if (depth === 0) {
+        return { content: css.slice(openBrace, j + 1), end: j + 1 };
+      }
+    }
+  }
+  return null;
+}
 export default defineEventHandler(async (event) => {
   const query = getQuery(event);
   const postUrl = query.url;
@@ -27,11 +150,10 @@ export default defineEventHandler(async (event) => {
   }
   const pathname = parsedUrl.pathname.endsWith("/") ? parsedUrl.pathname : `${parsedUrl.pathname}/`;
   const cleanUrl = parsedUrl.origin + pathname;
-  const embedUrl = cleanUrl + "embed/" + (captions ? "captioned/" : "");
+  const embedUrl = `${cleanUrl}embed/${captions ? "captioned/" : ""}`;
   const html = await $fetch(embedUrl, {
     headers: {
       "Accept": "text/html",
-      // Use simple UA - full Chrome UA triggers JS-heavy version without static content
       "User-Agent": "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
     }
   }).catch((error) => {
@@ -40,18 +162,45 @@ export default defineEventHandler(async (event) => {
       statusMessage: error.statusMessage || "Failed to fetch Instagram embed"
     });
   });
+  const ast = parse(html);
   const cssUrls = [];
-  const linkRegex = /<link[^>]+rel=["']stylesheet["'][^>]+href=["']([^"']+)["'][^>]*>/gi;
-  let match;
-  while ((match = linkRegex.exec(html)) !== null) {
-    if (match[1])
-      cssUrls.push(match[1]);
-  }
-  const linkRegex2 = /<link[^>]+href=["']([^"']+)["'][^>]+rel=["']stylesheet["'][^>]*>/gi;
-  while ((match = linkRegex2.exec(html)) !== null) {
-    if (match[1])
-      cssUrls.push(match[1]);
-  }
+  walkSync(ast, (node) => {
+    if (node.type !== ELEMENT_NODE)
+      return;
+    if (node.name === "link" && node.attributes.rel === "stylesheet" && node.attributes.href) {
+      cssUrls.push(node.attributes.href);
+      removeNode(node);
+      return;
+    }
+    if (node.name === "script" || node.name === "noscript" || node.name === "style") {
+      removeNode(node);
+      return;
+    }
+    for (const attr of ["src", "poster"]) {
+      if (node.attributes[attr])
+        node.attributes[attr] = rewriteUrl(node.attributes[attr]);
+    }
+    if (node.attributes.srcset) {
+      node.attributes.srcset = node.attributes.srcset.split(",").map((entry) => {
+        const parts = entry.trim().split(SRCSET_SPLIT_RE);
+        const url = parts[0];
+        const descriptor = parts.slice(1).join(" ");
+        return url ? `${rewriteUrl(url)}${descriptor ? ` ${descriptor}` : ""}` : entry;
+      }).join(", ");
+    }
+    if (node.attributes.style)
+      node.attributes.style = rewriteUrlsInText(node.attributes.style);
+  });
+  walkSync(ast, (node) => {
+    if (node.type === TEXT_NODE && node.value)
+      node.value = rewriteUrlsInText(node.value);
+  });
+  let bodyNode = null;
+  walkSync(ast, (node) => {
+    if (node.type === ELEMENT_NODE && node.name === "body")
+      bodyNode = node;
+  });
+  const bodyHtml = bodyNode ? bodyNode.children.map((child) => renderSync(child)).join("") : renderSync(ast);
   const cssContents = await Promise.all(
     cssUrls.map(
       (url) => $fetch(url, {
@@ -61,31 +210,20 @@ export default defineEventHandler(async (event) => {
   );
   let combinedCss = cssContents.join("\n");
   combinedCss = combinedCss.replace(
-    /url\(\/rsrc\.php([^)]+)\)/g,
-    (_m, path) => `url(/api/_scripts/instagram-embed-asset?url=${encodeURIComponent(`https://static.cdninstagram.com/rsrc.php${path}`)})`
+    RSRC_RE,
+    (_m, path) => `url(/_scripts/embed/instagram-asset?url=${encodeURIComponent(`https://static.cdninstagram.com/rsrc.php${path}`)})`
   );
+  combinedCss = rewriteUrlsInText(combinedCss);
+  combinedCss = scopeCss(combinedCss, ".instagram-embed-root");
   const baseStyles = `
-    html { background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px; }
-    #splash-screen { display: none !important; }
-    .Embed { opacity: 1 !important; visibility: visible !important; }
-    .EmbeddedMedia, .EmbeddedMediaImage { display: block !important; visibility: visible !important; }
+    .instagram-embed-root { background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px; }
+    .instagram-embed-root #splash-screen { display: none !important; }
+    .instagram-embed-root .Embed { opacity: 1 !important; visibility: visible !important; }
+    .instagram-embed-root .EmbeddedMedia, .instagram-embed-root .EmbeddedMediaImage { display: block !important; visibility: visible !important; }
   `;
-  let rewrittenHtml = html.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/<link[^>]+rel=["']stylesheet["'][^>]*>/gi, "").replace(/<link[^>]+href=["'][^"']+\.css[^"']*["'][^>]*>/gi, "").replace(/<noscript>[\s\S]*?<\/noscript>/gi, "").replace(
-    /https:\/\/scontent[^"'\s),]+\.cdninstagram\.com[^"'\s),]+/g,
-    (m) => `/api/_scripts/instagram-embed-image?url=${encodeURIComponent(m.replace(/&amp;/g, "&"))}`
-  ).replace(
-    /https:\/\/static\.cdninstagram\.com[^"'\s),]+/g,
-    (m) => `/api/_scripts/instagram-embed-asset?url=${encodeURIComponent(m.replace(/&amp;/g, "&"))}`
-  ).replace(
-    /https:\/\/lookaside\.instagram\.com[^"'\s),]+/g,
-    (m) => `/api/_scripts/instagram-embed-image?url=${encodeURIComponent(m.replace(/&amp;/g, "&"))}`
-  );
-  rewrittenHtml = rewrittenHtml.replace(
-    "</head>",
-    `<style>${baseStyles}
-${combinedCss}</style></head>`
-  );
+  const result = `<div class="instagram-embed-root"><style>${baseStyles}
+${combinedCss}</style>${bodyHtml}</div>`;
   setHeader(event, "Content-Type", "text/html");
   setHeader(event, "Cache-Control", "public, max-age=600, s-maxage=600");
-  return rewrittenHtml;
+  return result;
 });