Create Zoom Apps for Zoom PWA

Zoom PWA (Progressive Web Client) allows an application to operate as a Zoom App inside the Zoom web client. Creating apps for Zoom PWA follows the standard process for creating a Zoom app.

In this article, we call out only information specific to creating apps for Zoom PWA.

Prerequisites#

• You have read the procedure to create a Zoom app.
• You have a Zoom account .
• Zoom PWA client 5.14.10 or higher.
• Zoom Apps SDK 0.16.12 or higher.

Step 1 - Create a Zoom App with PWA support#

1. Follow the steps to Create a Zoom App.
2. To enable PWA client support, go to the Features page > Surface section. Enable PWA Client.

Step 2 - Download and Install Zoom Apps SDK#

Download and install the Zoom Apps SDK . Add appssdk.zoom.us  to the script-src in Content-Security-Policy. See sample code for headers below.

Step 3 - Get the app context token#

Use the getAppContext() API to get the latest app context token from the PWA client. The API returns a token that contains signed app context data for secure backend validation.

1. Call getAppContext() API after config().

2. Pass the context via a GET request to the backend.

3. Decrypt the app context in the backend, and use the decrypted app context information as required.

   Add cross-origin headers:

   cross-origin-embedder-policy":"require-corp"
   cross-origin-resource-policy":"cross-origin"
   

4. Remove X-Frame headers from your app configuration:

   X-Frame-Options "DENY";
   frame-ancestors 'none'; Content-Security-Policy
   

Example Context Security Policy#

Frontend:

add_header Content-Security-Policy "default-src 'none'; object-src 'none'; worker-src 'none'; connect-src 'self'; script-src 'self' appssdk.zoom.us";
add_header Strict-Transport-Security "max-age=31536000";
add_header X-Content-Type-Options "nosniff";
add_header Referrer-Policy "strict-origin-when-cross-origin";
add_header Cross-Origin-Resource-Policy "cross-origin";
add_header Cross-Origin-Embedder-Policy "require-corp";

Backend:

securityHeaders: {
    strictTransportSecurity: 'max-age=31536000',
    xContentTypeOptions: 'nosniff',
    contentSecurityPolicy: 'default-src 'none'; object-src 'none'; worker-src 'none'; connect-src 'self' ${isDevelopment ? ' ws: wss:' : '' }; script-src 'self' appssdk.zoom.us ; font-src 'self'; img-src 'self';
    referrerPolicy: 'no-referrer',
    crossOriginResourcePolicy: 'cross-origin',
    crossOriginEmbedderPolicy: 'require-corp',
},

Cookie sessions#

Make these changes if you have set up a Cookie Session.

• Add sameSite: 'none' in Cookie Session.
• Add secure: true, in Cookie Session.
• Remove httpOnly: true from Cookie Session (if present).