Iframe - Incognito/Private browsing - Web Meeting SDK doesn't work (because of localStorage not accessible)

Meeting SDK Web
1

Description

Web Meeting SDK excellently works in our application in iframe.

But when it is opened in Incognito (Private Browsing) mode then browsers don’t allow to use localStorage in iframes by default.

That’s why such error is displayed: “DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.”

We want to support usage of Incognito (Private Browsing) too.

I can confirm that everything is working good in normal browser mode (without Incognito).
So Zoom Meeting SDK is properly added using all instructions.

But for any case I confirm that we did:

  • use HTTPS for both main document and iframe
  • we use allow attribute of iframe with 'camera; microphone; display-capture; screen-wake-lock; cross-origin-isolated' values

I searched answers in Developer Support and Developer forum.

I found this: https://devsupport.zoom.us/hc/en-us/articles/10286066139405-Best-practices-when-using-the-Video-SDK-in-an-iFrame

I don’t see anything there that we don’t use yet. As mentioned above - HTTPS and allow are used

Also I found this: Zoom Web Client - iframe integration

Unfortunately, there is no solution. There are Zoom team asks developer if allow attribute is used for iframe (as I confirmed above - in our case it is used). Also they ask about whether 3rd party cookies are enabled in browser - no, they are disabled by default in Incognito mode in iframes.

Could you please update Meeting SDK Web to take into account cases when localStorage is not accessible? For example, you could use some local variable instead of local storage as fallback variant.

We see that in some cases your SDK already takes this into account:

try{this.isLocalAvaliable=!0,localStorage.setItem("privateTest","")}catch(t){this.isLocalAvaliable=!1}

in @zoomus/websdk/dist/zoom-meeting-2.9.7.min.js.

It uses safe try/catch to check whether localStorage is available. So it is not a problem.

But in some cases there is no safe check, and so exception happens that completely breaks Zoom SDK functionality:

42222:function(t,n,e){"use strict";var r=e(63907),o=e(50542),i=e(12478),a="localStorage"in e.g&&e.g.localStorage?e.g.localStorage:r;

in @zoomus/websdk/dist/zoom-meeting-2.9.7.min.js

Here it is not safe, because tries to access localStorage without try/catch. And so exceptions appears here in iframes in incognito.

Below is suggestion of a solution that you could use in all places of your code, to make sure it is always safe and uses fallback mechanism:


let localStorage = null;
let sessionStorage = null;

(() => {
  // Local Storage
  try {
    window.localStorage.getItem('test-localStorage');
    localStorage = window.localStorage;
  } catch {
    // local storage is not accessible - fallback variant
    localStorage = factoryStorage();
  }

  // Session Storage
  try {
    window.sessionStorage.getItem('test-localStorage');
    sessionStorage = window.sessionStorage;
  } catch {
    // local storage is not accessible - fallback variant
    sessionStorage = factoryStorage();
  }
})();

function factoryStorage() {
  console.log('ll,replaced');
  const memory = new Map();
  return {
    getItem: (key) => memory.get(key),
    setItem: (key, value) => memory.set(key, value),
    removeItem: (key) => memory.delete(key),
    clear: () => memory.clear(),
    get length() {
      return memory.size;
    }
  }
}

export function getLocalStorage() {
  return localStorage;
}

export function getSessionStorage() {
  return sessionStorage;
}

// usage example

function someFunction() {
  //    replace:
  // const value = window.localStorage.getItem('key');
  //    by:
  const value = getLocalStorage().getItem('key');
}

Browser Console Error
“DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.”

Which Web Meeting SDK version?
2.9.7

Meeting SDK Code Snippets
HTML:

<iframe allow="camera; microphone; display-capture; screen-wake-lock; cross-origin-isolated" src="https://---link-to-sample-ZoomMeetingSDKintegratoin" allowfullscreen="true"></iframe>

Open it in Incognito in Google Chrome. And you will see this exception in console.

To Reproduce(If applicable)

  1. Open Google Chrome in Incognito
  2. Open page that has iframe with Zoom Meeting SDK Web integration
  3. Check developer tools console

Device (please complete the following information):

  • Device: Macbook Pro
  • OS: macOS 13.1
  • Browser: Chrome
  • Browser Version 110.0.5481.96 (Official Build) (arm64)

Additional context
Incognito mode in Google Chrome with Zoom Meeting SDK Web integration in iframe

6 Likes
2

It seems that the issue you are experiencing is due to the fact that in Incognito mode, the browser does not allow access to localStorage in iframes by default, which is causing your application to break.

One solution you suggested is to use a fallback mechanism to access localStorage and sessionStorage in case they are not available. This is a good approach, and I would recommend implementing it in your code.

To do so, you can create a factory function that returns an object with the same interface as the localStorage and sessionStorage APIs, but instead stores the data in memory using a JavaScript Map. Then, you can use try/catch blocks to check whether localStorage and sessionStorage are available, and if not, use the fallback objects created by the factory function.

Here is an example implementation:

javascriptCopy code

let localStorage = null;
let sessionStorage = null;

(() => {
  // Local Storage
  try {
    window.localStorage.getItem('test-localStorage');
    localStorage = window.localStorage;
  } catch {
    // local storage is not accessible - fallback variant
    localStorage = factoryStorage();
  }

  // Session Storage
  try {
    window.sessionStorage.getItem('test-localStorage');
    sessionStorage = window.sessionStorage;
  } catch {
    // local storage is not accessible - fallback variant
    sessionStorage = factoryStorage();
  }
})();

function factoryStorage() {
  const memory = new Map();
  return {
    getItem: (key) => memory.get(key),
    setItem: (key, value) => memory.set(key, value),
    removeItem: (key) => memory.delete(key),
    clear: () => memory.clear(),
    get length() {
      return memory.size;
    }
  }
}

export function getLocalStorage() {
  return localStorage;
}

export function getSessionStorage() {
  return sessionStorage;
}

To use this implementation, you would replace any calls to localStorage and sessionStorage with calls to the getLocalStorage() and getSessionStorage() functions, respectively.

I hope this helps you to solve the issue and make your Zoom Meeting SDK integration work in Incognito mode.

3

Dear Ana,

I don’t understand the main idea of your message.

I’ve described a bug in Zoom Meeting SDK source code. I provided name of Zoom Meeting SDK file “@zoomus/websdk/dist/zoom-meeting-2.9.7.min.js” where bug exists. I provided quote of the code that has a bug.

Here is a copy from my first message:

42222:function(t,n,e){"use strict";var r=e(63907),o=e(50542),i=e(12478),a="localStorage"in e.g&&e.g.localStorage?e.g.localStorage:r;

You can see usage of localStorage without try/catch here. And I see in developer tools of Google Chrome (in Incognito mode) that this code is a reason of Exception that is also included in my first message.

Copy of Exception from my first message:

“DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.”

Also I’ve provided an example of possible solution that Zoom team can use inside of Zoom Meeting SDK to avoid such bugs.

Ana, you wrote:

This is a good approach, and I would recommend implementing it in your code.

As I said above, it is a bug in Zoom SDK code, so we cannot fix bug by using any solution in our code.

Ana, you also wrote:

Here is an example implementation:

I see you copy-pasted javascript code from my message. Why do you suggest us to use the source code that I suggested the Zoom team uses in Zoom SDK code?

Ana, do you represent Zoom team?

Help me understand the reason why you posted message in this topic and compiled your message from the information contained in my first message.

I don’t see any additional useful information in your message. I see only misleading information in your message, because in your message it looks like it is possible to fix in the code that developers write to use/integrate Zoom Meeting SDK. But it is not possible. It is possible to fix only in the code of Zoom Meeting SDK.

4

which browsers have this behavior, i have testet

  • zoom SDK in an iframe
  • private/incognito Mode
  • Windows 10, Firefox Developer 111
  • Windows 10, Chrome 110
  • https on a real server (not localhost)

=> no problems with localstorage (not blocked by the browser)

5

Thank you for your time checking this.

It is reproducible only in Google Chrome and only in Incognito mode.
As mentioned in my first message - I reproduced it in Chrome 110.
It should not depend on OS, should work the same on all OS.

I researched a little more after your message, to understand how to make it more easy reproducible/testable.

I’ve deployed a test page where it is easy to reproduce an exception with localStorage.

https://test-sdk-zoom1.github.io/

Please try to open that test page.

When you open it in Chrome Incognito, you should see this:
“Error detected: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.”

And if you open it in Chrome (normal mode) then you see successful message:
“Successful - no errors detected”

And I think these 2 things are important for reproducing it:

  • Default browser settings for Incognito mode (it means keep enabled setting for blocking 3rd party cookies as on screenshot)
  • Usage of different domains for main document and iframe

Let me know if you have more questions, I want to simplify work for Zoom team as much as possible.

Screenshot 2023-02-22 at 9.46.34 PM
Screenshot 2023-02-22 at 9.46.34 PM3024×1536 276 KB

Screenshot 2023-02-22 at 10.10.44 PM
Screenshot 2023-02-22 at 10.10.44 PM3024×1766 190 KB

6

@T.dev1 ,

Currently we do not support iFrame for Meeting SDK. Thanks for your feedback nonetheless. We will update the page if there are plans to do so. https://marketplace.zoom.us/docs/sdk/native-sdks/web/#notes

The links which you have shared refers to Video SDK, and it was recently announced that Video SDK supports iFrame.

1 Like
7

I see. Thank you for the response with these details!

8

I have the this results on your test page - incognito mode
Error Detected with

  • Windows 10 Chrome 110

error-3
error-3808×491 11.7 KB

no error with

  • Windows 10 Firefox 111 Developer

no-error
no-error728×417 13.6 KB

this is an interesting behavior of the browsers - which should be explored further

of course zoom should check the availability of local storage before using it - fallback coult be session storage

1 Like
9

and the result for MS Edge 110

no-error-2
no-error-2910×435 9.7 KB

strange - the result with Chrome and the Cromium browser MS Edge is different !

1 Like
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.