What is an appropiate Content-Security-Policy (CSP) for embedding an application on the Zoom Client

Zoom Apps
#1

We are developing the integration for the ClixieMedia. We are able to show the Clixie application within the Zoom client, but some of the styles are not applied correctly.

The CSP header that is currently configured is:

default-src ‘self’ http: https: ws: wss: data: blob: ‘unsafe-inline’ ‘unsafe-eval’; frame-ancestors ‘self’

The result, using this header, is that the page does not look good, because of some unapplied styles.

  • what is a better header so the page displays correctly on the Zoom client?
  • how to debug the page in the Zoom Client? The zoom client is running on a Mac (v 10.15.7), and it’s my understanding that it’s using WebKit.

Thanks.!!

#2

@development4 How are you importing the styles that are blocked? Do you see any errors in the JS console? For the most part, you should see that you can use styles from the same origin but you need to include any external styles in the style-src directive.

We have an example of the CSP headers here:

#3

Hi

the page being rendered does include some external CSS and JS files. But I have included them into the CSP header.

One issue I have is not having the ability to review what policy failed. In the browser, I usually do this using the console from the developer tools, but in the Zoom Client I do not have access to this.

Is there any other way to review the console, or at least the policy violations, in the zoom client?

Thanks…!

#4

Hi.

the styles are still not being applied in the clixie app integration. But I was able to activate the CSP reporting capabilities, and now I receive the CSP violations to review them.

In this gist https://gist.github.com/alfredox/09eb87663dcc0a89cf972e823f60e8b4 I document the violations. I have to include them as an external gist, because I could not include them as text, nor as an image.

Do you have any idea why this is happening? Or any suggestion that would help in the resolution of this issue?

The Zoom Client version is: Version: 5.11.6 (9890) in Mac OS X 10.15.7.

Thanks…!

#5

@development4 you do have access to the console actually.

Instructions for enabling them here.

#6

Thanks. I was able to activate the console.

The issue is that it’s still not working, I am not able to load external JS/CSS/Fonts in the page.

I created a video to show you this.

Thanks…!

#7

Hey @development4 yeah, this is known thing that i messaged about earlier.

I’ve gone around it by not loading anything from a cdn for now and just bundling my code with esbuild.

#8

No problem for that JS library. I included it as an example but has been removed.

The issue we have is that, even though we do bundle most of the libraries (JS/CSS) in the page, there are some that we cannot bundle.

For instance, Google Fonts should be served from Google. We apply the CSP directives exemplified here Example Using Google Fonts with a Content-Security-Policy, but still does not work.

Also, our video player library that is stored in AWS S3/Cloudfront, in the server d2ywhs8rofwyum.cloudfront.net, we cannot load it by applying the CSP directive.

What can we do with these cases that cannot be bundled?

Thanks for your prompt responses…!

#9

Not sure about the video, but I am able to get google fonts loading.

 {
    "Referrer-Policy": "same-origin",
    "Content-Security-Policy": (
         "default-src 'self';"
         "style-src 'self' 'unsafe-inline' fonts.googleapis.com; "
         "script-src 'self' 'unsafe-inline';"
         "font-src fonts.gstatic.com;"
     ),
     "X-Content-Type-Options": "nosniff",
     "Strict-Transport-Security": "max-age=31536000",
}

you have to mirror the things you put in your csp on marketplace.zoom.com in your app configuration as well just fyi.

#10

Added the configuration for the font. It’s working now.

The issue we have is with the additional domains: for instance, we use d2ywhs8rofwyum.cloudfront.net (from AWS) to serve some of our static JS libraries. But when added to the app configuration (on the app marketplace), it appears the following message:

Domain violates Zoom App Marketplace domain policy. Reason: Domain permits serving user-generated content.

What do you suggest we do about those libraries loaded from that domain?
Is it possible to have exceptions to the domain rules for UGC?

Thanks!

#11

@development4 this is what I linked to before about cdn’s not being allowed. The zoom team said they were looking into that, so maybe something will change. In the meantime, I’m just bundling all of my dependencies manually using a build tool instead of serving things through a cdn.

#12

Thanks for the responses. I already moved out the scripts from that CDN, so the JS is being loaded.

I still have some issues, though.

For development, I added the url clixiedev-alf-resp.ngrok.io in the marketplace configuration page, but it says:

Domain violates Zoom App Marketplace domain policy. Reason: Developer tools should be removed before publishing the app.

I get that those domain should not be configured when launching the app in production. But for development? What can I do to include ngrok sites i use for dev?

Regards!!

#13

I’m getting that error too but I can’t tell if it’s actually interfering with the app running in development. Have you confirmed that its actually an issue?

#14

The issue was solved by not using an ngrok domain. We are still using ngrok, but with a custom domain name (no ngrok.io in the url).

We have another issue.

We are executing a JS, trying to open the domain configured in the Marketplace.

window.open(validUrl);

But it does nothing, and does not throws any message.

What this should is open another tab/window with a Clixie player.

Thanks.!