同源策略和跨域

同源策略

• 浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

• 同协议，同域名，同端口

• 需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS的页面所在什么域，即代码的执行环境。对比当前页面的url和ajax请求的url。

• 同源策略限制以下几种行为：

  1.) Cookie、LocalStorage 和 IndexDB 无法读取
  2.) DOM 和 Js对象无法获得
  3.) AJAX 请求不能发送
  

跨域

• 即绕过同源策略去获取数据

• 广义的跨域：

1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

跨域解决方案

JSONP(JSON with padding)

• HTML 中 script，img标签这样获取资源的标签是没有跨域限制的，比如我们经常引入一个其他域下线上cdn的jQuery。
• 实现：JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行。提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。
• 缺点：JSONP只能发GET请求，因为本质上script加载资源就是GET

前端实现：

      document.querySelector('.show').addEventListener('click',function(){
            var script = document.createElement('script');
            script.src = 'http://127.0.0.1:8080/getWeather?callback=showData';
            document.head.appendChild(script);
            document.head.removeChild(script);
        })

后端部分代码：

 case '/getWeather':
            var weather = [
                '北京：晴',
                '杭州：阴',
                '上海：多云'
            ]
            res.setHeader('Content-Type','text/json;charset=utf-8')
            if(pathObj.query.callback){
                res.end(pathObj.query.callback + '(' + JSON.stringify(weather) + ')')
            }
            else{
                 res.end(JSON.stringify(weather))

            }  
            break;

CORS

• CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。
• 实现：当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该响应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。
• 普通跨域请求只需要服务端设置Access-Control-Allow-Origin即可，前端无须设置；若要带cookie请求：前后端都需要设置。

前端实现：

        document.querySelector('.show').addEventListener('click',function(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8080/getWeather',true);
            xhr.onload = function(){
                if((xhr.status>=200&&xhr.status<=300)||xhr.status==304) { 
                    showData(JSON.parse(xhr.responseText)); 
                }else{ 
                    console.log('error'); 
                }
            } 
            xhr.onerror=function(){ 
                console.log('error'); 
            } 
            xhr.send();
        })

后端部分代码：

case '/getWeather':
            var weather = [
                '北京：晴',
                '杭州：阴',
                '上海：多云'
            ]
            res.setHeader('Access-control-Allow-Origin','http://a.com:8080')
            res.end(JSON.stringify(weather))

            break;

降域： document.domain + iframe跨域

• 仅限主域相同，子域不同的跨域应用场景。

• 实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

postMessage跨域

• postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
  a.） 页面和其打开的新窗口的数据传递
  b.） 多窗口之间消息传递
  c.） 页面与嵌套的iframe消息传递
  d.） 上面三个场景的跨域数据传递

• 用法：postMessage(data,origin)方法接受两个参数

  • data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
  • origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

• window.postMessage() 方法被调用时，会在所有页面脚本执行完毕之后（e.g., 在该方法之后设置的事件、之前设置的timeout 事件,etc.）向目标窗口派发一个 MessageEvent （一个事件）消息。 该MessageEvent消息有四个属性需要注意：

  • message 属性表示该message 的类型
  • data 属性为 window.postMessage()的第一个参数
  • origin 属性表示调用window.postMessage() 方法时调用页面的当前状态
  • source 属性记录调用 window.postMessage() 方法的窗口信息。

以上具体实现见https://github.com/mingzihhh/cross-domain-demo

参考资料：

https://segmentfault.com/a/1190000011145364

MDN文档