Limitations and support

Here are some known limitations and suggestions for handling Cross-Origin Resource Sharing (CORS) and Content Security Policy (CSP).

Browser support

• Internet Explorer browser is not supported.
• Browser privacy mode may cause certain features to be unavailable, such as refresh reconnection. Therefore, you must actively disable "Block third-party cookies".

Join flow limitations

• Session - Only one customer can be in the same session. When a customer is already in the session, other customers cannot join.
• Browser - For the same browser instance and same website domain, only one active browse session is allowed at the same time. For example, if a customer opens a.example.com in one browser tab and activates the Cobrowse SDK, this customer cannot join another cobrowse session on a.example.com in any other browser tabs.

Known render limits

• Synchronization is not supported for some HTML5 markup, such as Canvas, WebGL, Audio and Video, Shadowdom, PDF (rendered with Canvas), and Webcomponent.
• Some built-in form control UI, such as drop-down boxes, date selection boxes, color pickers, and other objects, cannot be synchronized when being triggered, but the selected result can be synchronized once the user interaction has finished, for example, if a user selects an item in a drop-down box.
• Due to server performance limitations, some high-resolution images will be compressed.
• When page A redirects to page B, to maintain the connection on page B, you must integrate the Cobrowse SDK snippet on page B and ensure that pages A and B have the same second-level domain (*.example.com).
• CSS media query rules may produce different effects due to the width and height of the different screens on the customer and agent sides.

Masking limits

• Data masking supports text nodes, form fields (inputs and selects), and iframe, img, and svg elements. Masking applies when an element matches the configured selector directly or when one of its container elements matches.
• Elements inside the Shadow DOM are not supported.
• The custom_element mask type is available only through SDK initialization. The Build account web portal supports only the all_input and custom_input mask types.

Cross-origin limits

• Some images may not be rendered due to "cross-origin" limits of the image server, and the page layout will be inconsistent because of the missing images.
• Some fonts may not be rendered due to "cross-region" limitations of the font server.
• For resources, cross-domain needs to be allowed

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: https://*.zoom.us

Same-origin and cross-origin iframes

If you're using the Cobrowse SDK on a page with same-origin iframes, you do not need to inject additional content into the iframes to use it. However, if you're using the Cobrowse SDK on a page with cross-origin iframes, you must inject the following code snippet into the iframes.

<script>
    const ZOOM_SDK_KEY = "YOUR_SDK_KEY_HERE";
    (function (r, a, b, f, c, d) {
        r[f] = r[f] || {
            init: function () {
                r.ZoomCobrowseSDKInitArgs = arguments;
            },
        };
        var fragment = a.createDocumentFragment();
        function loadJs(url) {
            c = a.createElement(b);
            d = a.getElementsByTagName(b)[0];
            c.async = false;
            c.src = url;
            fragment.appendChild(c);
        }
        loadJs(
            "https://us01-zcb.zoom.us/static/resource/sdk/${ZOOM_SDK_KEY}/js",
        );
        d.parentNode.insertBefore(fragment, d);
    })(window, document, "script", "ZoomCobrowseSDK");
</script>

Content Security Policy header

If you're using Content Security Policy (CSP) on your browsers and want to use any Zoom SDK for web, you must configure your web server to return the Content-Security-Policy header. For example, using the Nginxadd_headerdirective.

add_header 'Content-Security-Policy' "base-uri 'self'; default-src 'self'; worker-src blob:;style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://zoom.us .zoom.us blob:; img-src 'self' .zoom.us data:;; media-src 'self' .zoom.us; font-src 'self' source.zoom.us data:; connect-src 'self' 'unsafe-eval' https://.zoom.us wss://.zoom.us;";

For more on CSP, see the Mozilla, web.dev, or W3C documentation.