Blocked frame from origin when using client zoom meeting SDK in React Web App

Description
We have a react webapp where we want to integrate zoom meeting SDK. When we add integration as described in example and run the app the app wont load and in console there is error that the frame was blocked for origin. We tried to remove component one by one until we found out that if we remove stripe scripts from app the zoom sdk will load properly but with stripe it will fail on the mentioned error. Any suggestion what how to solve this?

Browser Console Error
zoomus-websdk.umd.min.js:2
Uncaught DOMException: Blocked a frame with origin “localhost:3000” from accessing a cross-origin frame. at localhost:3000/static/js/vendors~main.chunk.js:142812:80

Which Web Meeting SDK version?
2.9.5

To Reproduce(If applicable)

  1. Download react zoom meeting sdk example GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in a React App
  2. add “” to the index.html head section
  3. run app
  4. See error appear in console

Device (please complete the following information):
Google Chrome Version 108.0.5359.126 (Official Build) (64-bit)

@Rootscope are you trying to run this within an iframe?

No. I do not set any iframes in the app myself. But of course SDK itself is manipulating and adding its own DOM elements

missing link in step 2 is < script src=“https://js.stripe.com/v3”></ script> (remove spaces after <)

on second thought stripe js is also injecting it own iframe.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.