前端持久化就是要將數據永久的保存在前端,讓數據難以刪除或者刪除后能夠重新恢復。存儲的數據可以理解為是一種 “僵屍數據”,下面介紹一種前端持久化方法 -- evercookie。
一、簡介
evercookie是由Samy Kamkar(美國白帽黑客、安全研究員)開發的一組jsApi,它的目的在於持久化cookie,即使用戶清除標准cookie、Flash cookie等之后依然能夠獲取設置過的數據,並且重新恢復清除掉的cookie(比較狹隘,本質上是恢復所有維度,一個重新寫的動作)。
二、原理
就是將數據寫入瀏覽器各個維度,獲取的時候再從各個維度中讀出來,只要其中一個有數據就可以將數據取出。
比較強大的地方在於: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存儲文件才可以清除
3、localStorage、sessionStorage、globalStorage
4、openDatabase
HTML5的WebSQL數據庫,可以理解為本地存儲 Local Storage 和 Session Storage 的一個加強,用來操縱大量結構化數據,由於各個瀏覽器實現原因,WebSQL規范已經被廢棄掉了;
5、IndexedDB
瀏覽器內置的一種數據庫,永久保存數據,IndexDB與WebSQL比較,IndexedDB更像是一個NoSQL數據庫,而WebSQL更像是關系型數據庫,使用SQL查詢數據;
6、ETag存儲
ETag存儲也要依靠后台,利用的原理主要是當瀏覽器第一次訪問一個請求的時候如果服務器響應設置ETag標簽,瀏覽器第二次訪問會自動帶上一個IF-NONE-MATCH上來(跟ETag設置的值相同),所以只要把數據值存在ETag上,取數據的時候直接去后台查鏈接上的 IF-NONE-MATCH 字段就可以了
7、 web Cache
看evercookie的思路是對 http cookie 的一種加強,相當於通過后台對cookie設置個過期時間
8、silvelright客戶端存儲
silvelright也是一種本地存儲方式,可以將數據直接存在本地,類似於flash可以跨瀏覽器獲取,需要安裝silverlight插件、下載 .xap 的編譯文件,對sliverlight不了解,有興趣的同學可以自行研究一下。
9、java應用程序本地存儲
10、IE的userData存儲
11、window.name
window.name是window的一個很特殊的屬性,可以設置,有兩個特點:
-
window.name設置后刷新頁面不會消失;
-
iframe從一個src跳轉到另一個src 獲取contentWindow.name 不會發生變化;
evercookie主要是利用了上面的一點,只要頁面不刷新,頁面隨便清理都不會發生變化
12、<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里面的實現很有意思,有興趣的可以看下。
四、讀數據
evercookie讀數據只說一點就可以了,它的思想並不是從任意維度獲取到數據就直接返回結果,而是要將所有設置的維度全部取出進行最優解查找,可以防止部分數據被篡改導致的數據異常;也帶來一個問題,因為很多都是異步獲取,比如數據庫、e-tag等,那么獲取數據就不是立即獲取,會有一部分等待時長。
五、缺點和注意事項:
Evercookie可能會給您或您的用戶帶來問題。
某些存儲機制涉及在客戶端瀏覽器中加載Silverlight或Flash。在某些機器上,這可能是一個非常緩慢的過程,有很多磁盤抖動。在較舊的移動設備上,這可能會使您的網站無法使用。
CSS歷史記錄首次設置cookie時,敲門可能會導致大量HTTP請求。
在某些圈子里,使用Evercookie被認為是粗魯的。在生產中使用Evercookie時,請考慮您的聲譽和受眾。
瀏覽器供應商正在盡最大努力填補Evercookie利用的許多漏洞。這對互聯網來說是一件好事,但它意味着今天有效的東西明天可能效果不好。
您自己決定使用Evercookie。做出明智的選擇。