[Uncatchable Error] Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

[tekool]

If the end-user browser is configured to block cookies (or block third party cookies in a cross site iframe context) the whole Angular app can crash in an uncatchable error with:

app-error.service.ts:46 Error: Uncaught (in promise): SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
Error: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at ngx-store.js:450
    at Module../node_modules/ngx-store/esm5/ngx-store.js (ngx-store.js:452)
    at __webpack_require__ (bootstrap:84)

Reproduced on Chrome, Safari, Opera, Firefox.

The reason is, has told by the error, access to window.localStorage is forbidden when user block cookies or third party cookies.

The real problem is the error is uncatchable because the first (uncatched) use of window.localStorage happens into config.helper.ts into a static property :

export class ConfigHelper {
    protected static _webStorageUtility: WebStorageUtility =
        new WebStorageUtility(localStorage, CONFIG_PREFIX);

Can you please fix it? Even at least hotfixing it by moving the first use of window.localStorage into a constructor, this way the error would be catchable using dynamic dependency injection?

Not tested, but I suppose it can happens with: sessionStorage, cookiesStorage, sharedStorage.

Many thanks for this pretty useful library as well.

[tmezzena]

I had the same problem and I did the follow workaround - polyfill localStorage and sessionStorage if access denied detected. Don't solve the problem but the app will render.

<script> let storageSupported = false; try { storageSupported = (window.localStorage && true) } catch (e) { }

if (!storageSupported) {
  Object.defineProperty(window, 'localStorage', {value: {
    _data       : {},
    setItem     : function(id, val) { return this._data[id] = String(val); },
    getItem     : function(id) { return this._data.hasOwnProperty(id) ? this._data[id] : undefined; },
    removeItem  : function(id) { return delete this._data[id]; },
    clear       : function() { return this._data = {}; }
  } });
  Object.defineProperty(window, 'sessionStorage', {value: {
    _data       : {},
    setItem     : function(id, val) { return this._data[id] = String(val); },
    getItem     : function(id) { return this._data.hasOwnProperty(id) ? this._data[id] : undefined; },
    removeItem  : function(id) { return delete this._data[id]; },
    clear       : function() { return this._data = {}; }
  } });	
}

</script>