Getting csv error for embedding join url in an iframe

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'".

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

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

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