Wil*_*ilt 10 authentication html5 authorization session-storage local-storage
我想在浏览器标签之间共享我的身份验证令牌,建议使用HTML5localStorage.但是,当浏览器关闭时,我不希望任何与身份验证相关的内容留在我的存储中,建议使用HTML5sessionStorage.
这意味着您无法在选项卡之间共享,为此您应该使用localStorage
因此,建议不要将任何敏感信息存储在本地存储中
如何在选项卡之间组合我的身份验证令牌,并确保在浏览器关闭时没有任何内容留在存储中？
其他网站如何解决这个看似简单的问题.
实现这一目标的一个选择是清理localStorage页面即将关闭/卸载的时间,因此在存储中不会留下任何东西.这样的localStorage行为就像sessionStorage在页面关闭时将被删除的意义一样,但它仍然具有localStorage跨标签共享数据的优势.
为此你可以使用这个onbeforeunload事件:
当窗口,文档及其资源即将卸载时,将触发beforeunload事件.
像这样的东西:
// code here
...
// you have the data in the localStorage
localStorage.setItem("data", "My Data");
// more code here
...
// when the page is about to be unloaded, remove the localStorage data
window.addEventListener("beforeunload", function() {
localStorage.removeItem("data");
});
但是这个解决方案太简单了,而且有一个问题:当你关闭一个标签时localStorage,即使你打开了其他标签,数据也会被删除!(留下他们没有任何数据).要防止在其中一个选项卡关闭时删除数据,您可以跟踪选项卡的数量,并仅localStorage在数字为零时清除.
伪代码将是:
localStorage有一个选项卡计数
localStorage包含选项卡数量的变量.localStorage这是一个非常简单的演示.我添加了一些console.log消息,因此您可以打开控制台并查看每次加载/卸载时发生的情况:
<!doctype html>
<html>
<head>
<title>Test LocalStorage</title>
</head>
<body>
<h1>Hello World!</h1>
<div id="tabs">Open tabs = 0</div>
<script>
window.addEventListener("load", function() {
if (!localStorage.tabs) {
console.log("Create the tab count");
localStorage.setItem("tabs", 1);
// restore data in case of refresh, or set to initial value in case of new window
localStorage.setItem("data", sessionStorage.getItem("data") || "Initial");
} else {
console.log("Add one tab to the count");
localStorage.tabs++;
}
document.getElementById("tabs").innerHTML = "Open tabs = " + localStorage.tabs;
});
window.addEventListener("beforeunload", function() {
if (parseInt(localStorage.tabs) == 1) {
console.log("Last tab: remove localStorage");
// save the data temporarily in the sessionStorage (in case of reload)
sessionStorage.setItem("data", localStorage.getItem("data"));
localStorage.removeItem("tabs");
localStorage.removeItem("data");
} else {
console.log("There are more tabs open, decrease count by 1");
localStorage.tabs--;
}
});
</script>
</body>
</html>
将该代码复制到一个页面中,并在几个选项卡中打开它,您将看到选项卡的数量增加(如果您重新加载其中一个打开的选项卡,则会更新).然后关闭它们并使用最后一个,localStorage将清除该中的"数据"项.
我们使用cookie。
存储有其用途。但是Cookie可以满足您的所有要求。
Cookies在所有相同的“原始”标签之间共享。您甚至可以指定它们的路径，但是默认情况下它们是共享的。
关闭浏览器后，Cookie会自动被浏览器删除，您无需执行任何操作；这又是默认行为。
与存储相比，Cookie可以很容易地变得安全或更加安全。
有时最好的解决方案是最简单的解决方案。无需重新发明轮子。
Cookie安全
会话cookie像sessionStorage一样存储在磁盘上（以防浏览器崩溃并需要恢复）。因此，它们在本地磁盘读/写方面同样安全。
在HTTP传输期间，cookie和存储处理脚本都可能会被获取甚至被盗，因此在两种情况下都必须使用HTTPS。（这是在 至少你应该做的。）
Cookie可以配置为仅HTTP，从而防止JavaScript访问它，从而使XSS脚本和油脂猴子 劫持免疫。
如果身份验证令牌被盗，我们还将每个令牌与计算机的用户代理和ip关联。这样可以防止外部网络的某人使用令牌。如果需要，可以向混合添加更多的内容协商标头-并非所有的漫游器都复制所有标头。
为了提高安全性，您可以添加客户 端 指纹。这些指纹必须在客户端捕获并通过网络传输，因此它们不是防弹的，但是它们将迫使内部攻击者（与用户在同一网络上的攻击者）越过另一环。