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

Question

我正在编写一个第三方本机 JavaScript 组件，它在客户端上使用 localStorage。

在 Chrome DevTools 上查看资源选项卡时，我看到我的 localStorage 条目存储在客户端域下。 例如：假设我的文件来自 cdn.3rd.com 并用作 stackoverflow.com 上的资源 - 那么在这种情况下，我的 localStorage 条目保存在http://stackoverflow.com存储下。

但是，查看不同的网站，我发现通常第三方 localStorage 条目会保存到第三方域下的商店中。 例如，在 bbc.com 中，我看到了 iperceptions.com 的商店，而在 cnn.com 中，我看到了 outbrain.com 的商店。

那么如何在客户端页面上为我自己的域打开一个 localStorage 存储呢？

Answer 1

由于以下这些限制，您无法访问其他 3rd 方站点的 localStorage。

HTML5 不允许对 localStorage 进行跨域访问

基本上， localStorage是特定于源的资源，因此禁止从其他站点访问 localStorage。 在 HTML5 草案的早期阶段，有一个globalStorage完全允许跨域访问，但由于安全问题后来被删除。 因此，WebAPI 目前非常重视安全性。

已知的解决方法 - 仅当您具有目标站点的管理权限时才有效

有一篇非常好的文章演示了如何使用 iframe 跨域访问 localStorage 。 但是，此方法要求您修改目标站点的客户端脚本，以通过消息发布将 localStorage 内容跨 iframe 中继到您的站点。 因此，如果没有对目标站点的完全管理访问权限，您将无法执行此操作。