Getting csv error for embedding join url in an iframe

Meeting SDK Web
1

hello I am trying to start and join a meeting using iframe but for chrome, safari and IE browsers are throwing content security policy error but for firefox I am able to join meetings without any issues. Is there any solution for this? for this?

  <iframe
          id="iframe_id"
          sandbox="allow-forms allow-scripts allow-same-origin"
          allow="microphone; camera"
          style={{ border: "none", height: "100%", width: "100%" }}
          src={`https://zoom.us/wc/${meetingNumber}/join?tk=${registrant}&prefer=1&un=c3JpaGFyc2g`}></iframe>

error

[Report Only] Refused to frame 'https://zoom.us/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
2

Hey @akash1,

Thank you for reaching out to the Zoom Developer Forum. Currently, the Web SDK does not support being displayed in an iframe.

This is because, as you’ve seen, browser security and privacy policies may interfere. Instead, you should import the SDK directly on your web page. Please see our Sample Web App for an example of how this can be done.

I hope that helps! Let me know if you have any questions.

Thanks,
Max

3

for web sdk when i try to use scripts in html code i am getting errors
//code

<!DOCTYPE html>

<head>
    <title>Zoom WebSDK</title>
    <meta charset="utf-8" />
   <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.6/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.6/css/react-select.css" />
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="origin-trial" content="">
</head>

<body>
    <div><button id="myButton">Click me</button></div>
     <!-- import ZoomMtg dependencies -->
     <script src="https://source.zoom.us/1.9.5/lib/vendor/react.min.js"></script>
     <script src="https://source.zoom.us/1.9.5/lib/vendor/react-dom.min.js"></script>
     <script src="https://source.zoom.us/1.9.5/lib/vendor/redux.min.js"></script>
     <script src="https://source.zoom.us/1.9.5/lib/vendor/redux-thunk.min.js"></script>
     <script src="https://source.zoom.us/1.9.5/lib/vendor/lodash.min.js"></script>
 
     <!-- import ZoomMtg -->
     <script src="https://source.zoom.us/zoom-meeting-1.9.5.min.js"></script>
     
     <!-- import local .js file -->
     <script src="js/index.js"></script>
</body>

</html>

//error

Screenshot from 2021-07-10 10-10-48
Screenshot from 2021-07-10 10-10-483072×1728 544 KB

4

It looks like you have script-src set to ‘self’ in your server CSP policies. Please check your server configuration to ensure that it allows requesting resources that are external to your server.

As a test, you can run the Sample Web App to confirm the expected behavior.

Thanks,
Max

5

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