【作者： 0han 未經授權請勿轉載文章，轉載代碼請保留注釋，作者及出處】
reference:
- cnblogs用戶@waters的文章
- JavaScript基礎教程(第9版), Dori Smith Tome Negrino著凌盯，陳建甌 柳靖 譯, 中國工信出版社
- 大寶日記博主
在刷instagram的時候，看到一個和普通帖子一樣模式的廣告推廣帖皱蹦，來自買手網站farfetch.com,帖子里的幾個圖片都是我最近瀏覽過的衣服讥电，一個問題就浮現出我的腦海，farfetch的ins推廣怎么會把我在他們網站的瀏覽行為結合到我的ins賬號的猜年？尤其是在沒有登錄farfetch的狀態(tài)下抡锈。那可能出現的情況只有ins讀取了我本地由farfetch創(chuàng)建的cookie，然后針對保存在其中我最近的瀏覽信息構建推廣貼乔外，但結合cookie的定義床三，“一個cookie只能由最初寫它的服務器讀取。瀏覽器內部的cookie機制不允許你讀或寫別人所寫的cookie杨幼，你只能訪問自己的cookie”撇簿。
本文將探索“跨域訪問cookie”的可行性
cookie是什么聂渊？cookie其實就是一段文本，JavaScript開發(fā)人員可以在其中儲存一些信息四瘫。它不能獲得用戶的真實身份汉嗽，沒法傳輸惡意腳本。它存在的目的就是網站給你瀏覽器的一個識別找蜜，這樣你下一次訪問這個站點的時候饼暑，網站就可以識別出你。
cookie是一個具有特定格式的字符串:
cookieName=cookieValue;expires=expirationDateGMT;path=URLpath;domain=siteDomain
cookie需要給它設定一個過期時間洗做，過了這個時間他就會自己銷毀弓叛。
下面是我構建的兩個網頁，第一個輸入名字诚纸，會生成一個cookie撰筷，第二個會顯現出你的名字，根據第一個網頁的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這個函數
function nameFieldInit(){//設定cookie值，窗口加載完成后井辆，會調用這個函數关筒，見上
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就可以訪問檀头。
