feat: add Nitro plugin to set Shopify-required response headers for document requests

Author: yan-ad

src/module.ts

@@ -85,11 +85,6 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.hook('app:resolve', () => {
       nuxt.options.app.head = nuxt.options.app.head || {}
       nuxt.options.app.head.meta = [
-        {
-          name: 'content-security-policy',
-          content:
-            "frame-ancestors 'self' *.myshopify.com *.shopify.com *.trycloudflare.com"
-        },
         ...(nuxt.options.app.head.meta || [])
       ]
       nuxt.options.app.head.script = [
@@ -201,6 +196,9 @@ export {}
       nitroConfig.plugins.push(
         resolver.resolve('./runtime/server/plugins/shopify-defaults')
       )
+      nitroConfig.plugins.push(
+        resolver.resolve('./runtime/server/plugins/add-response-headers')
+      )
     })
 
     // ─── Transpile ─────────────────────────────────────────────────────

src/runtime/server/plugins/add-response-headers.ts

@@ -0,0 +1,46 @@
+import { defineNitroPlugin } from 'nitropack/runtime'
+import { getQuery, setResponseHeader } from 'h3'
+
+const APP_BRIDGE_URL = 'https://cdn.shopify.com/shopifycloud/app-bridge.js'
+const POLARIS_URL = 'https://cdn.shopify.com/shopifycloud/polaris.js'
+const CDN_URL = 'https://cdn.shopify.com'
+
+/**
+ * Nitro plugin that adds Shopify-required response headers to every document request.
+ *
+ * Mirrors the behaviour of Shopify's official `addDocumentResponseHeaders`:
+ * - `Content-Security-Policy`: frame-ancestors scoped to the requesting shop
+ * - `Link`: preconnect / preload hints for App Bridge + Polaris CDN assets
+ *
+ * @see https://github.com/Shopify/shopify-app-js/blob/main/packages/apps/shopify-app-react-router/src/server/authenticate/helpers/add-response-headers.ts
+ */
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('request', (event) => {
+    const query = getQuery(event)
+    const shop = typeof query.shop === 'string' ? query.shop : undefined
+
+    // Link header — preconnect to CDN + preload App Bridge & Polaris scripts
+    if (shop) {
+      setResponseHeader(
+        event,
+        'Link',
+        `<${CDN_URL}>; rel="preconnect", <${APP_BRIDGE_URL}>; rel="preload"; as="script", <${POLARIS_URL}>; rel="preload"; as="script"`
+      )
+    }
+
+    // Content-Security-Policy — scope frame-ancestors to the requesting shop
+    if (shop) {
+      setResponseHeader(
+        event,
+        'Content-Security-Policy',
+        `frame-ancestors https://${shop} https://admin.shopify.com https://*.spin.dev https://admin.myshopify.io https://admin.shop.dev;`
+      )
+    } else {
+      setResponseHeader(
+        event,
+        'Content-Security-Policy',
+        `frame-ancestors https://*.myshopify.com https://admin.shopify.com https://*.spin.dev https://admin.myshopify.io https://admin.shop.dev;`
+      )
+    }
+  })
+})