【作者： 0han 未经授权请勿转载文章，转载代码请保留注释，作者及出处】
reference:
- cnblogs用户@waters的文章
- JavaScript基础教程(第9版), Dori Smith Tome Negrino著，陈建瓯 柳靖 译, 中国工信出版社
- 大宝日记博主
在刷instagram的时候，看到一个和普通帖子一样模式的广告推广帖，来自买手网站farfetch.com,帖子里的几个图片都是我最近浏览过的衣服，一个问题就浮现出我的脑海，farfetch的ins推广怎么会把我在他们网站的浏览行为结合到我的ins账号的？尤其是在没有登录farfetch的状态下。那可能出现的情况只有ins读取了我本地由farfetch创建的cookie，然后针对保存在其中我最近的浏览信息构建推广贴，但结合cookie的定义，“一个cookie只能由最初写它的服务器读取。浏览器内部的cookie机制不允许你读或写别人所写的cookie，你只能访问自己的cookie”。
本文将探索“跨域访问cookie”的可行性
cookie是什么？cookie其实就是一段文本，JavaScript开发人员可以在其中储存一些信息。它不能获得用户的真实身份，没法传输恶意脚本。它存在的目的就是网站给你浏览器的一个识别，这样你下一次访问这个站点的时候，网站就可以识别出你。
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创建的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/
这样可以规避XSS（跨站脚本攻击）
由此看来，跨站访问cookie并不是简单一个”不行“。farfetch的服务器后端只要授权了ins，ins就可以访问。
