feat: add CSP and some security headers to HTML pages (#2075)

serhalp · 43081j · autofix-ci[bot] · web-flow · commit d166ce1e7cac · 2026-03-28T16:27:27.000Z
Co-authored-by: James Garbutt &lt;43081j@users.noreply.github.com&gt;
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/app/composables/useRepoMeta.ts b/app/composables/useRepoMeta.ts
@@ -1,5 +1,5 @@
 import type { ProviderId, RepoRef } from '#shared/utils/git-providers'
-import { parseRepoUrl, GITLAB_HOSTS } from '#shared/utils/git-providers'
+import { GIT_PROVIDER_API_ORIGINS, parseRepoUrl, GITLAB_HOSTS } from '#shared/utils/git-providers'
 
 // TTL for git repo metadata (10 minutes - repo stats don't change frequently)
 const REPO_META_TTL = 60 * 10
@@ -134,7 +134,7 @@ const githubAdapter: ProviderAdapter = {
     let res: UnghRepoResponse | null = null
     try {
       const { data } = await cachedFetch<UnghRepoResponse>(
-        `https://ungh.cc/repos/${ref.owner}/${ref.repo}`,
+        `${GIT_PROVIDER_API_ORIGINS.github}/repos/${ref.owner}/${ref.repo}`,
         { headers: { 'User-Agent': 'npmx', ...options.headers }, ...options },
         UNGH_REPO_META_TTL,
       )
@@ -256,7 +256,7 @@ const bitbucketAdapter: ProviderAdapter = {
     let res: BitbucketRepoResponse | null = null
     try {
       const { data } = await cachedFetch<BitbucketRepoResponse>(
-        `https://api.bitbucket.org/2.0/repositories/${ref.owner}/${ref.repo}`,
+        `${GIT_PROVIDER_API_ORIGINS.bitbucket}/2.0/repositories/${ref.owner}/${ref.repo}`,
         { headers: { 'User-Agent': 'npmx', ...options.headers }, ...options },
         REPO_META_TTL,
       )
@@ -314,7 +314,7 @@ const codebergAdapter: ProviderAdapter = {
     let res: GiteaRepoResponse | null = null
     try {
       const { data } = await cachedFetch<GiteaRepoResponse>(
-        `https://codeberg.org/api/v1/repos/${ref.owner}/${ref.repo}`,
+        `${GIT_PROVIDER_API_ORIGINS.codeberg}/api/v1/repos/${ref.owner}/${ref.repo}`,
         { headers: { 'User-Agent': 'npmx', ...options.headers }, ...options },
         REPO_META_TTL,
       )
@@ -372,7 +372,7 @@ const giteeAdapter: ProviderAdapter = {
     let res: GiteeRepoResponse | null = null
     try {
       const { data } = await cachedFetch<GiteeRepoResponse>(
-        `https://gitee.com/api/v5/repos/${ref.owner}/${ref.repo}`,
+        `${GIT_PROVIDER_API_ORIGINS.gitee}/api/v5/repos/${ref.owner}/${ref.repo}`,
         { headers: { 'User-Agent': 'npmx', ...options.headers }, ...options },
         REPO_META_TTL,
       )
@@ -625,7 +625,7 @@ const radicleAdapter: ProviderAdapter = {
     let res: RadicleProjectResponse | null = null
     try {
       const { data } = await cachedFetch<RadicleProjectResponse>(
-        `https://seed.radicle.at/api/v1/projects/${ref.repo}`,
+        `${GIT_PROVIDER_API_ORIGINS.radicle}/api/v1/projects/${ref.repo}`,
         { headers: { 'User-Agent': 'npmx', ...options.headers }, ...options },
         REPO_META_TTL,
       )
diff --git a/modules/security-headers.ts b/modules/security-headers.ts
@@ -0,0 +1,83 @@
+import { defineNuxtModule } from 'nuxt/kit'
+import { BLUESKY_API } from '#shared/utils/constants'
+import { ALL_KNOWN_GIT_API_ORIGINS } from '#shared/utils/git-providers'
+import { TRUSTED_IMAGE_DOMAINS } from '#server/utils/image-proxy'
+
+/**
+ * Adds Content-Security-Policy and other security headers to all pages.
+ *
+ * CSP is delivered via a <meta http-equiv> tag in <head>, so it naturally
+ * only applies to HTML pages (not API routes). The remaining security
+ * headers are set via a catch-all route rule.
+ *
+ * Note: frame-ancestors is not supported in meta-tag CSP, but
+ * X-Frame-Options: DENY (set via route rule) provides equivalent protection.
+ *
+ * Current policy uses 'unsafe-inline' for scripts and styles because:
+ * - Nuxt injects inline scripts for hydration and payload transfer
+ * - Vue uses inline styles for :style bindings and scoped CSS
+ */
+export default defineNuxtModule({
+  meta: { name: 'security-headers' },
+  setup(_, nuxt) {
+    // These assets are embedded directly on blog pages and should not affect image-proxy trust.
+    const cspOnlyImgOrigins = ['https://api.star-history.com', 'https://cdn.bsky.app']
+    const imgSrc = [
+      "'self'",
+      'data:',
+      ...TRUSTED_IMAGE_DOMAINS.map(domain => `https://${domain}`),
+      ...cspOnlyImgOrigins,
+    ].join(' ')
+
+    const connectSrc = [
+      "'self'",
+      'https://*.algolia.net',
+      'https://registry.npmjs.org',
+      'https://api.npmjs.org',
+      'https://npm.antfu.dev',
+      BLUESKY_API,
+      ...ALL_KNOWN_GIT_API_ORIGINS,
+      // Local CLI connector (npmx CLI communicates via localhost)
+      'http://127.0.0.1:*',
+    ].join(' ')
+
+    const frameSrc = ['https://bsky.app', 'https://pdsmoover.com'].join(' ')
+
+    const csp = [
+      `default-src 'none'`,
+      `script-src 'self' 'unsafe-inline'`,
+      `style-src 'self' 'unsafe-inline'`,
+      `img-src ${imgSrc}`,
+      `font-src 'self'`,
+      `connect-src ${connectSrc}`,
+      `frame-src ${frameSrc}`,
+      `base-uri 'self'`,
+      `form-action 'self'`,
+      `object-src 'none'`,
+      `manifest-src 'self'`,
+      'upgrade-insecure-requests',
+    ].join('; ')
+
+    // CSP via <meta> tag — only present in HTML pages, not API responses.
+    nuxt.options.app.head ??= {}
+    const head = nuxt.options.app.head as { meta?: Array<Record<string, string>> }
+    head.meta ??= []
+    head.meta.push({
+      'http-equiv': 'Content-Security-Policy',
+      'content': csp,
+    })
+
+    // Other security headers via route rules (fine on all responses).
+    nuxt.options.routeRules ??= {}
+    const wildCardRules = nuxt.options.routeRules['/**']
+    nuxt.options.routeRules['/**'] = {
+      ...wildCardRules,
+      headers: {
+        ...wildCardRules?.headers,
+        'X-Content-Type-Options': 'nosniff',
+        'X-Frame-Options': 'DENY',
+        'Referrer-Policy': 'strict-origin-when-cross-origin',
+      },
+    }
+  },
+})
diff --git a/server/utils/image-proxy.ts b/server/utils/image-proxy.ts
@@ -29,7 +29,7 @@ import { lookup } from 'node:dns/promises'
 import ipaddr from 'ipaddr.js'
 
 /** Trusted image domains that don't need proxying (first-party or well-known CDNs) */
-const TRUSTED_IMAGE_DOMAINS = [
+export const TRUSTED_IMAGE_DOMAINS = [
   // First-party
   'npmx.dev',
 
diff --git a/shared/utils/git-providers.ts b/shared/utils/git-providers.ts
@@ -387,3 +387,24 @@ export function convertBlobOrFileToRawUrl(url: string, providerId: ProviderId):
 export function isKnownGitProvider(url: string): boolean {
   return parseRepoUrl(url) !== null
 }
+
+/**
+ * API origins used by each provider for client-side repo metadata fetches.
+ * Self-hosted providers are excluded because their origins can be anything.
+ */
+export const GIT_PROVIDER_API_ORIGINS = {
+  github: 'https://ungh.cc', // via UNGH proxy to avoid rate limits
+  bitbucket: 'https://api.bitbucket.org',
+  codeberg: 'https://codeberg.org',
+  gitee: 'https://gitee.com',
+  radicle: 'https://seed.radicle.at',
+} as const satisfies Partial<Record<ProviderId, string>>
+
+/**
+ * All known external API origins that git provider adapters may fetch from.
+ * Includes both the per-provider origins and known self-hosted instances.
+ */
+export const ALL_KNOWN_GIT_API_ORIGINS: readonly string[] = [
+  ...Object.values(GIT_PROVIDER_API_ORIGINS),
+  ...GITLAB_HOSTS.map(host => `https://${host}`),
+]
diff --git a/test/e2e/security-headers.spec.ts b/test/e2e/security-headers.spec.ts
@@ -0,0 +1,39 @@
+import { expect, test } from './test-utils'
+
+test.describe('security headers', () => {
+  test('HTML pages include CSP meta tag and security headers', async ({ page, baseURL }) => {
+    const response = await page.goto(baseURL!)
+    const headers = response!.headers()
+
+    // CSP is delivered via <meta http-equiv> in <head>
+    const cspContent = await page
+      .locator('meta[http-equiv="Content-Security-Policy"]')
+      .getAttribute('content')
+    expect(cspContent).toContain("script-src 'self'")
+    expect(cspContent).toContain('https://api.star-history.com')
+    expect(cspContent).toContain('https://cdn.bsky.app')
+    expect(cspContent).toContain('https://public.api.bsky.app')
+
+    // Other security headers via route rules
+    expect(headers['x-content-type-options']).toBe('nosniff')
+    expect(headers['x-frame-options']).toBe('DENY')
+    expect(headers['referrer-policy']).toBe('strict-origin-when-cross-origin')
+  })
+
+  test('API routes do not include CSP', async ({ page, baseURL }) => {
+    const response = await page.request.get(`${baseURL}/api/registry/package-meta/vue`)
+
+    expect(response.headers()['content-security-policy']).toBeUndefined()
+  })
+
+  // Navigate key pages and assert no CSP violations are logged.
+  // This catches new external resources that weren't added to the CSP.
+  const PAGES = ['/', '/package/nuxt', '/search?q=vue', '/compare', '/blog/alpha-release'] as const
+
+  for (const path of PAGES) {
+    test(`no CSP violations on ${path}`, async ({ goto, cspViolations }) => {
+      await goto(path, { waitUntil: 'hydration' })
+      expect(cspViolations).toEqual([])
+    })
+  }
+})
diff --git a/test/e2e/test-utils.ts b/test/e2e/test-utils.ts
@@ -74,6 +74,19 @@ function isHydrationMismatch(message: ConsoleMessage): boolean {
   return HYDRATION_MISMATCH_PATTERNS.some(pattern => text.includes(pattern))
 }
 
+/**
+ * Detect Content-Security-Policy violations logged to the console.
+ *
+ * Browsers log CSP violations as console errors with a distinctive prefix.
+ * Catching these in e2e tests ensures new external resources are added to the
+ * CSP before they land in production.
+ */
+function isCspViolation(message: ConsoleMessage): boolean {
+  if (message.type() !== 'error') return false
+  const text = message.text()
+  return text.includes('Content-Security-Policy') || text.includes('content security policy')
+}
+
 /**
  * Extended test fixture with automatic external API mocking and hydration mismatch detection.
  *
@@ -83,7 +96,11 @@ function isHydrationMismatch(message: ConsoleMessage): boolean {
  * Hydration mismatches are detected via Vue's console.error output, which is always
  * emitted in production builds when server-rendered HTML doesn't match client expectations.
  */
-export const test = base.extend<{ mockExternalApis: void; hydrationErrors: string[] }>({
+export const test = base.extend<{
+  mockExternalApis: void
+  hydrationErrors: string[]
+  cspViolations: string[]
+}>({
   mockExternalApis: [
     async ({ page }, use) => {
       await setupRouteMocking(page)
@@ -103,6 +120,18 @@ export const test = base.extend<{ mockExternalApis: void; hydrationErrors: strin
 
     await use(errors)
   },
+
+  cspViolations: async ({ page }, use) => {
+    const violations: string[] = []
+
+    page.on('console', message => {
+      if (isCspViolation(message)) {
+        violations.push(message.text())
+      }
+    })
+
+    await use(violations)
+  },
 })
 
 export { expect }
diff --git a/test/fixtures/mock-routes.cjs b/test/fixtures/mock-routes.cjs
@@ -467,6 +467,111 @@ function matchConstellationApi(urlString) {
   return json(null)
 }
 
+const BLUESKY_EMBED_DID = 'did:plc:2gkh62xvzokhlf6li4ol3b3d'
+
+/**
+ * @param {string} urlString
+ * @returns {MockResponse | null}
+ */
+function matchBlueskyApi(urlString) {
+  const url = new URL(urlString)
+
+  if (url.pathname === '/xrpc/com.atproto.identity.resolveHandle') {
+    return json({ did: BLUESKY_EMBED_DID })
+  }
+
+  if (url.pathname === '/xrpc/app.bsky.feed.getPosts') {
+    const requestedUri =
+      url.searchParams.getAll('uris')[0] ||
+      `at://${BLUESKY_EMBED_DID}/app.bsky.feed.post/3md3cmrg56k2r`
+
+    return json({
+      posts: [
+        {
+          uri: requestedUri,
+          author: {
+            did: BLUESKY_EMBED_DID,
+            handle: 'danielroe.dev',
+            displayName: 'Daniel Roe',
+            avatar: `https://cdn.bsky.app/img/avatar/plain/${BLUESKY_EMBED_DID}/mock-avatar@jpeg`,
+          },
+          record: {
+            text: 'Mock Bluesky post for CSP coverage.',
+            createdAt: '2026-03-03T12:00:00.000Z',
+          },
+          embed: {
+            $type: 'app.bsky.embed.images#view',
+            images: [
+              {
+                thumb: `https://cdn.bsky.app/img/feed_thumbnail/plain/${BLUESKY_EMBED_DID}/mock-image@jpeg`,
+                fullsize: `https://cdn.bsky.app/img/feed_fullsize/plain/${BLUESKY_EMBED_DID}/mock-image@jpeg`,
+                alt: 'Mock Bluesky image',
+                aspectRatio: { width: 1200, height: 630 },
+              },
+            ],
+          },
+          likeCount: 42,
+          replyCount: 7,
+          repostCount: 3,
+        },
+      ],
+    })
+  }
+
+  if (url.pathname === '/xrpc/app.bsky.actor.getProfiles') {
+    const actors = url.searchParams.getAll('actors')
+
+    return json({
+      profiles: actors.map(handle => ({
+        handle,
+        avatar: `https://cdn.bsky.app/img/avatar/plain/${BLUESKY_EMBED_DID}/mock-avatar`,
+      })),
+    })
+  }
+
+  return null
+}
+
+/**
+ * @param {string} _urlString
+ * @returns {MockResponse}
+ */
+function matchBlueskyCdn(_urlString) {
+  return {
+    status: 200,
+    contentType: 'image/svg+xml',
+    body:
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">' +
+      '<rect width="120" height="120" fill="#0ea5e9"/>' +
+      '<circle cx="60" cy="44" r="18" fill="#f8fafc"/>' +
+      '<rect x="24" y="74" width="72" height="18" rx="9" fill="#f8fafc"/>' +
+      '</svg>',
+  }
+}
+
+/**
+ * @param {string} urlString
+ * @returns {MockResponse | null}
+ */
+function matchStarHistoryApi(urlString) {
+  const url = new URL(urlString)
+
+  if (url.pathname === '/svg') {
+    return {
+      status: 200,
+      contentType: 'image/svg+xml',
+      body:
+        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 320">' +
+        '<rect width="640" height="320" fill="#0f172a"/>' +
+        '<path d="M32 256 L160 220 L288 168 L416 120 L544 88 L608 64" stroke="#f59e0b" stroke-width="8" fill="none"/>' +
+        '<text x="32" y="44" fill="#f8fafc" font-family="monospace" font-size="24">Mock Star History</text>' +
+        '</svg>',
+    }
+  }
+
+  return null
+}
+
 /**
  * @param {string} urlString
  * @returns {MockResponse | null}
@@ -524,6 +629,13 @@ const routes = [
     pattern: 'https://constellation.microcosm.blue/**',
     match: matchConstellationApi,
   },
+  { name: 'Bluesky API', pattern: 'https://public.api.bsky.app/**', match: matchBlueskyApi },
+  { name: 'Bluesky CDN', pattern: 'https://cdn.bsky.app/**', match: matchBlueskyCdn },
+  {
+    name: 'Star History API',
+    pattern: 'https://api.star-history.com/**',
+    match: matchStarHistoryApi,
+  },
 ]
 
 /**
