javascript 在 http 和 https 之间共享 dom 存储
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18001387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Share dom storage between http and https
提问by jeremysawesome
I would like a method of storing information on the client that can be accessed by both the SSL and nonSSL version of my site. localStorage is a great mechanism but it can only be accessed by the current protocol.
我想要一种在客户端上存储信息的方法，我的站点的 SSL 和非 SSL 版本都可以访问该信息。localStorage 是一个很好的机制，但它只能被当前协议访问。
I'd like to be able to store a piece of information via javascript on the non-ssl(http) portion of my site and access it on the SSL (https) portion of my site.
我希望能够通过 javascript 在我网站的非 ssl(http) 部分存储一条信息，并在我网站的 SSL (https) 部分访问它。
Does anyone know of a good way to share stored client-side information between ssl and non-ssl pages?
有谁知道在 ssl 和非 ssl 页面之间共享存储的客户端信息的好方法吗？
I know I can always default to a cookie.. but I hate the idea of having to send the cookie back and forth for every single request.
我知道我总是可以默认使用 cookie.. 但我讨厌必须为每个请求来回发送 cookie 的想法。
采纳答案by zebediah49
Compiled from the comments leading to this answer; I welcome @jeremyisawesome to edit in his final techniques:
根据导致此答案的评论编译；我欢迎@jeremyisawesome 编辑他的最后技巧：
Fist choice: Use SSL, across everything. Many users want that, and it is (with the exception of the somewhat higher resource use) a superior option in nearly every way. Also it is the trivial solution.
第一选择：在所有方面都使用 SSL。许多用户都希望如此，而且它（除了使用较高的资源）几乎在所有方面都是一个优越的选择。它也是微不足道的解决方案。
Sadly, "Because Management" is often a valid reason, and while you can try selling it on the "extra security never hurt anyone" point or whatever, a real solution would be preferred.
可悲的是，“因为管理”通常是一个合理的理由，虽然您可以尝试在“额外的安全性永远不会伤害任何人”或其他方面出售它，但真正的解决方案将是首选。
I propose the following: duplicate the DOM storage, and use a combination of cookie (with minimal data), AJAX, and a hash function to check if the DOM store needs to be updated. The exact implementation details depend on how much data you have, how frequently it changes, and how frequently users switch sides, but the basic idea is something like this:
我提出以下建议：复制 DOM 存储，并使用 cookie（具有最少数据）、AJAX 和哈希函数的组合来检查 DOM 存储是否需要更新。确切的实现细节取决于您拥有多少数据、它更改的频率以及用户切换的频率，但基本思想是这样的：
- save data to DOM, along with its hash.
- send hash in cookie instead of full data.
- JS checks that cookie hash and DOM data match.
- If DOM is determined to be out of date, use AJAX to acquire new data for DOM, and update it asynchronously.
- 将数据及其哈希值保存到 DOM 中。
- 在 cookie 中发送哈希而不是完整数据。
- JS 检查 cookie 哈希和 DOM 数据是否匹配。
- 如果确定 DOM 已过期，则使用 AJAX 为 DOM 获取新数据，并进行异步更新。
Switching between HTTP and HTTPS pages with secure session-cookie-- there are a number of vulnerabilities discussed with switching, but there's some useful stuff there.
使用安全会话 cookie 在 HTTP 和 HTTPS 页面之间切换- 讨论了许多与切换相关的漏洞，但那里有一些有用的东西。
回答by Jason Sebring
localStorage / sessionStorage ssl / non-ssl sharing in production
生产中的 localStorage / sessionStorage ssl / 非 ssl 共享
The way I did this was to use an iframe that does a postMessage to its parent. The iframe is always on https but the parent can be either http or https. This solution assumes the modifications are on SSL only to the storage and syncs it back for non SSL but you could adapt this to send modifications both ways so the non ssl parent sends changes down to the ssl child.
我这样做的方法是使用 iframe 向其父级执行 postMessage。iframe 始终在 https 上，但父级可以是 http 或 https。此解决方案假定修改仅在 SSL 上进行到存储，并将其同步回非 SSL，但您可以调整它以双向发送修改，以便非 ssl 父项将更改向下发送到 ssl 子项。
ssl iframe source (storage-sync.html):
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 parent source:
ssl/非 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>');
Placing the target origins to the right protocols ensures you won't be sending messages to wrong ones.
将目标源置于正确的协议上可确保您不会向错误的源发送消息。
回答by Jason Sebring
It's not technically possible as http as https schemes are deemed different origins as well as no-mix content limitations browsers has (now also in Firfox).
这在技术上是不可能的，因为 http 方案被认为是不同的起源以及浏览器具有的非混合内容限制（现在也在 Firfox 中）。
4.3.1 Security
User agents must throw a SecurityError exception whenever any of the members of a Storage object originally returned by the localStorage attribute are accessed by scripts whose effective script origin is not the same as the originof the Document of the Window object on which the localStorage attribute was accessed.
4.3.1 安全
每当由 localStorage 属性返回的 Storage 对象的任何成员被有效脚本源与 localStorage 属性所在的 Window 对象的 Document源不同的脚本访问时，用户代理必须抛出 SecurityError 异常访问。
So what is origin - lets look at CORS (Cross-Origin Resource Sharing) which states:
那么什么是起源——让我们看看 CORS（跨源资源共享），它指出：
...origin is composed of [..] the scheme, hostname, and port.
...origin 由 [..]方案、主机名和端口组成。
进一步：
https to http is not allowed.
不允许 https 到 http。
