zoukankan      html  css  js  c++  java
  • sessionStorage不能跨标签页解决方案 未验证

    sessionStorage不能跨标签页解决方案


    现有的浏览器存储机制

    localStorage :~5MB,数据永久保存直到用户手动删除
    sessionStorage :~5MB,数据只在当前标签页有效
    cookie :~4KB,可以设置成永久有效
    session cookie :~4KB,当用户关闭浏览器时删除(并非总能立即删除)
    安全的认证token保存

    一些重要的系统会要求当用户关闭标签页时会话立刻到期。

    为了达到这个目的,不仅绝对不应该使用cookies来保存任何敏感信息(例如认证token)。甚至session-cookies也无法满足要求,它在标签页关闭(甚至浏览器完全关闭)后还会持续存活一定时间。

    (任何时刻我们都不应该只使用cookies,它还有其他很多问题需要讨论,例如CSRF)

    这些问题就使得我们在保存认证token时应使用内存或sessionStorage。sessionStorage的好处是它允许跨多个页面保存数据,并且也支持浏览器刷新操作。这样用户就可以在多个页面之间跳转或刷新页面而保持登录状态。

    Good。我们将token保存在sessionStorage,并在每次请求服务器时将token放在请求头中来完成用户的身份认证。当用户关闭标签页,token会立即过期。

    但多标签页怎么办?

    即便是在单页面应用中也有一个很常见的情况,用户经常希望打开多个标签页。而此场景下将token保存在sessionStorage中将会带来很差的用户体验,每次开启一个标签页都会要求用户重新登录。没错,sessionStorage不支持跨标签页共享数据。

    利用localStorage事件来跨标签页共享sessionStorage

    我利用localStorage事件提出了一种解决方案。

    当用户新开一个标签页时,我们先来询问其它已经打开的标签页是不是有需要给我们共享的sessionStorage数据。如果有,现有的标签页会通过localStorage事件来传递数据到新打开的标签页中,我们只需要复制一份到本地sessionStorage即可。

    传递过来的sessionStorage绝对不会保存在localStorage,从localStorage事件将数据中复制并保存到sessionStorage,这个流程是在同一个调用中完成,没有中间状态。而且数据是对应事件携带的,并不在localStorage中。(译者注:作者意图解释这个方案的安全性)

    在线例子

    点击“Set the sessionStorage”,然后打开多个标签页,你会发现sessionStorage共享了。

    1. // 为了简单明了删除了对IE的支持
    2. (function(){
    3. if(!sessionStorage.length) {
    4. // 这个调用能触发目标事件,从而达到共享数据的目的
    5. localStorage.setItem('getSessionStorage',Date.now());
    6. };
    7. // 该事件是核心
    8. window.addEventListener('storage',function(event){
    9. if(event.key =='getSessionStorage') {
    10. // 已存在的标签页会收到这个事件
    11. localStorage.setItem('sessionStorage',JSON.stringify(sessionStorage));
    12. localStorage.removeItem('sessionStorage');
    13. } elseif(event.key =='sessionStorage'&& !sessionStorage.length) {
    14. // 新开启的标签页会收到这个事件
    15. vardata =JSON.parse(event.newValue),
    16. value;
    17. for(keyindata) {
    18. sessionStorage.setItem(key, data[key]);
    19. }
    20. }
    21. });
    22. })();

    (译者注:上面的代码是我从在线demo中截取的,原文中并无提到)

    接近完美

    我们现在拥有了一个几乎非常安全的方案来保存会话token在浏览器里,并支持良好的多标签页用户体验。现在当用户关闭标签页后能确保会话立即过期。难道不是么?

    chrome和firefox都支持当用户进行“重新打开关闭的标签页”或“撤销关闭标签页”时恢复sessionStorage。F**k!(译者注:作者原文用的是“Damn it!”,注意到那个叹号了吗?)

    safari在这个问题上处理是正确的,它并不会恢复sessionStorag(只测试了上述这三个浏览器)。

    对用户而言,能够确定sessionStorag已经过期的方法是直接重新打开网站,而不是选择“重新打开关闭的标签页”。

    除非chrome和firefox能够解决这个bug。(但我预感开发组会称其为“特性”)

    即便存在这样的bug,使用sessionStorag依然要比session-cookies方案或其他方案要安全。如果我们希望得到一个更加完美的方案,我们就需要自己来实现一个内存的方案来代替sessionStorag。(onbeforeunload也能做到,但不是太可靠且每次刷新页面也会被清空。window.name也不错,但它太老了且也不支持跨域保护)

    跨标签页共享memoryStorage

    这应该是唯一一个真正安全的实现浏览器端保存认证token的方法了,并且要保证用户打开多个标签页不需要重新登录。

    关闭标签页,会话立即过期–这次是真真儿的。

    这个方案的缺点是, 当只有一个标签页时 ,浏览器刷新会导致用户重新登录。安全总是要付出点代价的,很明显这个缺点可能是致命的。

    在线例子

    设置一个memoryStorage,然后打开多个标签页,你会发现数据共享了。关闭所有标签页token会立即永久过期(memoryStorage其实就是一个javascript对象而已)。

      1. (function(){
      2. window.memoryStorage = {};
      3. functionisEmpty(o){
      4. for(variino) {
      5. returnfalse;
      6. }
      7. returntrue;
      8. };
      9. if(isEmpty(memoryStorage)) {
      10. localStorage.setItem('getSessionStorage',Date.now());
      11. };
      12. window.addEventListener('storage',function(event){
      13. if(event.key =='getSessionStorage') {
      14. localStorage.setItem('sessionStorage',JSON.stringify(memoryStorage));
      15. localStorage.removeItem('sessionStorage');
      16. } elseif(event.key =='sessionStorage'&& isEmpty(memoryStorage)) {
      17. vardata =JSON.parse(event.newValue),
      18. value;
      19. for(keyindata) {
      20. memoryStorage[key] = data[key];
      21. }
      22. }
      23. });
      24. })();
  • 相关阅读:
    PrintWriter、PrintStream的苦头 缓冲区问题
    BufferedImage与byte[]互转
    求两个日期的间隔天数
    Timer和TimerTask详解
    Java连接Access数据库
    根据value字段对map进行排序
    java collections读书笔记(3)Arrays
    java collections读书笔记(4) stack
    运行时异常与一般异常有何异同?(转)
    java collections读书笔记(7) bitset
  • 原文地址:https://www.cnblogs.com/wsj1/p/14036759.html
Copyright © 2011-2022 走看看