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

Posted 2023-03-05

【中文标题】如何在客户网站上开设第三方 localStorage 商店？

【英文标题】：How do I open a third party localStorage store on a client website?

【发布时间】：2015-09-25 00:39:26

【问题描述】：

我正在编写一个在客户端使用 localStorage 的第三方原生 javascript 组件。

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

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

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

【问题讨论】：

***.com/questions/4201239/… 和 ***.com/questions/16036095/…

【参考方案1】：

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

HTML5 不允许 localStorage 的跨域访问

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

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

有一个很nice article which demonstrates how to cross-origin access localStorage with iframe。但是，这种方法需要您修改目标站点的客户端脚本，以通过消息发布将跨 iframe 的 localStorage 内容中继到您的站点。因此，如果没有对目标站点的完全管理访问权限，您将无法执行此操作。

【讨论】：

那么它是否完全安全？登录凭据应该存在于 loclstorage 而不是 cookie 中，对吧？

@CrackerKSR 这不安全。其他 Javascript（例如，来自其他域（如 Google Analytics）的 Javascript）可以访问相同的 localStorage 数据。我建议您查看“安全 HttpOnly cookie”以获取登录凭据。