Embedding websites in a Zoom App

Zoom Apps
1

I’m trying to build a Zoom App to be able to play YouTube videos within Zoom. I wish to embed a YouTube video, and I’ve allowed youtube.com in my domain list. However, when I open my app in either my browser or the Zoom client, the box where YouTube is supposed to be embedded instead shows a white box and reads “This content is blocked; contact the site owner.” There has already been a forum post about this topic, and I tried the fix it suggested (which was to add the embedding domain into the allow list) but that didn’t work. Can someone please help me resolve this?

Here’s my embed code:

 p You're viewing your Zoom App through the browser. 
    a(href=`/install`) Click Here
    |  to install your app in Zoom.
    iframe(width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY")
2

Are there any console errors here that might indicate what’s happening? I expect you will need to put an unsafe-eval or unsafe-inline in the CSP header you’re using.

Likewise, you mentioned there was a solution in another post. Can you link that post here?

3

The error I receive is:

Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive: "default-src self". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

Here’s the link to the other post: Iframe in a Zoom app - Zoom Apps - Zoom Developer Forum

Where/how do I add a CSP header? And what should its contents be?

4

Hi @findprajju

Content Security Policy (CSP) headers are set on the response coming from the backend server. In this case, you need to add another domain to the frame-src portion. Generally this is done in server middleware.

Take a look here to see how it is set in the Zoom example app: zoomapps-advancedsample-react/middleware.js at d4c7c9a3001a57b8b4e5e93b727d7babb8dffd31 · zoom/zoomapps-advancedsample-react · GitHub

and: zoomapps-advancedsample-react/server.js at d4c7c9a3001a57b8b4e5e93b727d7babb8dffd31 · zoom/zoomapps-advancedsample-react · GitHub

2 Likes
5

Thank you very much for your help. I have my iframe working in the browser.

However, when I open my app in Zoom, the iframe does not show up.
According to the network console, the request is processed with an HTTP 403 error.
Here is the code I use to embed my YouTube video into Zoom:

if isZoom
        p Welcome to your Zoom App
        iframe(width="60%" height='600' src="https://www.youtube.com/embed/c6XHSwrUbeQ")
6

Have you added youtube.com to the domain allow list?

7

Yes, I have added to my domain allow list. It still doesn’t work…

8

Could you regenerate your publishable URL after updating domain allow list?

9

My app isn’t published yet; I’m still developing it using ngrok as a server. As a matter of curiosity, how would I deploy my app when I’m finished developing it?

10

Please make sure that you have added www.youtube.com to your domain allow list and re-install your application.

After that, ensure that you have added the embed URL to the frame-src field of your CSP header.

With that, you should be able to display an embedded YouTube video without an issue. I hope that helps! Let me know if you have any questions.