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

development4 · July 28, 2022, 1:54pm

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.!!

MaxM · August 3, 2022, 8:21pm

@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:

github.com

zoom/zoomapps-sample-js/blob/a36bd07c3ad433d89c1241118c45e9dd0d854235/app.js#L70


      
                  action: 'sameorigin',
              },
              hsts: {
                  maxAge: 31536000,
              },
              referrerPolicy: 'same-origin',
              crossOriginEmbedderPolicy: false,
              contentSecurityPolicy: {
                  directives: {
                      'default-src': 'self',
                      styleSrc: ["'self'"],
                      scriptSrc: ["'self'", 'https://appssdk.zoom.us/sdk.min.js'],
                      imgSrc: ["'self'", `https://${redirectHost}`],
                      'connect-src': 'self',
                      'base-uri': 'self',
                      'form-action': 'self',
                  },
              },
          };
          
          
app.use(helmet(headers));

development4 · August 16, 2022, 11:07pm

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…!