fix: proxy localStorage and sessionStorage (closes #293)

[n0th1ng-else]

What is it?

• Feature / enhancement
• Bug
• Docs / tests

Description

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:

• Storage 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

Use cases and why

• Block accessing the localStorage:

    <script>
      partytown = {
        apply: opts => {
          if ('localStorage.getItem' === opts.name) {
			return null; // Block localStorage access
		  }
          return opts.continue;
        }
      };
    </script>

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

Before

After

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
partytown	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 1, 2024 0:33am

[gioboa]

Can you commit your tests for this too pls?

[n0th1ng-else]

I was also wondering if I could add the test for this. could you please advise me on how to do that?

do we have an example of one e2e test suite but with a different config? like, I see tests/platform/storage/index.html and ideally I think I would put more e2e tests in this folder, but then I am a bit lost how to do that

[gioboa]

you can add another html file and use the goto method like this one

[n0th1ng-else]

ah sure, its a playwright script in the end of the day 🤦🏿 I will add more tests and let you know 👍🏿

[n0th1ng-else]

I have added the tests now 👍🏿

[n0th1ng-else]

@gioboa could you please look into it again?

[gioboa]

Thanks @n0th1ng-else it looks great

[n0th1ng-else]

thank you Giorgio! Looking forward to contribute more