fix(TU-15591): Listen to trusted iframe load events only (#655)

3rd parties might dispatch load event on iframe (eg. Cookiebot) before the iframe content is actually loaded, breaking the embed functionality (opening the modal window before it is opened by respondent).
Typeform · Jul 8, 2024 · 24ee093 · 24ee093
1 parent 3da55eb
commit 24ee093
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 29 deletions.
diff --git a/packages/embed/src/factories/create-popover/create-popover.spec.ts b/packages/embed/src/factories/create-popover/create-popover.spec.ts
@@ -26,7 +26,7 @@ afterEach(() => {
   mockedLocalStorage.setItem.mockReset()
 })
 
-describe('#createSidetab', () => {
+describe('#createPopover', () => {
   describe('no params', () => {
     beforeEach(() => {
       popover = createPopover('formId')
@@ -45,7 +45,7 @@ describe('#createSidetab', () => {
         jest.runAllTimers()
         expect(screen.getByTestId('spinner-icon')).toBeInTheDocument()
         const iframe = screen.getByTestId('iframe')
-        fireEvent(iframe, new Event('load'))
+        iframe?.onload?.({ isTrusted: true } as Event)
         expect(screen.getByTestId('tf-v1-popover-button-icon')).toBeInTheDocument()
       })
     })
@@ -64,7 +64,7 @@ describe('#createSidetab', () => {
         jest.runAllTimers()
         expect(screen.getByTestId('spinner-icon')).toBeInTheDocument()
         const iframe = screen.getByTestId('iframe')
-        fireEvent(iframe, new Event('load'))
+        iframe?.onload?.({ isTrusted: true } as Event)
         expect(screen.getByTestId('tf-v1-popover-button-icon')).toBeInTheDocument()
         popover.close()
         await waitForElementToBeRemoved(() => screen.queryByTestId('tf-v1-popover-wrapper'))

diff --git a/packages/embed/src/factories/create-popover/create-popover.ts b/packages/embed/src/factories/create-popover/create-popover.ts
@@ -174,12 +174,14 @@ export const createPopover = (formId: string, userOptions: PopoverOptions = {}):
     button.append(notificationDot)
   }
 
-  iframe.onload = () => {
-    popover.classList.add('open')
-    wrapper.style.opacity = '1'
-    closeModal.style.opacity = '1'
-    replaceIcon(spinner, closeIcon)
-    addCustomKeyboardListener(close)
+  iframe.onload = (event) => {
+    if (event?.isTrusted) {
+      popover.classList.add('open')
+      wrapper.style.opacity = '1'
+      closeModal.style.opacity = '1'
+      replaceIcon(spinner, closeIcon)
+      addCustomKeyboardListener(close)
+    }
   }
 
   const open = () => {

diff --git a/packages/embed/src/factories/create-popup/create-popup.ts b/packages/embed/src/factories/create-popup/create-popup.ts
@@ -85,12 +85,14 @@ export const createPopup = (formId: string, userOptions: PopupOptions = {}): Pop
 
   const container = options.container || document.body
 
-  iframe.onload = () => {
-    wrapper.style.opacity = '1'
-    setTimeout(() => {
-      spinner.style.display = 'none'
-    }, 250)
-    addCustomKeyboardListener(close)
+  iframe.onload = (event) => {
+    if (event?.isTrusted) {
+      wrapper.style.opacity = '1'
+      setTimeout(() => {
+        spinner.style.display = 'none'
+      }, 250)
+      addCustomKeyboardListener(close)
+    }
   }
 
   const open = () => {

diff --git a/packages/embed/src/factories/create-sidetab/create-sidetab.spec.ts b/packages/embed/src/factories/create-sidetab/create-sidetab.spec.ts
@@ -1,4 +1,4 @@
-import { screen, waitForElementToBeRemoved, fireEvent } from '@testing-library/dom'
+import { screen, waitForElementToBeRemoved } from '@testing-library/dom'
 
 import { createSidetab, Sidetab } from './create-sidetab'
 
@@ -30,7 +30,7 @@ describe('#createSidetab', () => {
         expect(screen.getByTestId('spinner-icon')).toBeInTheDocument()
         jest.runAllTimers()
         const iframe = screen.getByTestId('iframe')
-        fireEvent(iframe, new Event('load'))
+        iframe?.onload?.({ isTrusted: true } as Event)
         expect(screen.getByTestId('tf-v1-sidetab-button-icon')).toBeInTheDocument()
       })
     })
@@ -49,7 +49,7 @@ describe('#createSidetab', () => {
         expect(screen.getByTestId('spinner-icon')).toBeInTheDocument()
         jest.runAllTimers()
         const iframe = screen.getByTestId('iframe')
-        fireEvent(iframe, new Event('load'))
+        iframe?.onload?.({ isTrusted: true } as Event)
         expect(screen.getByTestId('tf-v1-sidetab-button-icon')).toBeInTheDocument()
         sidetab.close()
         await waitForElementToBeRemoved(() => screen.queryByTestId('tf-v1-sidetab-wrapper'))

diff --git a/packages/embed/src/factories/create-sidetab/create-sidetab.ts b/packages/embed/src/factories/create-sidetab/create-sidetab.ts
@@ -192,10 +192,12 @@ export const createSidetab = (formId: string, userOptions: SidetabOptions = {}):
     sidetab.classList.add('ready')
   }, 250)
 
-  iframe.onload = () => {
-    sidetab.classList.add('open')
-    replaceElementChild(spinner, closeIcon)
-    addCustomKeyboardListener(close)
+  iframe.onload = (event) => {
+    if (event?.isTrusted) {
+      sidetab.classList.add('open')
+      replaceElementChild(spinner, closeIcon)
+      addCustomKeyboardListener(close)
+    }
   }
 
   const open = () => {

diff --git a/packages/embed/src/factories/create-slider/create-slider.ts b/packages/embed/src/factories/create-slider/create-slider.ts
@@ -78,13 +78,14 @@ export const createSlider = (formId: string, userOptions: SliderOptions = {}): S
 
   const container = options.container || document.body
 
-  iframe.onload = () => {
-    wrapper.style[position] = '0'
-    setTimeout(() => {
-      spinner.style.display = 'none'
-    }, 500)
-
-    addCustomKeyboardListener(close)
+  iframe.onload = (event) => {
+    if (event?.isTrusted) {
+      wrapper.style[position] = '0'
+      setTimeout(() => {
+        spinner.style.display = 'none'
+      }, 500)
+      addCustomKeyboardListener(close)
+    }
   }
 
   const open = () => {