fix: enable docs website to be embedded in iframe (#1217)

* fix: add logto domains to frame ancestors

* chore: do not pop GOT when embedded in iframe

Author: Darcy Ye

src/theme/Layout/index.tsx

@@ -2,7 +2,7 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import type { WrapperProps } from '@docusaurus/types';
 import type LayoutType from '@theme/Layout';
 import Layout from '@theme-original/Layout';
-import { type ReactNode } from 'react';
+import { type ReactNode, useState, useEffect } from 'react';
 
 import GoogleOneTapInitializer from './GoogleOneTapInitializer';
 import { useGoogleOneTapConfig } from './hooks';
@@ -11,11 +11,24 @@ type Props = WrapperProps<typeof LayoutType>;
 
 export default function LayoutWrapper(props: Props): ReactNode {
   const { config } = useGoogleOneTapConfig();
+  const [isInIframe, setIsInIframe] = useState(false);
+
+  useEffect(() => {
+    // Check if the page is embedded in an iframe
+    try {
+      setIsInIframe(window.self !== window.top);
+    } catch {
+      // If accessing window.top throws an error, we're in a cross-origin iframe
+      setIsInIframe(true);
+    }
+  }, []);
 
   return (
     <>
       <Layout {...props} />
-      {config?.oneTap?.isEnabled && <BrowserOnly>{() => <GoogleOneTapInitializer />}</BrowserOnly>}
+      {config?.oneTap?.isEnabled && !isInIframe && (
+        <BrowserOnly>{() => <GoogleOneTapInitializer />}</BrowserOnly>
+      )}
     </>
   );
 }

static/_headers

@@ -1,2 +1,2 @@
 /*
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://akasha.logto.io https://accounts.google.com; connect-src 'self' https://akasha.logto.io https://accounts.google.com https://auth.logto.dev https://*.logto.dev https://auth.logto.io https://*.logto.io https://api.inkeep.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://accounts.google.com https://fonts.googleapis.com; font-src 'self' https://cdn.jsdelivr.net https://fonts.gstatic.com; frame-src https://accounts.google.com; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; form-action 'self' https://*.logto.dev https://*.logto.io https://cloud.logto.dev https://cloud.logto.io; frame-ancestors 'none'
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://akasha.logto.io https://accounts.google.com; connect-src 'self' https://akasha.logto.io https://accounts.google.com https://auth.logto.dev https://*.logto.dev https://auth.logto.io https://*.logto.io https://api.inkeep.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://accounts.google.com https://fonts.googleapis.com; font-src 'self' https://cdn.jsdelivr.net https://fonts.gstatic.com; frame-src https://accounts.google.com; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; form-action 'self' https://*.logto.dev https://*.logto.io https://cloud.logto.dev https://cloud.logto.io