Secur1ty just lik3 a girl. B0th of th3m h4ve s0me h0les. Y0u alw4ys try to t0uch the h0le, but n0t 3very tim3 y0u c4n 3xpl0it it!
查看文章 |
HTML5 中 DOM Storage 的应用
2009-04-26 20:16
浏览器的本地存储出来也有段时间了。Firefox 是从 2开始支持的,IE 似乎是从 8 才开始支持。 Google Chome 似乎暂时还不支持。 关于客户端存储的标准,可以参考这里: http://www.whatwg.org/specs/web-apps/current-work/#scs-client-side 这一个存储是基于DOM的,也可以说是未来各个浏览器都会支持的一项功能。 浏览器客户端存储方式主要有四种: 1、 cookie 2、 flash shared object 3、 IE的 userdata 4、 DOM storage 我在 anehta 的水印系统中,使用的是第二种方式:FSO。 yahoo 在 安全印章系统中,还同时使用了 第三种,IE 的 userdata。 不过这个存储的地方在高版本的IE中好像支持不好。 所以未来的趋势肯定是利用 DOM storage。 DOM storage 分为两种, 一个是 叫做 sessionStorage,另一个叫做 localStorage,这是IE的叫法,在 Firefox 中叫做 globalStorage。(sessionStorage是FF,IE通用) 从名字就可以看出,sessionStorage是和当前窗口相关的,而localStorage 则是和当前窗口无关的,关了浏览器再开起来还会存在,还能读到。 对于 javascript 来说, dom storage 实际上就是一个数组。通过非常简单的API调用方式就能够使用DOM Storage。 设置一个值: window.sessionStorage.setItem(key, value); 读取一个值: window.sessionStorage.getItem(key); 还有其他API,可以参考相关手册。 ![]() 而 IE 的 localStorage 和 FF的 globalStorage 还是有差别的. globalStorage 有区分域。 window.globalStorage.namedItem(domain).setItem(key, value); 通过 namedItem 可以设置域,跨域的访问在FF出会抛出一个安全错误的异常。 FF 的 globalStorage 是使用 SQLite 的方式来存储的。每个域下都有5M的空间,远远大于cookie能存储的值。 前段时间,gmail 的iphone版好像开始存储数据到 localStorage 中,我的博客中也曾经记载这个事情。有安全专家曾担心可能会出现一些对该storage的注射,还需要深度挖掘下利用方式。 我们知道,XSS Payload 实际上也可以看成是一个javascript的应用,所以使用 DOM Storage ,在XSS中也会起到一些更好的用户体验。 其中最主要的一个作用就是跨页面传递数据。 无论是sessionStorage 还是 localStorage,都能够起到这个作用。 对于这一点,luoluo在 webzine0x03 中有一篇文章提到了一些tips。那么,现在又多了一种方法了!不同于window对象的是,localStorage是不依赖于当前窗口的! 不同于cookie, localStorage 是用户清理了cookie之后还存在的,一般是没有 expire 时间的,应该会比较好用。 最后,我写了如下一个测试页面: ![]() <div id="sessionStorage_show"> sessionStorage Value: </div> <br> <div id="localStorage_show"> localStorage Value: </div> <input id="set" type="button" value="check" onclick="set();"> <script> function set(){ window.sessionStorage.setItem("test", "this is sessionStorage"); if (window.globalStorage){ window.globalStorage.namedItem("a.com").setItem("test", "this is LocalStorage"); }else{ window.localStorage.setItem("test", "this is LocalStorage"); } document.getElementById("sessionStorage_show").innerHTML += window.sessionStorage.getItem("test"); if (window.globalStorage){ document.getElementById("localStorage_show").innerHTML += window.globalStorage.namedItem("a.com").getItem("test"); }else{ document.getElementById("localStorage_show").innerHTML += window.localStorage.getItem("test"); } } set(); </script> 为了方便有兴趣的朋友继续研究,整理一些参考资料如下: http://www.niallkennedy.com/blog/2007/01/ajax-performance-local-storage.html http://ajaxian.com/archives/firefox-2-client-side-storage-and-a-lot-more https://developer.mozilla.org/en/Storage http://ejohn.org/blog/dom-storage/ http://www.xul.fr/en/html5/sessionstorage.php |
最近读者:



