前端持久化-evercookie

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

一.evercookie簡介：

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

二.evercookie原理：

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

evercookie 存儲數據的維度：

1.標準HTTP Cookie：

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

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

2.Flash Cookie：

evercookie提供了一個flash文件，使用的時候會將數據存儲在flash的本地對象中，只有刪除對應的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]) {

存數據的時候調用swfObject中的接口存入即可，可以看下js源碼：

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

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

var _global_lso;function _evercookie_flash_var(cookie) {

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

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

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

6.openDatabase：HTML5的WebSQL數據庫，可以理解為本地存儲 Local Storage 和 Session Storage 的一個加強，用來操縱大量結構化數據，由于各個瀏覽器實現原因，WebSQL規范已經被廢棄掉了；

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

8.圖片緩存像素點存儲：

evercookie利用了圖片的緩存進行了存儲，簡單介紹下：

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

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

9.ETag存儲：

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

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

11.silvelright客戶端存儲：

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

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

13.IE的userData存儲：

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

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

14.window.name:

window.name是window的一個很特殊的屬性，可以設置，有兩個特點：

window.name設置后刷新頁面不會消失；
iframe從一個src跳轉到另一個src 獲取contentWindow.name 不會發生變化；

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

window.name經常用于跨域通信，順便說下window.name跨域通信原理：

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

跨域獲取注意兩個關鍵點：

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

15.<a>標簽歷史訪問狀態存儲：

瀏覽器中的 <a> 標簽有個特性，同一個瀏覽器被訪問過后狀態會變成 "visited" 狀態，一般只有清理瀏覽器瀏覽記錄才會消失，evercookie利用了這點進行存儲。

簡單說下思路：

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

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

16.HSTS存儲：

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

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

直接看實現：

<?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存儲方式缺點比較大，要申請多個域名，發送多個請求，evercookie默認關閉了HSTS存儲，chrome和firefox兼容性比較好、IE不支持HSTS設置，瀏覽器也可以手動設置關閉HSTS。

evercookie讀數據：

evercookie讀數據只說一點就可以了，它的思想并不是從任意維度獲取到數據就直接返回結果，而是要將所有設置的維度全部取出進行最優解查找，可以防止部分數據被篡改導致的數據異常；也帶來一個問題，因為很多都是異步獲取，比如數據庫、e-tag等，那么獲取數據就不是立即獲取，會有一部分等待時長。

三.應用：

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

四.總結：

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

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

方案一，用<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網頁自動跳轉代碼--西農大網站</title>
</head>
<body>
測試：html網頁自動跳轉代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農林科技大學是一所985、211院校。<br />
</body></html>

方案二，用javascript腳本來跳轉

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在進入西農大網站</title>
</head>
<body>
<form name=loading>
<p align=center> <font color="#0066ff" size="2">正在進入，請稍等</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網頁自動跳轉代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農林科技大學是一所985、211院校。<br /><br />
如果您的瀏覽器不支持跳轉,<astyle="text-decoration: none" ><font color="#FF0000">請點這里</font></a>.</p>
</body>
</html>

↓↓↓

頁禁止復制粘貼怎么解決教程,網頁禁止復制粘貼怎么辦

方法1：

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

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

javascript：void($={});

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

3、需要注意的是，如果網頁被刷新，限制會恢復，需要重新輸入代碼。

方法2：

1、打開右上角工具，選擇最后的選項

2、選擇【高級設置】-【網頁設置】，點擊【網頁內容高級設置】

3、找到【JavaScript】選項-【不允許任何網站運行 JavaScript】

4、完成，關閉選項標簽頁。(做完之后可以調回去)

方法3：

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

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、保存，完成。打開需要破解的網頁，點一下剛才創建的標簽，破解完成，但每次打開網頁都需要點一下破解的標簽。要求：瀏覽器必須能執行javascript代碼，其它瀏覽器添加書簽類似。

方法4：

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。