【作者： 0han 未經(jīng)授權請勿轉載文章，轉載代碼請保留注釋，作者及出處】
reference:
- cnblogs用戶@waters的文章
- JavaScript基礎教程(第9版), Dori Smith Tome Negrino著，陳建甌 柳靖 譯, 中國工信出版社
- 大寶日記博主
在刷instagram的時候，看到一個和普通帖子一樣模式的廣告推廣帖，來自買手網(wǎng)站farfetch.com,帖子里的幾個圖片都是我最近瀏覽過的衣服，一個問題就浮現(xiàn)出我的腦海，farfetch的ins推廣怎么會把我在他們網(wǎng)站的瀏覽行為結合到我的ins賬號的？尤其是在沒有登錄farfetch的狀態(tài)下。那可能出現(xiàn)的情況只有ins讀取了我本地由farfetch創(chuàng)建的cookie，然后針對保存在其中我最近的瀏覽信息構建推廣貼，但結合cookie的定義，“一個cookie只能由最初寫它的服務器讀取。瀏覽器內部的cookie機制不允許你讀或寫別人所寫的cookie，你只能訪問自己的cookie”。
本文將探索“跨域訪問cookie”的可行性
cookie是什么？cookie其實就是一段文本，JavaScript開發(fā)人員可以在其中儲存一些信息。它不能獲得用戶的真實身份，沒法傳輸惡意腳本。它存在的目的就是網(wǎng)站給你瀏覽器的一個識別，這樣你下一次訪問這個站點的時候，網(wǎng)站就可以識別出你。
cookie是一個具有特定格式的字符串:
cookieName=cookieValue;expires=expirationDateGMT;path=URLpath;domain=siteDomain
cookie需要給它設定一個過期時間，過了這個時間他就會自己銷毀。
下面是我構建的兩個網(wǎng)頁，第一個輸入名字，會生成一個cookie，第二個會顯現(xiàn)出你的名字，根據(jù)第一個網(wǎng)頁的cookie，title命名就按照實際問題中的farfetch 和Instagram。代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>Farfetch</title>
<script src='script01.js'></script>
</head>
<body>
<form id="cookieForm" action="#">
<h1>Enter Your Name: <input type="text" id="nameField"></h1>
</form>
</body>
</html>
它里面引用的script01.js代碼如下:
window.addEventListener("load",nameFieldInit,false);//窗口加載完成后會調用nameFieldInit這個函數(shù)
function nameFieldInit(){//設定cookie值，窗口加載完成后，會調用這個函數(shù)，見上
var userName= "";//變量userName初始化
if (document.cookie != ""){ userName=document.cookie.split("=")[1]; }
document.getElementById('nameField').value=userName;
document.getElementById('nameField').onblur=setCookie;
document.getElementById('cookieForm').onsubmit=setCookie;
}
function setCookie() { var expireDate=new Date(); expireDate.setMonth(expireDate.getMonth()+6); var userName = document.getElementById("nameField").value; document.cookie="userName="+userName + ";expires="+expireDate.toGMTString();//寫入cookie document.getElementById("nameField").blur(); return false; }
Instagram_page代碼如下，這個頁面需要調用farfetch創(chuàng)建的cookie:
<!DOCTYPE html>
<html>
<head>
<title>Instagram</title>
<script src="script02.js"></script>
</head>
<body>
<h1 id="nameField"> </h1>
</body>
</html>
`
他里面引用的script02.js代碼如下:
window.addEventListener("load",nameFieldInit,false);
function nameFieldInit() { if (document.cookie != "") { document.getElementById('nameField').innerHTML = "Hello," + document.cookie.split("=")[1]; } }
測試以后是成功的，在同一個域下，cookie肯定是可以互相調用，這時候更改hosts文件，設定為兩個域，就沒有辦法。在文首列出的reference里，博主給了一個解決方案，使用iframe，通過搜索，大寶日記博主總結了如下幾種解決跨域cookie的方案:
前端解決方案
1、JSONP2、Iframe參考:http://liuwanlin.info/shi-shi-kua-yu-tong-xin-iframe/
后端解決方案
1、反向代理參考：http://wenzhixin.net.cn/2014/06/05/apache_proxy
2、CORS跨域資源共享參考
1:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
關于跨域問題的討論：參考1:https://segmentfault.com/a/1190000000718840參考2:https://www.zhihu.com/question/19618769
我不會php(所以我不說php是世界上最好的語言......)他的日志中解決跨域的后端方案,CORS(Cross-Origin-Resource-Shares)跨域資源共享，在后端服務器直接設置header內容Access-Contrl-Allow-Origin,php代碼這么寫的:
<?php header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']); header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); header('Access-Control-Max-Age: 1000'); header('Access-Control-Allow-Headers: Content-Type');
Apache配置:
Header set Access-Control-Allow-Origin *instagram.com/
這樣可以規(guī)避XSS（跨站腳本攻擊）
由此看來，跨站訪問cookie并不是簡單一個”不行“。farfetch的服務器后端只要授權了ins，ins就可以訪問。
