diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
index d6d550995..46784b661 100644
--- a/playground/nextjs/pages/_app.tsx
+++ b/playground/nextjs/pages/_app.tsx
@@ -34,11 +34,24 @@ export default function App({ Component, pageProps }: AppProps) {
         }
     }, [])
 
+    const localhostDomain = process.env.NEXT_PUBLIC_CROSSDOMAIN ? 'https://localhost:8000' : 'http://localhost:8000'
+
     return (
         <PostHogProvider client={posthog}>
             <Head>
                 <title>PostHog</title>
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
+                {/* CSP - useful for testing our documented recommendations. NOTE: Unsafe is only needed for nextjs pre-loading */}
+                <meta
+                    http-equiv="Content-Security-Policy"
+                    content={`
+                    default-src 'self';
+                    connect-src 'self' ${localhostDomain} https://*.posthog.com;
+                    script-src 'self' 'unsafe-eval' 'unsafe-inline' ${localhostDomain} https://*.posthog.com;
+                    style-src 'self' 'unsafe-inline' ${localhostDomain} https://*.posthog.com;
+                    img-src 'self' ${localhostDomain} https://*.posthog.com;
+                `}
+                />
             </Head>
 
             <main>
