同源策略

1、什么是同源策略？

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。最简单来说，同源策略的基本表现是一个域的页面无法去请求另一个域的资源。

所谓同源是指，协议，域名，端口三个都相同；

2、进行非同源的跨站访问

那么为了安全起见，在这个过程中，有一些数据的传输会受到限制。比如：

        1、Cookie、LocalStorage 和 IndexDB 无法读取

        2、DOM无法获得

        3、AJAX请求不能发送

3、哪些办法能够绕过同源策略来实现相应的功能呢？

1.对于Cookie的传输：

1.1 如果我们现在有两个网页，它们一级域名一致，只是二级域名不同，那么如果要做到使这两个域名能够实现cookie的共享，只需要将这两个页面的document.domain设置为一级域名即可。

比如：http://xiao.haha.com/a.html和http://qian.haha.com/b.html，那么只需要将document.domain = haha.com即可；

1.2 对于两个毫无关系的页面，如果要进行cookie的传输，那么需要借助标签<img><script><iframe>即可（这里就是CSRF攻击的起源之地）

2.对于DOM的传输：

2.1 片段识别符(fragment identifier)

2.2 window.name

2.3 跨文档通信API（Cross-document messaging）

3.对于AJAX请求：

3.1 利用JSONP通信标准

其基本思想是既然AJAX已经被废掉了，那么就换一种还可以继续请求的办法。于是就想到了可以利用<script>标签来向跨源地址发起请求。

示例代码

function addScriptTag (src) {

        var script = document.createElement ('script') ; 

        script.setAttribute("type","text/javascript");

        script.src=src;

        document.body.appendChild(script);

}

window.onload = function() {

addScriptTag('http://example.com/ip?callback=foo');

}

function foo(data){

        console.log('Your public IP address is: '+data.ip);

};

上面代码通过动态添加<script>元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

foo({"ip":"8.8.8.8"});

由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

3.2 利用WebSocket协议

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

WebSocket案例

在上边的示例中，最后一个属性 origin 是重点。该字段表示请求的请求源，然后浏览器根据该地址，判断是否处在白名单中，如果处在，则可以进行本次通信，反之不可。