前端持久化-evercookie

導(dǎo)語前端持久化就是要將數(shù)據(jù)永久的保存在前端，讓數(shù)據(jù)難以刪除或者刪除后能夠重新恢復(fù)。存儲的數(shù)據(jù)可以理解為是一種 “僵尸數(shù)據(jù)”，下面介紹一種前端持久化方法 -- evercookie。

一.evercookie簡介：

evercookie是由Samy Kamkar（美國白帽黑客、安全研究員）開發(fā)的一組jsApi，它的目的在于持久化cookie，即使用戶清除標(biāo)準(zhǔn)cookie、Flash cookie等之后依然能夠獲取設(shè)置過的數(shù)據(jù)，并且重新恢復(fù)清除掉的cookie（比較狹隘，本質(zhì)上是恢復(fù)所有維度，一個重新寫的動作）。

二.evercookie原理：

evercookie的原理就是將數(shù)據(jù)寫入瀏覽器各個維度，獲取的時候再從各個維度中讀出來，只要其中一個有數(shù)據(jù)就可以將數(shù)據(jù)取出。比較強(qiáng)大的地方在于：1.存儲的維度非常多，尋常用戶難以清理；2.取數(shù)據(jù)的時候會將清除的數(shù)據(jù)重新恢復(fù)，名副其實(shí)的僵尸cookie；下面介紹下存儲的維度以及讀取數(shù)據(jù)的方式和思路。

evercookie 存儲數(shù)據(jù)的維度：

1.標(biāo)準(zhǔn)HTTP Cookie：

evercookie會將數(shù)據(jù)存在 document.cookie 中，獲取的時候直接獲取就可以了，沒什么可說的，這部分?jǐn)?shù)據(jù)是比較容易被清除的，比如瀏覽器清除cookie、js腳本設(shè)置等，分享關(guān)于cookie的兩個點(diǎn)

http請求自帶本域以及根域下所有cookie，CSRF的根源就在這里；
js設(shè)置cookie默認(rèn)在當(dāng)前域以及當(dāng)前路徑下， cookie一般都會跨路徑使用，一定注意設(shè)置path字段；

2.Flash Cookie：

evercookie提供了一個flash文件，使用的時候會將數(shù)據(jù)存儲在flash的本地對象中，只有刪除對應(yīng)的flash存儲文件才可以清除，把flash文件反編譯了一下，可以看到AS的源碼：

shared=sharedobject.getlocal("evercookie");if (everdata) { var newdata=everdata.split("="); var str=shared.data.cookie; var results=str.split("&"); var i=0; while (i < results.length) { var elem=results[i].split("="); if (elem[0] !=newdata[0]) {

存數(shù)據(jù)的時候調(diào)用swfObject中的接口存入即可，可以看下js源碼：

this.evercookie_lso=function (name, value) { var div=document.getElementById("swfcontainer"),

flash加載后會使用 flash.external.ExternalInterface.call("_evercookie_flash_var", shared.data.cookie) 調(diào)用window下的javascript方法 _evercookie_flash_var 將數(shù)據(jù)傳給js，就是讀取flash數(shù)據(jù)。

var _global_lso;function _evercookie_flash_var(cookie) {

3.localStorage：localStorage是HTML5的一個新特性，可以將數(shù)據(jù)永久存儲在本地，獲取時沒有窗口的限制，同域下即可獲取，可以調(diào)用localStorage的接口來清除，瀏覽器直接清除緩存數(shù)據(jù)也能清掉；

4.sessionStorage：同localStorage類似，生存周期是當(dāng)前對話，瀏覽器關(guān)閉重新打開后消失；

5.globalStorage：同localStorage類似，同樣是永久存儲在本地，目前只有 Firefox48 以上才支持；

6.openDatabase：HTML5的WebSQL數(shù)據(jù)庫，可以理解為本地存儲 Local Storage 和 Session Storage 的一個加強(qiáng)，用來操縱大量結(jié)構(gòu)化數(shù)據(jù)，由于各個瀏覽器實(shí)現(xiàn)原因，WebSQL規(guī)范已經(jīng)被廢棄掉了；

7.IndexedDB：瀏覽器內(nèi)置的一種數(shù)據(jù)庫，永久保存數(shù)據(jù)，IndexDB與WebSQL比較，IndexedDB更像是一個NoSQL數(shù)據(jù)庫，而WebSQL更像是關(guān)系型數(shù)據(jù)庫，使用SQL查詢數(shù)據(jù)。

8.圖片緩存像素點(diǎn)存儲：

evercookie利用了圖片的緩存進(jìn)行了存儲，簡單介紹下：

寫數(shù)據(jù)的時候根據(jù)key構(gòu)造一個http請求，將值通過document.cookie傳給后臺；
后臺根據(jù)cookie中傳入的值按照每三位生成一個像素點(diǎn)的方式生成一張png圖片（evercookie設(shè)置了200個像素點(diǎn)），并且設(shè)置緩存到前端；
讀數(shù)據(jù)的時候同樣根據(jù)key構(gòu)造相同的http請求，獲取緩存的圖片并用canvas解析出對應(yīng)的像素點(diǎn)，恢復(fù)出數(shù)據(jù)。

這里面可以看出兩點(diǎn)，一個 evercookiejs 設(shè)置的圖片存儲支持的最大數(shù)據(jù)為600個字符，二是此種方式必須使用canvas進(jìn)行解析，有兼容性要求，這種方式可以通過瀏覽器清除緩存直接清掉。

9.ETag存儲：

ETag存儲也要依靠后臺，利用的原理主要是當(dāng)瀏覽器第一次訪問一個請求的時候如果服務(wù)器響應(yīng)設(shè)置ETag標(biāo)簽，瀏覽器第二次訪問會自動帶上一個IF-NONE-MATCH上來（跟ETag設(shè)置的值相同），所以只要把數(shù)據(jù)值存在ETag上，取數(shù)據(jù)的時候直接去后臺查鏈接上的 IF-NONE-MATCH 字段就可以了，跟上面png圖片緩存類似。

10.web Cache：看evercookie的思路是對 http cookie 的一種加強(qiáng)，相當(dāng)于通過后臺對cookie設(shè)置個過期時間，evercookie提供的腳本感覺有問題。

11.silvelright客戶端存儲：

silvelright也是一種本地存儲方式，可以將數(shù)據(jù)直接存在本地，類似于flash可以跨瀏覽器獲取，需要安裝silverlight插件、下載 .xap 的編譯文件，對sliverlight不了解，有興趣的同學(xué)可以自行研究一下。

12.java應(yīng)用程序本地存儲：通過使用JNLP調(diào)用Java Applet的能力將數(shù)據(jù)存在了本地文件中，代碼量比較大不細(xì)分析了，反編譯了jar包以及class文件，放在附件里有興趣的可以看下。

13.IE的userData存儲：

userData是IE特有的一種存儲方式，可以通過XML、HTML標(biāo)簽將數(shù)據(jù)存儲在本地，一般支持IE5以上，官方文檔單個域名存儲數(shù)據(jù)大小一般在640k左右，使用方法很簡單

<!DOCTYPE html><html lang="en"><head>

14.window.name:

window.name是window的一個很特殊的屬性，可以設(shè)置，有兩個特點(diǎn)：

window.name設(shè)置后刷新頁面不會消失；
iframe從一個src跳轉(zhuǎn)到另一個src 獲取contentWindow.name 不會發(fā)生變化；

evercookie主要是利用了上面的一點(diǎn)，只要頁面不刷新，頁面隨便清理都不會發(fā)生變化(奇特的是放在iframe里面清緩存就可以清掉 TT)。

window.name經(jīng)常用于跨域通信，順便說下window.name跨域通信原理：

iframe src 從 A.html跳轉(zhuǎn)到 B.html 的時候 window.name 是不變的，所以如果一個域的頁面想跨域獲取數(shù)據(jù)可以設(shè)置一個iframe 先將src指向想要獲取數(shù)據(jù)的域頁面(此頁面將想要傳遞的數(shù)據(jù)放在window.name中， ps：此時由于跨域無法獲取iframe的contentWindow)，之后src指向自己域名下的一個頁面（已變成同域）通過iframe的contentWindow即可獲?。?

跨域獲取注意兩個關(guān)鍵點(diǎn)：

必須放在iframe中；
必須使用name屬性（console了一下contentWindow，測試了幾個其他屬性都不行）；

15.<a>標(biāo)簽歷史訪問狀態(tài)存儲：

瀏覽器中的 <a> 標(biāo)簽有個特性，同一個瀏覽器被訪問過后狀態(tài)會變成 "visited" 狀態(tài)，一般只有清理瀏覽器瀏覽記錄才會消失，evercookie利用了這點(diǎn)進(jìn)行存儲。

簡單說下思路：

構(gòu)造<a>標(biāo)簽并預(yù)設(shè)visited樣式（a:visited）作為訪問校驗(yàn)值；
構(gòu)造http請求，請求的地址為設(shè)置的鍵以及值的各個字符（多個http，個數(shù)是值的長度）；
寫數(shù)據(jù)通過構(gòu)造iframe對上面的http請求進(jìn)行一次訪問；
讀數(shù)據(jù)用鍵和一個字符構(gòu)造一個鏈接賦予<a>標(biāo)簽的href，獲取<a>標(biāo)簽的樣式與預(yù)設(shè)visited樣式進(jìn)行
直接將http請求賦給<a>標(biāo)簽的href，獲取如果樣式為預(yù)設(shè)visited的樣式說明這個http請求訪問過，解出字符；

說明：2中設(shè)置的值是個encode后的值，最后一步解出的字符拼裝后需要decode后才能獲取到原來的值，evercookie里面的實(shí)現(xiàn)很有意思，有興趣的可以看下。

16.HSTS存儲：

HSTS一般用來防止中間人攻擊, 簡單來說，如果一個域名的http響應(yīng)設(shè)置過 Strict-Transport-Security，那么此域名再次發(fā)送http請求時瀏覽器會直接轉(zhuǎn)成https請求（可以設(shè)置prelist，第一次請求也可以直接在瀏覽器端轉(zhuǎn)成https），利用這點(diǎn)可以做數(shù)據(jù)存儲：

申請多個域名（例如32個），構(gòu)造好服務(wù)，設(shè)置（端口注意設(shè)置成443或者80）、清除、查詢；
將設(shè)置的值轉(zhuǎn)為二進(jìn)制整數(shù)，比如 1101, 1的bit發(fā)送到對應(yīng)的第一個域名設(shè)置 Strict-Transport-Security，0的清除掉 Strict-Transport-Security: max-age=0；
獲取時向上面32個域名發(fā)送請求進(jìn)行查詢，服務(wù)器返回是否是http，對應(yīng)的bit位設(shè)置為0，對應(yīng)的二進(jìn)制轉(zhuǎn)成數(shù)值就是獲取的結(jié)果；

直接看實(shí)現(xiàn)：

<?php//header('Access-Control-Allow-Origin: *');$is_ssl=!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !=='off' || $_SERVER['SERVER_PORT']==443;if(isset($_GET['SET'])){ if($is_ssl){

HSTS存儲方式缺點(diǎn)比較大，要申請多個域名，發(fā)送多個請求，evercookie默認(rèn)關(guān)閉了HSTS存儲，chrome和firefox兼容性比較好、IE不支持HSTS設(shè)置，瀏覽器也可以手動設(shè)置關(guān)閉HSTS。

evercookie讀數(shù)據(jù)：

evercookie讀數(shù)據(jù)只說一點(diǎn)就可以了，它的思想并不是從任意維度獲取到數(shù)據(jù)就直接返回結(jié)果，而是要將所有設(shè)置的維度全部取出進(jìn)行最優(yōu)解查找，可以防止部分?jǐn)?shù)據(jù)被篡改導(dǎo)致的數(shù)據(jù)異常；也帶來一個問題，因?yàn)楹芏喽际钱惒将@取，比如數(shù)據(jù)庫、e-tag等，那么獲取數(shù)據(jù)就不是立即獲取，會有一部分等待時長。

三.應(yīng)用：

使用evercookie進(jìn)行持久化，可以讓我們的數(shù)據(jù)常駐瀏覽器，利用它不僅可以收集各種瀏覽器數(shù)據(jù)，更重要的是，即使用戶對瀏覽器cookie進(jìn)行了大清洗，這些數(shù)據(jù)仍然可以起死回生。比如，利用它可以給瀏覽器建立一個長期有效的身份標(biāo)識符，利用標(biāo)識符上報(bào)數(shù)據(jù)對用戶的歷史信息進(jìn)行分析進(jìn)而判斷一個操作是善意還是惡意，對前端風(fēng)控體系有很大作用。

四.總結(jié)：

evercookie簡單來講就是存數(shù)據(jù)取數(shù)據(jù)，并沒有多少東西，比較閃光的地方在于里面的存取數(shù)據(jù)的維度和方法，各種奇淫巧技。同時要注意到里面的一些方法，比如HSTS會帶來很大開銷，獲取數(shù)據(jù)是一個異步過程也會有時間開銷，應(yīng)用的時候盡量根據(jù)業(yè)務(wù)額場景來調(diào)整使用。

信
51rgb
網(wǎng)頁自動跳轉(zhuǎn)頁面的代碼在很多時候都非常的有用，下面的是兩個簡單的例子。僅供參考。

方案一，用<meta>里直接寫刷新語句：

<html>
<head>
<meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="refresh" content="5;url=http://www.51rgb.com">
<title>html網(wǎng)頁自動跳轉(zhuǎn)代碼--西農(nóng)大網(wǎng)站</title>
</head>
<body>
測試：html網(wǎng)頁自動跳轉(zhuǎn)代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農(nóng)林科技大學(xué)是一所985、211院校。<br />
</body></html>

方案二，用javascript腳本來跳轉(zhuǎn)

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在進(jìn)入西農(nóng)大網(wǎng)站</title>
</head>
<body>
<form name=loading>
<p align=center> <font color="#0066ff" size="2">正在進(jìn)入，請稍等</font><font color="#0066ff" size="2" face="Arial">...</font>
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">
<inputtype=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">
<script>
var bar=0
var line="||"
var amount="||"
count
function count{
bar=bar+2
amount=amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count",100);}
else
{window.location=http://www.51rgb.com;}
}</script>
</p>
</form><p align="center">
測試：html網(wǎng)頁自動跳轉(zhuǎn)代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農(nóng)林科技大學(xué)是一所985、211院校。<br /><br />
如果您的瀏覽器不支持跳轉(zhuǎn),<astyle="text-decoration: none" ><font color="#FF0000">請點(diǎn)這里</font></a>.</p>
</body>
</html>

↓↓↓

頁禁止復(fù)制粘貼怎么解決教程,網(wǎng)頁禁止復(fù)制粘貼怎么辦

方法1：

1、打開目標(biāo)網(wǎng)頁，選中網(wǎng)頁的地址欄。(這里以360瀏覽器為例)

2、在地址欄輸入下行代碼，全部輸入。

javascript：void($={});

按下回車鍵(Enter)，破解完成。(回車后不會跳轉(zhuǎn)網(wǎng)頁)

3、需要注意的是，如果網(wǎng)頁被刷新，限制會恢復(fù)，需要重新輸入代碼。

方法2：

1、打開右上角工具，選擇最后的選項(xiàng)

2、選擇【高級設(shè)置】-【網(wǎng)頁設(shè)置】，點(diǎn)擊【網(wǎng)頁內(nèi)容高級設(shè)置】

3、找到【JavaScript】選項(xiàng)-【不允許任何網(wǎng)站運(yùn)行 JavaScript】

4、完成，關(guān)閉選項(xiàng)標(biāo)簽頁。(做完之后可以調(diào)回去)

方法3：

1、用瀏覽器隨便打開一個網(wǎng)頁，添加到收藏夾，*放到瀏覽器的標(biāo)簽欄，方便使用。這里以百度為例

2、添加之后右鍵選擇編輯，修改名字為【破解限制】，在地址欄粘貼以下代碼

javascript：(function(){eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c]);return p}('5 2=8;5 3=2.K;3.7=3.k=3.e=3.9=3.6=3.y=3.7=3.z=2.7=2.k=2.e=2.9=2.6=4;2.7=2.6=2.c=2.9=p(){r t};g(8.n||8){d=4;c=4;6=4}5 a=8.15(\'*\');o(5 i=a.q-1;i>=0;i--){5 b=a[i];g(b.n||b){d=4;c=4}}s(h(\'%u%v%w%x%j%17%A%B%C%j%D\')+\'\E\'+h(\'%F%G%H%I%J%l%L%l%M%N%O%P%Q%R%S%T%U%V%W%X%Y\')+\'\Z.10.11\');3.m.13=\'14!f\';3.m.16=\'12!f\';',62,70,'||doc|bd|null|var|oncontextmenu|onselectstart|document|onkeydown|arAllElements|elmOne|onmousedown|onmouseup|onpaste|important|with|unescape||u5236|oncopy|u7528|style|wrappedJSObject|for|function|length|return|alert|true|u5DF2|u89E3|u9664|u590D|onmousemove|ondragstart|u53F3|u952E|u9650|uFF01|u000d|u66F4|u591A|u7CBE|u5F69|u5B9E|body|u5e94|uFF0C|u8BF7|u5173|u6CE8|u300E|u0065|u5f27|u5ea6|u7535|u5b50|u5546|u52a1|u300F|u000dwww|ehudu|com|text|webkitUserSelect|auto|getElementsByTagName|MozUserSelect|u4E0E'.split('|'),0,{}))})()

3、保存，完成。打開需要破解的網(wǎng)頁，點(diǎn)一下剛才創(chuàng)建的標(biāo)簽，破解完成，但每次打開網(wǎng)頁都需要點(diǎn)一下破解的標(biāo)簽。要求：瀏覽器必須能執(zhí)行javascript代碼，其它瀏覽器添加書簽類似。

方法4：

1、使用Ctrl+A選擇網(wǎng)頁全部文字，Ctrl+C復(fù)制，新建文本檔案，Ctrl+V粘貼，刪除不需要的文字。(這個方法只適用于網(wǎng)頁內(nèi)容無法選中的網(wǎng)頁，有時候會無法復(fù)制，這時候就需要用到上面的方法了)

在線咨詢

上一篇：程序員利用HTML5+原生javascript做的催
下一篇：JAVA實(shí)現(xiàn)生成多層JSON格式數(shù)據(jù)（含源碼-三層樣

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。