Web Cross-Origin Isolation

To optimize Web SDK performance on Chrome, follow the steps below to enable origin trials for SharedArrayBuffers in non-isolated pages on Desktop platforms.

  1. Go to Chrome Origin Trials and scroll down to SharedArrayBuffers in non-isolated pages on Desktop platforms.
  1. Click REGISTER to request a token for your origin.
  1. Add the token to your pages. See the examples below for how to do this for HTML or Nginx.

HTML

Add a <meta> tag to the head of each page. For example:

<!DOCTYPE html>
<head>
	<meta http-equiv=”origin-trial” content=”TOKEN_HERE”>

Nginx

Add the token using an Origin-Trial HTTP header. For example:

location /meeting.html {
	add_header 'Origin-Trial' 'OriginTrial******1',
	add_header 'Origin-Trial' 'OriginTrial******2',
}

Verify changes

To verify that changes were applied to your site, in a console, type:

typeof SharedArrayBuffer ==='function'

If the value is true, it’s correct.

We also recommend that you enable origin trials for WebAssembly SIMD and WebCodecs.

Details and advanced option

Chrome is restricting the use of SharedArrayBuffer to enable cross-origin isolation, starting in Chrome 92, with a full deprecation scheduled for Chrome 96.

You should choose one of these two options to address cross-origin isolation in the Zoom Web SDK:

  • The recommended option to enable origin trials for SharedArrayBuffers in non-isolated pages on Desktop platforms described above gives you a temporary extension to use SharedArrayBuffers until the Chrome 96 release. We recommend this option as it allows users to continue using static assets that do not have cross-origin headers, like images and icons.
OR

What is cross-origin isolation?

Cross-origin isolated pages are a security feature on the web that restricts how documents or scripts interact with resources from other origins.

Configuring Cross Origin Opener Policy (COOP) will identify and isolate documents that should not interact with the top-level window. Configuring Cross Origin Embedder Policy (COEP) will prevent documents from loading any resources that are not explicitly granted access permissions.

For more details, see the Chrome Developers blog post SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92, Delaying the Desktop Chrome change and the Mozilla Developer Network (MDN) Web Docs for SharedArrayBuffer.

Prerequisites

  • Web Meeting SDK 1.9.5 installed
  • Zoom Web 2021.04 release

Advanced: Enable cross-origin isolation

We have included a helper.html file in the sample app to act as a proxy between the meeting.html page and the Zoom registration page. See the workflow diagram below for details.

Enable the cross origin headers for your site. See the web.dev article Making your website “cross-origin isolated” using COOP and COEP for more details.

For example, the steps below show how to configure your web server for cross-origin isolation using the Web SDK sample app and Nginx.

  1. Using Nginx, navigate to the Web SDK meeting.html file and add the COEP and COOP headers with the keyword require-corp for COEP and same-origin for COOP.
location /meeting.html {
	add_header 'cross-origin-resource-policy' '*';
	add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
	add_header 'Cross-Origin-Opener-Policy' 'same-origin';
}
  1. Navigate to the Web SDK helper.html file and add the COEP and COOP headers and use the keyword unsafe-none in both headers.
location /helper.html {
	add_header 'Cross-Origin-Embedder-Policy' 'unsafe-none';
	add_header 'Cross-Origin-Opener-Policy' 'unsafe-none';
}
  1. Initialize your meeting to use the helper.html file.
ZoomMtg.init({
      disableCORP: !window.crossOriginIsolated, // default true
      helper: './helper.html' // default helper.html url path
      });

Verify that the changes were successful

To verify your changes successfully were applied, follow these steps.

  1. Open the Chrome Developer Tools. If you see the following screen, your changes did not correctly apply.
  1. In the Network tab in the Developer Tools, double-check that you applied the correct keywords to the headers in the meeting.html file.
  1. Double-check that you applied the correct keywords to the headers in the helper.html file.

Test cross-origin isolation with our demo

You can run our demo with with CORP (Web isolation, chrome91) with:

npm run corp

See the zoom/sample-app-web: Zoom Web SDK Sample App for details.

To learn more

All assets and webpages must have cross-origin isolation headers to use SharedArrayBuffers without the origin trial. The way you enable these headers depends on your web server backend set-up and architecture. See the web.dev article, A guide to enable cross-origin isolation, for more information.