🐛 Fix allowed origins when embedded in iframe

Closes #1518

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.87",
+  "version": "0.2.88",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
@@ -48,4 +48,4 @@
     "tailwindcss": "3.3.3",
     "typescript": "5.4.5"
   }
-}
+}

packages/embeds/js/src/components/Bot.tsx

@@ -29,6 +29,7 @@ import {
   defaultFontType,
   defaultProgressBarPosition,
 } from '@typebot.io/schemas/features/typebot/theme/constants'
+import { CorsError } from '@/utils/CorsError'
 
 export type BotProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -106,6 +107,10 @@ export const Bot = (props: BotProps & { class?: string }) => {
       )
     }
 
+    if (error instanceof CorsError) {
+      return setError(new Error(error.message))
+    }
+
     if (!data) {
       if (error) {
         console.error(error)

packages/embeds/js/src/queries/startChatQuery.ts

@@ -11,6 +11,7 @@ import {
   StartPreviewChatInput,
 } from '@typebot.io/schemas'
 import ky from 'ky'
+import { CorsError } from '@/utils/CorsError'
 
 type Props = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -102,27 +103,40 @@ export async function startChatQuery({
   }
 
   try {
-    const data = await ky
-      .post(
-        `${
-          isNotEmpty(apiHost) ? apiHost : guessApiHost()
-        }/api/v1/typebots/${typebotId}/startChat`,
-        {
-          json: {
-            isStreamEnabled: true,
-            prefilledVariables,
-            resultId,
-            isOnlyRegistering: false,
-          } satisfies Omit<
-            StartChatInput,
-            'publicId' | 'textBubbleContentFormat'
-          >,
-          timeout: false,
-        }
-      )
-      .json<InitialChatReply>()
+    const iframeReferrerOrigin =
+      parent !== window ? new URL(document.referrer).origin : undefined
+    const response = await ky.post(
+      `${
+        isNotEmpty(apiHost) ? apiHost : guessApiHost()
+      }/api/v1/typebots/${typebotId}/startChat`,
+      {
+        headers: {
+          'x-typebot-iframe-referrer-origin': iframeReferrerOrigin,
+        },
+        json: {
+          isStreamEnabled: true,
+          prefilledVariables,
+          resultId,
+          isOnlyRegistering: false,
+        } satisfies Omit<
+          StartChatInput,
+          'publicId' | 'textBubbleContentFormat'
+        >,
+        timeout: false,
+      }
+    )
 
-    return { data }
+    const corsAllowOrigin = response.headers.get('access-control-allow-origin')
+
+    if (
+      iframeReferrerOrigin &&
+      corsAllowOrigin &&
+      corsAllowOrigin !== '*' &&
+      !iframeReferrerOrigin.includes(corsAllowOrigin)
+    )
+      throw new CorsError(corsAllowOrigin)
+
+    return { data: await response.json<InitialChatReply>() }
   } catch (error) {
     return { error }
   }

packages/embeds/js/src/utils/CorsError.ts

@@ -0,0 +1,5 @@
+export class CorsError extends Error {
+  constructor(origin: string) {
+    super('This bot can only be executed on ' + origin)
+  }
+}

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.87",
+  "version": "0.2.88",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -42,4 +42,4 @@
     "next": "12.x || 13.x || 14.x",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   }
-}
+}

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.87",
+  "version": "0.2.88",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -45,4 +45,4 @@
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   }
-}
+}