如何在客户网站上开设第三方 localStorage 商店？

Question

I'm writing a third party native JavaScript component which uses localStorage on the client.

When looking at the Resources tab on Chrome DevTools I see that my localStorage entries are stored under the client domain. For example: let's say my file comes from cdn.3rd.com and is used as resource on stackoverflow.com - then in this case my localStorage entries are saved under the http://stackoverflow.com store.

However, looking at different websites, I see that normally third party localStorage entries are saved to stores under the third party's domain. For example in bbc.com I see a store for iperceptions.com, and in cnn.com there's a store for outbrain.com.

So how do I open a localStorage store for my own domain on the client's page?

Answer 1

Due to these following limitations, you can't access localStorage of other 3rd party site.

HTML5 does not allow cross-origin access for localStorage

Basically, localStorage is an origin-specific resource thus access from other sites to the localStorage is prohibited. In the very early stage of HTML5 draft, there was a globalStorage which fully allows cross-domain access but it was then removed due to security concern. So the WebAPI currently focuses on security seriously.

Known workaround - only works if you have an administrative privilege of target site

There is a very nice article which demonstrates how to cross-origin access localStorage with iframe . However, this approach requires you to modify the target site's client script to relay the localStorage content across iframe to your site by message posting. Thus, you can't do it without a full administration access to the target site.