在http和https之间共享dom存储

Question

我想要一种在客户端上存储信息的方法,可以通过我的站点的SSL和nonSSL版本访问.localStorage是一个很好的机制,但它只能通过当前协议访问.

我希望能够通过javascript在我网站的非ssl(http)部分存储一条信息,并在我网站的SSL(https)部分访问它.

有谁知道在ssl和非ssl页面之间共享存储的客户端信息的好方法？

我知道我总是可以默认使用cookie.但是我讨厌必须为每个请求来回发送cookie.

Answer 1

从导致这个答案的评论中编译而来; 我欢迎@jeremyisawesome编辑他的最终技巧:

拳头选择:在所有内容中使用SSL.许多用户都希望这样,并且它(除了更高的资源使用率)几乎在所有方面都是一个优越的选择.这也是一个简单的解决方案.

遗憾的是,"因为管理"通常是一个有效的理由,虽然你可以尝试以"额外的安全性从不伤害任何人"这一点或其他方式出售它,但真正的解决方案将是首选.

我建议如下:复制DOM存储,并使用cookie(使用最少数据),AJAX和散列函数的组合来检查是否需要更新DOM存储.确切的实现细节取决于您拥有的数据量,更改频率以及用户切换方的频率,但基本思路如下:

1. 将数据及其哈希值保存到DOM.
2. 在cookie中发送哈希而不是完整数据.
3. JS检查cookie哈希和DOM数据是否匹配.
4. 如果确定DOM已过期,请使用AJAX获取DOM的新数据,并异步更新它.

使用安全会话cookie在HTTP和HTTPS页面之间切换 - 切换时讨论了许多漏洞,但那里有一些有用的东西.

Answer 2

localStorage/sessionStorage ssl/non-ssl在生产中共享

我这样做的方法是使用iframe为其父级执行postMessage.iframe始终位于https上,但父级可以是http或https.此解决方案假设修改仅针对存储的SSL,并针对非SSL进行同步,但您可以调整此方法以双向发送修改,以便非ssl父级将更改发送到ssl子级.

ssl iframe源码(storage-sync.html):

if (sessionStorage.cart)
  try {
    var obj = { cart: JSON.parse(sessionStorage.cart) };
    parent.postMessage(JSON.stringify(obj), 'http://yourdomain.com');
  } catch(ex) {
    console.log(ex);
  }

ssl/non ssl父源:

window.addEventListener('message', function(ev) {
  if (ev.origin !== 'https://yourdomain.com')
    return;
  try {
    var obj = JSON.parse(ev.data);
    sessionStorage.cart = JSON.stringify(obj.cart);
    cart.reload();
  } catch(ex) {};
});

$('body').append('<iframe style="display:none" src="https://yourdomain.com/storage-sync.html?r=' + Math.random() + '"></iframe>');

将目标原点放置到正确的协议可确保您不会向错误的协议发送消息.

Answer 3

这在技术上是不可能的,因为http作为https方案被认为是不同的起源以及浏览器具有的混合内容限制(现在也在Firfox中).

从规范(Web存储):

4.3.1安全性

每当localStorage属性最初返回的Storage对象的任何成员被脚本访问时,用户代理必须抛出SecurityError异常,其脚本的有效脚本来源与localStorage属性所在的Window对象的Document 的原点不同.访问.

那么什么是起源 - 让我们来看看CORS(跨源资源共享),它指出:

... origin由[...] 方案,主机名和端口组成.

而且:

不允许https到http.