fix: proxy localStorage and sessionStorage (closes BuilderIO#293)

In the current implementation, we cache both storages (localStorage and sessionStorage) at the moment of
worker creation. Although this could be considered as performance optimization, it leads to the
implementation inconsistency:
- Storages data leaks into 3rd party script
- Storages easily go out of sync as there is no proper synchronization with main window setup.
- One can not override the storage access easily.

For the latter point, this means we can not take on the methods like `localStorage.getItem()` in the
Partytown proxy methods (specifically in `apply`). Hence there is no way to shield the storage data
from 3rd party scripts.

In this commit we fully rely on the storage values the main window sends into the worker. As the result,
we can always receive relevant value and also can override the storage api with `apply` and `get` hooks

src/lib/log.ts

@@ -16,8 +16,8 @@ import {
 } from './web-worker/worker-constants';
 import { debug, getConstructorName, isPromise } from './utils';
 
-export const warnCrossOrgin = (
-  apiType: 'get' | 'set' | 'remove' | 'clear',
+export const warnCrossOrigin = (
+  apiType: 'get' | 'set' | 'remove' | 'clear' | 'length' | 'key',
   apiName: string,
   env: WebWorkerEnvironment
 ) => console.warn(`Partytown unable to ${apiType} cross-origin ${apiName}: ` + env.$location$);

src/lib/sandbox/read-main-platform.ts

@@ -3,7 +3,6 @@ import {
   getConstructorName,
   getNodeName,
   isValidMemberName,
-  len,
   noop,
   serializeConfig,
 } from '../utils';
@@ -13,7 +12,6 @@ import {
   InterfaceInfo,
   InterfaceMember,
   InitWebWorkerData,
-  StorageItem,
 } from '../types';
 
 export const readMainPlatform = () => {
@@ -68,9 +66,7 @@ export const readMainPlatform = () => {
     $config$,
     $interfaces$: readImplementations(impls, initialInterfaces),
     $libPath$: new URL(libPath, mainWindow.location as any) + '',
-    $origin$: origin,
-    $localStorage$: readStorage('localStorage'),
-    $sessionStorage$: readStorage('sessionStorage'),
+    $origin$: origin
   };
 
   addGlobalConstructorUsingPrototype(
@@ -186,18 +182,6 @@ const readImplementationMember = (
   }
 };
 
-const readStorage = (storageName: 'localStorage' | 'sessionStorage') => {
-  let items: StorageItem[] = [];
-  let i = 0;
-  let l = len(mainWindow[storageName]);
-  let key: string;
-  for (; i < l; i++) {
-    key = mainWindow[storageName].key(i)!;
-    items.push([key, mainWindow[storageName].getItem(key)!]);
-  }
-  return items;
-};
-
 const getGlobalConstructor = (mainWindow: any, cstrName: string) =>
   typeof mainWindow[cstrName] !== 'undefined' ? new mainWindow[cstrName](noop) : 0;
 

src/lib/types.ts

@@ -127,8 +127,6 @@ export interface InitWebWorkerData {
   $interfaces$: InterfaceInfo[];
   $libPath$: string;
   $sharedDataBuffer$?: SharedArrayBuffer;
-  $localStorage$: StorageItem[];
-  $sessionStorage$: StorageItem[];
   $origin$: string;
 }
 
@@ -639,8 +637,6 @@ export type StateMap = Record<number, StateRecord>;
 
 export type StateRecord = Record<string | number, any>;
 
-export type StorageItem = [/*key*/ string, /*value*/ string];
-
 export const enum CallType {
   Blocking = 1,
   NonBlocking = 2,

src/lib/web-worker/init-web-worker.ts

@@ -1,8 +1,6 @@
 import {
   commaSplit,
   webWorkerCtx,
-  webWorkerlocalStorage,
-  webWorkerSessionStorage,
 } from './worker-constants';
 import type { InitWebWorkerData, PartytownInternalConfig } from '../types';
 
@@ -18,9 +16,6 @@ export const initWebWorker = (initWebWorkerData: InitWebWorkerData) => {
   webWorkerCtx.$postMessage$ = (postMessage as any).bind(self);
   webWorkerCtx.$sharedDataBuffer$ = initWebWorkerData.$sharedDataBuffer$;
 
-  webWorkerlocalStorage.set(locOrigin, initWebWorkerData.$localStorage$);
-  webWorkerSessionStorage.set(locOrigin, initWebWorkerData.$sessionStorage$);
-
   (self as any).importScripts = undefined;
   delete (self as any).postMessage;
   delete (self as any).WorkerGlobalScope;

src/lib/web-worker/worker-constants.ts

@@ -4,7 +4,6 @@ import type {
   PostMessageData,
   RefHandler,
   RefId,
-  StorageItem,
   WebWorkerContext,
   WebWorkerEnvironment,
   WinId,
@@ -27,10 +26,6 @@ export const postMessages: PostMessageData[] = [];
 
 export const webWorkerCtx: WebWorkerContext = {} as any;
 export const webWorkerInterfaces: InterfaceInfo[] = [];
-
-export const webWorkerlocalStorage = /*#__PURE__*/ new Map<string, StorageItem[]>();
-export const webWorkerSessionStorage = /*#__PURE__*/ new Map<string, StorageItem[]>();
-
 export const environments: { [winId: WinId]: WebWorkerEnvironment } = {};
 
 export const cachedDimensions = /*#__PURE__*/ new Map<string, any>();

src/lib/web-worker/worker-document.ts

@@ -20,7 +20,7 @@ import { ABOUT_BLANK, elementStructurePropNames, IS_TAG_REG, WinIdKey } from './
 import { getInstanceStateValue } from './worker-state';
 import { getPartytownScript } from './worker-exec';
 import { isScriptJsType } from './worker-script';
-import { warnCrossOrgin } from '../log';
+import { warnCrossOrigin } from '../log';
 
 export const patchDocument = (
   WorkerDocument: any,
@@ -39,15 +39,15 @@ export const patchDocument = (
         if (env.$isSameOrigin$) {
           return getter(this, ['cookie']);
         } else {
-          warnCrossOrgin('get', 'cookie', env);
+          warnCrossOrigin('get', 'cookie', env);
           return '';
         }
       },
       set(value) {
         if (env.$isSameOrigin$) {
           setter(this, ['cookie'], value);
         } else if (debug) {
-          warnCrossOrgin('set', 'cookie', env);
+          warnCrossOrigin('set', 'cookie', env);
         }
       },
     },

src/lib/web-worker/worker-storage.ts

@@ -1,74 +1,61 @@
-import { callMethod } from './worker-proxy';
-import { CallType, StorageItem, WebWorkerEnvironment } from '../types';
+import { callMethod, getter } from './worker-proxy';
+import { CallType, WebWorkerEnvironment } from '../types';
 import { EMPTY_ARRAY } from '../utils';
-import { warnCrossOrgin } from '../log';
+import { warnCrossOrigin } from '../log';
 
 export const addStorageApi = (
   win: any,
   storageName: 'localStorage' | 'sessionStorage',
-  storages: Map<string, StorageItem[]>,
   isSameOrigin: boolean,
   env: WebWorkerEnvironment
 ) => {
-  let getItems = (items?: StorageItem[]) => {
-    items = storages.get(win.origin);
-    if (!items) {
-      storages.set(win.origin, (items = []));
-    }
-    return items;
-  };
-  let getIndexByKey = (key: string) => getItems().findIndex((i) => i[STORAGE_KEY] === key);
-  let index: number;
-  let item: StorageItem;
-
   let storage: Storage = {
     getItem(key) {
-      index = getIndexByKey(key);
-      return index > -1 ? getItems()[index][STORAGE_VALUE] : null;
+      if (isSameOrigin) {
+        return callMethod(win, [storageName, 'getItem'], [key], CallType.Blocking);
+      } else {
+        warnCrossOrigin('get', storageName, env);
+      }
     },
 
     setItem(key, value) {
-      index = getIndexByKey(key);
-      if (index > -1) {
-        getItems()[index][STORAGE_VALUE] = value;
-      } else {
-        getItems().push([key, value]);
-      }
       if (isSameOrigin) {
-        callMethod(win, [storageName, 'setItem'], [key, value], CallType.NonBlocking);
+        callMethod(win, [storageName, 'setItem'], [key, value], CallType.Blocking);
       } else {
-        warnCrossOrgin('set', storageName, env);
+        warnCrossOrigin('set', storageName, env);
       }
     },
 
     removeItem(key) {
-      index = getIndexByKey(key);
-      if (index > -1) {
-        getItems().splice(index, 1);
-      }
       if (isSameOrigin) {
-        callMethod(win, [storageName, 'removeItem'], [key], CallType.NonBlocking);
+        callMethod(win, [storageName, 'removeItem'], [key], CallType.Blocking);
       } else {
-        warnCrossOrgin('remove', storageName, env);
+        warnCrossOrigin('remove', storageName, env);
       }
     },
 
     key(index) {
-      item = getItems()[index];
-      return item ? item[STORAGE_KEY] : null;
+      if (isSameOrigin) {
+        return callMethod(win, [storageName, 'key'], [index], CallType.Blocking);
+      } else {
+        warnCrossOrigin('key', storageName, env);
+      }
     },
 
     clear() {
-      getItems().length = 0;
       if (isSameOrigin) {
-        callMethod(win, [storageName, 'clear'], EMPTY_ARRAY, CallType.NonBlocking);
+        callMethod(win, [storageName, 'clear'], EMPTY_ARRAY, CallType.Blocking);
       } else {
-        warnCrossOrgin('clear', storageName, env);
+        warnCrossOrigin('clear', storageName, env);
       }
     },
 
     get length() {
-      return getItems().length;
+      if (isSameOrigin) {
+        return getter(win, [storageName, 'length'])
+      } else {
+        warnCrossOrigin('length', storageName, env);
+      }
     },
   };
 
@@ -99,6 +86,3 @@ export const addStorageApi = (
     },
   });
 };
-
-const STORAGE_KEY = 0;
-const STORAGE_VALUE = 1;

src/lib/web-worker/worker-window.ts

@@ -25,8 +25,6 @@ import {
   NamespaceKey,
   postMessages,
   webWorkerCtx,
-  webWorkerlocalStorage,
-  webWorkerSessionStorage,
   WinIdKey,
 } from './worker-constants';
 import { createCustomElementRegistry } from './worker-custom-elements';
@@ -419,8 +417,8 @@ export const createWindow = (
         win.cancelIdleCallback = (id: number) => clearTimeout(id);
 
         // add storage APIs to the window
-        addStorageApi(win, 'localStorage', webWorkerlocalStorage, $isSameOrigin$, env);
-        addStorageApi(win, 'sessionStorage', webWorkerSessionStorage, $isSameOrigin$, env);
+        addStorageApi(win, 'localStorage', $isSameOrigin$, env);
+        addStorageApi(win, 'sessionStorage', $isSameOrigin$, env);
 
         if (!$isSameOrigin$) {
           win.indexeddb = undefined;