fix: proxy external images in package readmes

package.json

@@ -83,6 +83,7 @@
     "fast-npm-meta": "1.0.0",
     "focus-trap": "^7.8.0",
     "gray-matter": "4.0.3",
+    "ipaddr.js": "2.3.0",
     "marked": "17.0.1",
     "module-replacements": "2.11.0",
     "nuxt": "4.3.1",

server/api/registry/image-proxy/index.get.ts

@@ -0,0 +1,134 @@
+import { createError, getQuery, setResponseHeaders, sendStream } from 'h3'
+import { Readable } from 'node:stream'
+import { CACHE_MAX_AGE_ONE_DAY } from '#shared/utils/constants'
+import { isAllowedImageUrl } from '#server/utils/image-proxy'
+
+/**
+ * Image proxy endpoint to prevent privacy leaks from README images.
+ *
+ * Instead of letting the client's browser fetch images directly from third-party
+ * servers (which exposes visitor IP, User-Agent, etc.), this endpoint fetches
+ * images server-side and forwards them to the client.
+ *
+ * Similar to GitHub's camo proxy: https://github.blog/2014-01-28-proxying-user-images/
+ *
+ * Usage: /api/registry/image-proxy?url=https://example.com/image.png
+ *
+ * Resolves: https://github.com/npmx-dev/npmx.dev/issues/1138
+ */
+export default defineEventHandler(async event => {
+  const query = getQuery(event)
+  const rawUrl = query.url
+  const url = (Array.isArray(rawUrl) ? rawUrl[0] : rawUrl) as string | undefined
+
+  if (!url) {
+    throw createError({
+      statusCode: 400,
+      message: 'Missing required "url" query parameter.',
+    })
+  }
+
+  // Validate URL
+  if (!isAllowedImageUrl(url)) {
+    throw createError({
+      statusCode: 400,
+      message: 'Invalid or disallowed image URL.',
+    })
+  }
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        // Use a generic User-Agent to avoid leaking server info
+        'User-Agent': 'npmx-image-proxy/1.0',
+        'Accept': 'image/*',
+      },
+      redirect: 'follow',
+    })
+
+    // Validate final URL after any redirects to prevent SSRF bypass
+    if (response.url !== url && !isAllowedImageUrl(response.url)) {
+      throw createError({
+        statusCode: 400,
+        message: 'Redirect to disallowed URL.',
+      })
+    }
+
+    if (!response.ok) {
+      throw createError({
+        statusCode: response.status === 404 ? 404 : 502,
+        message: `Failed to fetch image: ${response.status}`,
+      })
+    }
+
+    const contentType = response.headers.get('content-type') || 'application/octet-stream'
+
+    // Only allow image content types
+    if (!contentType.startsWith('image/')) {
+      throw createError({
+        statusCode: 400,
+        message: 'URL does not point to an image.',
+      })
+    }
+
+    // Check Content-Length header if present (may be absent or dishonest)
+    const MAX_SIZE = 10 * 1024 * 1024 // 10 MB
+    const contentLength = response.headers.get('content-length')
+    if (contentLength && Number.parseInt(contentLength, 10) > MAX_SIZE) {
+      throw createError({
+        statusCode: 413,
+        message: 'Image too large.',
+      })
+    }
+
+    if (!response.body) {
+      throw createError({
+        statusCode: 502,
+        message: 'No response body from upstream.',
+      })
+    }
+
+    setResponseHeaders(event, {
+      'Content-Type': contentType,
+      'Cache-Control': `public, max-age=${CACHE_MAX_AGE_ONE_DAY}, s-maxage=${CACHE_MAX_AGE_ONE_DAY}`,
+      // Security headers - prevent content sniffing and restrict usage
+      'X-Content-Type-Options': 'nosniff',
+      'Content-Security-Policy': "default-src 'none'; style-src 'unsafe-inline'",
+    })
+
+    // Stream the response with a size limit to prevent memory exhaustion.
+    // This avoids buffering the entire image into memory before sending.
+    let bytesRead = 0
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const upstream = Readable.fromWeb(response.body as any)
+    const limited = new Readable({
+      read() {
+        /* pulling is driven by upstream push */
+      },
+    })
+
+    upstream.on('data', (chunk: Buffer) => {
+      bytesRead += chunk.length
+      if (bytesRead > MAX_SIZE) {
+        upstream.destroy()
+        limited.destroy(new Error('Image too large'))
+      } else {
+        limited.push(chunk)
+      }
+    })
+    upstream.on('end', () => limited.push(null))
+    upstream.on('error', (err: Error) => limited.destroy(err))
+
+    return sendStream(event, limited)
+  } catch (error: unknown) {
+    // Re-throw H3 errors
+    if (error && typeof error === 'object' && 'statusCode' in error) {
+      throw error
+    }
+
+    throw createError({
+      statusCode: 502,
+      message: 'Failed to proxy image.',
+    })
+  }
+})

server/utils/image-proxy.ts

@@ -0,0 +1,117 @@
+/**
+ * Image proxy utilities for privacy-safe README image rendering.
+ *
+ * Resolves: https://github.com/npmx-dev/npmx.dev/issues/1138
+ */
+
+import ipaddr from 'ipaddr.js'
+
+/** Trusted image domains that don't need proxying (first-party or well-known CDNs) */
+const TRUSTED_IMAGE_DOMAINS = [
+  // First-party
+  'npmx.dev',
+
+  // GitHub (already proxied by GitHub's own camo)
+  'raw.githubusercontent.com',
+  'github.com',
+  'user-images.githubusercontent.com',
+  'avatars.githubusercontent.com',
+  'repository-images.githubusercontent.com',
+  'github.githubassets.com',
+  'objects.githubusercontent.com',
+
+  // GitLab
+  'gitlab.com',
+
+  // CDNs commonly used in READMEs
+  'cdn.jsdelivr.net',
+  'unpkg.com',
+
+  // Well-known badge/shield services
+  'img.shields.io',
+  'shields.io',
+  'badge.fury.io',
+  'badgen.net',
+  'flat.badgen.net',
+  'codecov.io',
+  'coveralls.io',
+  'david-dm.org',
+  'snyk.io',
+  'app.fossa.com',
+  'api.codeclimate.com',
+  'bundlephobia.com',
+  'packagephobia.com',
+]
+
+/**
+ * Check if a URL points to a trusted domain that doesn't need proxying.
+ */
+export function isTrustedImageDomain(url: string): boolean {
+  const parsed = URL.parse(url)
+  if (!parsed) return false
+
+  const hostname = parsed.hostname.toLowerCase()
+  return TRUSTED_IMAGE_DOMAINS.some(
+    domain => hostname === domain || hostname.endsWith(`.${domain}`),
+  )
+}
+
+/**
+ * Validate that a URL is a valid HTTP(S) image URL suitable for proxying.
+ * Blocks private/reserved IPs (SSRF protection) using ipaddr.js for comprehensive
+ * IPv4, IPv6, and IPv4-mapped IPv6 range detection.
+ */
+export function isAllowedImageUrl(url: string): boolean {
+  const parsed = URL.parse(url)
+  if (!parsed) return false
+
+  // Only allow HTTP and HTTPS protocols
+  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+    return false
+  }
+
+  const hostname = parsed.hostname.toLowerCase()
+
+  // Block non-IP hostnames that resolve to internal services
+  if (hostname === 'localhost' || hostname.endsWith('.local') || hostname.endsWith('.internal')) {
+    return false
+  }
+
+  // For IP addresses, use ipaddr.js to check against all reserved ranges
+  // (loopback, private RFC 1918, link-local 169.254, IPv6 ULA fc00::/7, etc.)
+  // ipaddr.process() also unwraps IPv4-mapped IPv6 (e.g. ::ffff:127.0.0.1 → 127.0.0.1)
+  const bare = hostname.startsWith('[') && hostname.endsWith(']') ? hostname.slice(1, -1) : hostname
+  if (ipaddr.isValid(bare)) {
+    const addr = ipaddr.process(bare)
+    if (addr.range() !== 'unicast') {
+      return false
+    }
+  }
+
+  return true
+}
+
+/**
+ * Convert an external image URL to a proxied URL.
+ * Trusted domains are returned as-is.
+ * Returns the original URL for non-HTTP(S) URLs.
+ */
+export function toProxiedImageUrl(url: string): string {
+  // Don't proxy data URIs, relative URLs, or anchor links
+  if (!url || url.startsWith('#') || url.startsWith('data:')) {
+    return url
+  }
+
+  const parsed = URL.parse(url)
+  if (!parsed || (parsed.protocol !== 'http:' && parsed.protocol !== 'https:')) {
+    return url
+  }
+
+  // Trusted domains don't need proxying
+  if (isTrustedImageDomain(url)) {
+    return url
+  }
+
+  // Proxy through our server endpoint
+  return `/api/registry/image-proxy?url=${encodeURIComponent(url)}`
+}

server/utils/readme.ts

@@ -5,6 +5,7 @@ import type { ReadmeResponse, TocItem } from '#shared/types/readme'
 import { convertBlobOrFileToRawUrl, type RepositoryInfo } from '#shared/utils/git-providers'
 import { highlightCodeSync } from './shiki'
 import { convertToEmoji } from '#shared/utils/emoji'
+import { toProxiedImageUrl } from '#server/utils/image-proxy'
 
 /**
  * Playground provider configuration
@@ -256,12 +257,16 @@ function resolveUrl(url: string, packageName: string, repoInfo?: RepositoryInfo)
 // Convert blob/src URLs to raw URLs for images across all providers
 // e.g. https://github.com/nuxt/nuxt/blob/main/.github/assets/banner.svg
 //   → https://github.com/nuxt/nuxt/raw/main/.github/assets/banner.svg
+//
+// External images are proxied through /api/registry/image-proxy to prevent
+// third-party servers from collecting visitor IP addresses and User-Agent data.
+// See: https://github.com/npmx-dev/npmx.dev/issues/1138
 function resolveImageUrl(url: string, packageName: string, repoInfo?: RepositoryInfo): string {
   const resolved = resolveUrl(url, packageName, repoInfo)
-  if (repoInfo?.provider) {
-    return convertBlobOrFileToRawUrl(resolved, repoInfo.provider)
-  }
-  return resolved
+  const rawUrl = repoInfo?.provider
+    ? convertBlobOrFileToRawUrl(resolved, repoInfo.provider)
+    : resolved
+  return toProxiedImageUrl(rawUrl)
 }
 
 // Helper to prefix id attributes with 'user-content-'