您的位置:新葡亰496net > 电脑系统 > 初探HTML5的本土存款和储蓄,storage存储的多寡在

初探HTML5的本土存款和储蓄,storage存储的多寡在

发布时间:2019-06-30 11:26编辑:电脑系统浏览(62)

    特将自己遇到的情况 跟大家分析下,避免大家中招!

    浏览器存储的密码是一个潜在的威胁,存储威胁

    特将自己遇到的情况 跟大家分析下,避免大家中招!

     

    情形是这样的:之前本人丢了一台iphone,已经收到过两次钓鱼连接,比较谨慎,用了mac 本去登陆的,相安无事!

    最后一次又收到了钓鱼连接,手欠的用之前登陆过icloud账号的windows pc 去登陆的。然后中招了!密码泄露!

     

    分析:

    我的浏览器是google chrome,设置了保存密码。

    点击钓鱼链接时,链接盗取了chrome 存储密码的文件。

    chrome 将保存的密码存储到 C:UserslenovoAppDataLocalGoogleChromeUser DataDefaultLocal Data 是一个SQLite 数据库,

    密码字段加密了,但是专业人员是可以解密的。至此我的密码就被泄露了。

    我还怀疑 小偷没解密,直接将偷取的Local Data 注入自己的chrome 中,但是我尝试了 新chrome 访问不了 另一个chrome上的Local Data 文件。

     

    所以 钓鱼连接,不要点,即使不输入用户名和密码,依然可以盗取你的密码!

    本人不是做web开发的,所以钓鱼链接不知道怎么写!

    下次学学,也写个! 

    特将自己遇到的情况 跟大家分析下,避免大家中招! 情形是这样的:之前本人丢了一台...

    html5使用local storage存储的数据是如何保存在本地的?(我使用的是chrome浏览器,chrom浏览器是用sqlite来保存本地数据的)
    Html5 的local storage 是通过浏览器在本地存储的数据。

      传统的HTML使用的是众所周知的cookie,各种浏览器都支持,直接用js就可以调用,很方便。但cookie也有它本身的缺陷与不足。比如存储空间小,每个站点,又有时间期限,而且在请求网页的时候

     

    基本使用方法如下:

    主要有四种:localstorage , sessionstorage, webSQL , indexedDB。

    情形是这样的:之前本人丢了一台iphone,已经收到过两次钓鱼连接,比较谨慎,用了mac 本去登陆的,相安无事!

    [javascript]
    <script type="text/javascript"> 
    localStorage.firstName = "Tom"; 
    alert(localStorage.firstName); 
    </script> 

    1、localstorage 

    最后一次又收到了钓鱼连接,手欠的用之前登陆过icloud账号的windows pc 去登陆的。然后中招了!密码泄露!

    这样的话,就将数据保存到本地了,但是本地数据是以什么形式进行保存的呢,经过跟踪,发现在Chrome浏览器中,数据是以sqlite的数据库文件形式存储的。

      用

     

    在windows下,是保存在C:Documents and SettingsUser NameLocal SettingsApplication DataGoogleChromeUser DataDefaultLocal Storage 路径(其中User Name是指当前的用户名)下的;

    新葡亰496net 1

    分析:

    在Mac下,是保存在/Users/User Name/Library/Application Support/Google/Chrome/Default/Local Storage路径(其中User Name是指当前的用户名)路径下的

    新葡亰496net 2

    我的浏览器是google chrome,设置了保存密码。

    新葡亰496net,虽然后缀名是.localstorege 但是实际上就是sqlite的数据库文件,可以用sqlite打开,并看到其中的数据。(可以使用firefox的SQLite Manager附加组件打开)

    (两个感叹号)

    点击钓鱼链接时,链接盗取了chrome 存储密码的文件。

    安装组件步骤和安装firebug类似,选择菜单工具-->附件组件,打开附件组件设置页,搜索"SQLite Manager"关键字,安装"SQLite Manager"插件后重启firefox,就可以在工具中看到"SQLite Manager"附加组件了,如下图所示:

    新葡亰496net 3

    chrome 将保存的密码存储到 C:UserslenovoAppDataLocalGoogleChromeUser DataDefaultLocal Data 是一个SQLite 数据库,

     

    存数据。

    密码字段加密了,但是专业人员是可以解密的。至此我的密码就被泄露了。

    下图是查看刚刚保存的本地数据文件

      其实,localStorage就是键值对,它的值可以存大小多达5M的字符串。事实上,它是存到一个sqlite的文件中去,用sqlite打开可以看到里面自己建了一个表,里面有我们刚刚存的数据。

    我还怀疑 小偷没解密,直接将偷取的Local Data 注入自己的chrome 中,但是我尝试了 新chrome 访问不了 另一个chrome上的Local Data 文件。

     新葡亰496net 4  

    新葡亰496net 5

     

     作者:yhawaii

      chrome浏览器的这个sqlite文件存在:C:/Users/你的用户名/AppData/Local/Google/Chrome/User Data/Default/Local Storage 里面,如上图,用sqlite打开,用.schema可以看到一个表,这是chrome帮我们建的用来存储键值对的表ItemTable,查询表里的数据可以发现我们刚刚用程序存进去的值。

    所以 钓鱼连接,不要点,即使不输入用户名和密码,依然可以盗取你的密码!

    storage存储的数据是如何保存在本地的?(我使用的是chrome浏览器,chrom浏览器是用sqlite来保存本地数据的) Html5 的local storag...

    其它浏览器中,sqlite文件的存储位置,读者可以自己去探索探索。

    本人不是做web开发的,所以钓鱼链接不知道怎么写!

    localstorage的其它操作:

    下次学学,也写个! 

    新葡亰496net 6

    新葡亰496net 7

    在浏览器上同时打开两个页面(Lynda.com上的一个示例),如图:

    新葡亰496net 8

      这两个页面都是一样的,当我用在一个页面中进行修改,另一个页面的数据会不会自动修改呢?

    显然不会,为了达到自动更新的效果,我们得用事件监听器。

    一样的道理,先要判断浏览器支不支持:

    新葡亰496net 9

    新葡亰496net 10

    写一个handler函数

    新葡亰496net 11

    新葡亰496net 12

    新葡亰496net 13

    新葡亰496net 14

      这个其实是js的一个技巧,有问题的字符串,在if里面当false处理。这要和未定义的变量放if里面区别开来,如果一个变量未定义,那么不管放哪,js都会停止执行。如,如果上面没有定义b,即没有var b; 这句,下面突然出现了个if(b)那么程序到这里就会中断。大部分浏览器是这样的。  回到正题上来:

    新葡亰496net 15

    新葡亰496net 16

      这样,每次local storage里面的数据变化时,浏览器里面的数据就会自动变化了,因为storage事件被监听后,浏览器就会时时监视local storage里的数据,如果变化,就会触发事件,修改页面。不管几个页面都会做出相应的修改。

    要注意一点,这个事件只有在同一个浏览器程序里面才有效(比如你不能在chrome和firefox各打开一个页面,然后等着事件生效),因为不同浏览器的sqlite文件不一样,各自修改自己的数据,当然不会对其它浏览器的数据造成影响。

    经过上面的介绍,大家可以看出,忽略事件的内容外,localstorage的操作其实也很简单,和cookie一样很容易操作。下面介绍的几个会一个比一个难,这里先做好心里准备。

    2、sessionStorage

      localStorage的数据是页面共享的,但有些情况,我们需要一个浏览器中的不同页面可以单独操作自己的数据。这时我们就可以用sessionStorage了,它。 

    第一步还是一样,判断浏览器支不支持:

    新葡亰496net 17

    新葡亰496net 18

    然后:

    新葡亰496net 19

    新葡亰496net 20

      然后打开浏览器,同时打开两个网页做测试,我们可以看到,这两个页面中的数据不会相互影响。还是用Lynda.com的一个例子来展示:

    新葡亰496net 21

      再怎么刷新这两个页面,他们之间的数据还是不会相互影响。

      那么,sessionStorage把数据存哪了?经过测试发现,它保存在

    C:Users你的用户名AppDataLocalGoogleChromeUser DataDefaultCurrent Session 这个文件里面。但它不是一个sqlite文件,因为用sqlite打不开。具体怎么存的,作者本人也没研究出来,如有高手知道,请留言告之。

    3、webSQL 

      其实就是sqlite数据库,在js中可以像java在本地调用mysql数据库一样的方便,可以自己创建数据库,自己建表,自己往里面增删改数据。

      第一步还是要判断一下浏览器是否支持:

    新葡亰496net 22

    新葡亰496net 23

    如果支持,就试着打开数据库连接:

    新葡亰496net 24

    新葡亰496net 25

      其中,odb('testDatabase', '1.0','A Test Database',10*1024*1024);试着打开(新建)一个数据库数据库,四个参数分别表示:数据库名,数据库版本,数据库描述,和它预定的大小。

       db.transaction那一句,是WebSQL中最常用的语法。

      transaction这个函数,我在网上找了很多资料,都说是后面只能带一个参数,但我测试之后,发现是可以带三个参数,第二个是错误处理函数,两参(t,e),分别表示transaction和error,第三个成功回调函数,无参。。重点是第一个参数,是一个方程,四个参数:

    function(t) {

      t.executeSql("要执行的sql语句_需要参数的地主用?代替",  [参数_用逗号隔开],  function(t,r){成功回调函数_t表示transaction_r是result},  function(t,e){出错回调函数_t表示transaction_e是error});

    }

    比如用用户名ling和密码mypwd来登陆,可以这样写: 

    新葡亰496net 26

    新葡亰496net 27

    很方便,完全可以使用sql语句来操作。

      回到原来的话题,var db = prepareDatabase(); 来得到我们在数据库中建的表tTravel。接下去我们就可以用它来操作这个表。下面举一些例子:(其中有些这是Lynda.com提供的一些例子,bwTable是它自己实现的一个漂亮的表格,用来显示数据,读者不用深究这个,我会把最后的代码一起传上来)  

    (1)计算表里面有几行记录:

    新葡亰496net 28

    新葡亰496net 29

      语法和上面提到的一样,只是这边用的是readTransaction,这是为了保证不对表进行写操作,这是一种安全的举措,当然也可以用transaction。

    (2)取出表中的数据:

    新葡亰496net 30

    新葡亰496net 31

    (3)往表里添加数据:

    新葡亰496net 32

    新葡亰496net 33

    (4)更新数据:

    新葡亰496net 34

    新葡亰496net 35

    (5)删除数据:

      其实很容易,就是简单地用sql来操作数据库。

      chrome的webSQL本地数据存在这个目录下:C:Users你的用户名AppDataLocalGoogleChromeUser DataDefaultdatabases文件夹,里面一般会有file__0等类似的文件夹,可以用sqlite打开来看看。

    4、indexedDB

      有一篇文章《》在总体上介绍了一下indexedDB,读者可以去网搜一搜,读一读,大概了解一下它的前世今生!我摘录了《》里面的一些内容来简单的介绍一下:它IndexedDB中,几乎所有的操作都是采用了command->request->result的方式。比如查询一条记录,返回一个request,在request的result中得到查询结果。又比如打开数据库,返回一个request,在request的result中得到返回的数据库引用。(摘录结束)

      indexedDB的使用比前三种复杂了些,下面我们一部分一部分来了解。

      首先要注意的一点是,indexedDB的页面只有放到服务器上才能正常访问,单独双击页面很可能不会成功。但即使这样,indexedDB的数据还是存在用户本地的。目前测试了一下,chrome上delete操作有点问题,不过读者可以在firefox上测试,可以正常跑通。

      第一步也是判断并获得indexedDB对象:

    新葡亰496net 36

            } 
    
            }
        } 
    
        }
    }
    

    新葡亰496net 37

      然后打开indexedDB,比较复杂:

    新葡亰496net 38

    新葡亰496net 39

      其中db是在函数外定义的一个变量:var db;这样就可以在全局使用。

      下面再举几个查询、插入、修改、删除的例子:

    (1)查询

    新葡亰496net 40

    新葡亰496net 41

    初探HTML5的本土存款和储蓄,storage存储的多寡在地面是以何种情势保留的。  transaction的第二个参数表示打开的方式,主要有以下几种:

     

    (2)插入

      由上面例子可以体验到一些nosql数据库的优点,直接对对象进行操作,取出的是对象,写入的也是对象,如下:

      很简单,就是把对象插入数据库中。

    (3)修改

    其实就是先把原来相应的那条数据给删除,然后加入这条修改后的数据

    新葡亰496net 42

    新葡亰496net 43

    (4)删除

      删除时要先得到id,把id传入数据库引擎就知道删除哪一条数据了,步骤和上面差不多。

    新葡亰496net 44

    新葡亰496net 45

     

      上面讲到的,用objStore来打开游标,也可以用index来打开游标。有一篇文章讲得很清楚,我把它摘过来供读者参考。

    《数据本地化存储》这文章比较长,可以搜 openCursor 来找到你想要的内容

      

    View Code?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 使用游标 使用get()方法需要知道存储对象的key值,但若不知道key值,要看存储对象,就可以使用游标,如下是使用游标对数据库进行遍历:    var objectStore = db.transaction("customers").objectStore("customers");     objectStore.openCursor().onsuccess = function(event) {       var cursor = event.target.result;   if (cursor) {     alert("Name for SSN " cursor.key " is " cursor.value.name);     cursor.continue();   }   else {     alert("No more entries!");   } };  openCursor()方法有许多参数,首先你可设置遍历的Key的范围,其次可以设置游标遍历的方向,可参见后面关于IndexedDB异步API的介绍。Continue();表示继续遍历。    使用索引 在数据库中,所有的数据都是以key值来存储的,若要通过name等其他属性查看存储对象,需要遍历每个SSN并将它的name提取出判断是否为要查看的对象,但可以通过index而更为简单的实现,如:    var index = objectStore.index("name"); index.get("Donna").onsuccess = function(event) {       alert("Donna's SSN is " event.target.result.ssn);    };  我们在index中使用cursor来遍历存储的数据,并根据不同的cursor打开方式,返回不同的遍历结果,如下两种方式:        //方式一 index.openCursor().onsuccess = function(event) {    var cursor = event.target.result;   if (cursor) {     // cursor.key is a name, like "Bill", and cursor.value is the whole object.     alert("Name: " cursor.key ", SSN: " cursor.value.ssn ", email: " cursor.value.email);     cursor.continue();   } };  //方式二 index.openKeyCursor().onsuccess = function(event) {    var cursor = event.target.result;   if (cursor) {     // cursor.key is a name, like "Bill", and cursor.value is the SSN.     // No way to directly get the rest of the stored object.     alert("Name: " cursor.key ", "SSN: " cursor.value);     cursor.continue();   } }; 关于游标遍历的范围和方向 如果想要限制游标的遍历范围,可以使用“key range”的对象,并将它做为openCursor()和openKeyCursor()的第一个参数,这样的范围可以是单个键值、或是一个最低边界和最高边界的范围,并规定是否包括范围,如下:    // Only match "Donna" var singleKeyRange = IDBKeyRange.only("Donna");    // Match anything past "Bill", including "Bill" var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");    // Match anything past "Bill", but don't include "Bill" var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);    // Match anything up to, but not including, "Donna" var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);    //Match anything between "Bill" and "Donna", but not including "Donna" var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);    index.openCursor(boundKeyRange).onsuccess = function(event) {   var cursor = event.target.result;   if (cursor) {     // Do something with the matches.     cursor.continue();   } }; 另外,还可以规定游标遍历的方向,默认的是上升的方向,若使用相反的方向,可以将PREV作为openCursor()或是openKeyCursor()的第二个参数,如下:    objectStore.openCursor(null, IDBCursor.PREV).onsuccess = function(event) {   var cursor = event.target.result;   if (cursor) {     // Do something with the entries.     cursor.continue();   } }; 需要注意的是,在索引中使用游标时,由于可能有多个键值是相同的,如果想过滤多余的相同键值,将NEXT_NO_DUPLICATE 或是PREV_NO_DUPLICATE做为它的第二个参数,这时候总是返回最低边界的那一个对象,如下:    index.openKeyCursor(null, IDBCursor.NEXT_NO_DUPLICATE).onsuccess = function(event) {   var cursor = event.target.result;   if (cursor) {     // Do something with the entries.     cursor.continue();   } };

      

      chrome的indexedDB本地数据存在:C:Users你的用户名AppDataLocalGoogleChromeUser DataDefaultIndexedDB这个目录下,它会根据站点的名字来命名,其实上面三种也是用站点名字来命名,只是在本地用双击的方式访问时,会写成file之类的名字。

    ...

    本文由新葡亰496net发布于电脑系统,转载请注明出处:初探HTML5的本土存款和储蓄,storage存储的多寡在

    关键词: