while using session storage in iframe angular-oauth2-oidc give error of DOMException: Failed to read the 'sessionStorage'

Question

I am using the angular-oauth2-oidc package for authentication and my application is used in iFrame, so when the third-party cookies are blocked, it will give the below error.

core.js:6241 ERROR DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.
at Object.createDefaultStorage [as useFactory] (http://localhost:4200/vendor.js:81943:5)
at Object.factory (http://localhost:4200/vendor.js:30286:28)
at R3Injector.hydrate (http://localhost:4200/vendor.js:30153:63)
at R3Injector.get (http://localhost:4200/vendor.js:29903:33)
at injectInjectorOnly (http://localhost:4200/vendor.js:15722:33)
at Module.ɵɵinject (http://localhost:4200/vendor.js:15732:57)
at **Object.OAuthService_Factory [as factory]**

When I removed the session storage from the code, I got the same error message. My question is angular-oauth-oidc package somehow use the session storage? How can I overcome this situation except allow the third-party cookies because I can not rely on a person using this solution to allow the third-party cookies?

Answer 1

Yup, restrictions in browsers will do this. If sessionStorage is not available to your application the library will not be able to save any tokens in the default storage mechanism.

You need to create a custom OAuthStorage and create an in-memory implementation or some other implementation that coordinates with the parent frame to ensure data from the library gets persisted.

Custom storage could look like this:

export class CustomOAuthStorage {
  private _data: object = { };
  getItem(key: string) { return this._data[key]; }
  setItem(key: string, value: string) { this._data[key] = value; }
  removeItem(key: string) { delete this._data[key]; }
}

And then provide it through Angular's DI system.