这些年，那些跨域

1、同源策略与跨站脚本攻击

　　JavaScript 的同源策略，是由Netscape提出的一个著名的安全策略，为了阻止A站的JS去操做别的网站的数据。你想啊，你如今打开了浏览器，在一个tab窗口中打开了银行网站，在另一个tab窗口中打开了一个恶意网站，而那个恶意网站挂了一个的专门修改银行信息的JavaScript，当你访问这个恶意网站而且执行它JavaScript时，你的银行页面就会被这个JavaScript修改（好比说获取你的卡号和密码，又或者是转帐到黑客的帐户上等等），后果会很是严重！而同源策略就为了防止这种事情发生，它规定了A网站下的JS文件只能操做A网站下的数据，不能去操做B网站的数据。

2、跨域方式总结　

场景1-JSONP JSON with padding

　　JSONP由两部分组成:回调函数和数据。经过动态建立script，再请求一个带参网址实现跨域通讯，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

　　优点：先后端易实现，兼容性好。

　　问题：一、只能实现get请求二、不便处理接口错误 三、接口并发请求时，回调名必须不一样

场景2-document.domain　　

　　有一个页面是http://www.example.com/a.html,

　　在这个页面中还有一个http://www.child.example.com/b.html，

　　很显然，a.html与b.html是不一样域的，因此咱们没法经过在页面中书写js代码来获取iframe中的东西，可是，若是咱们把这2个页面的document.domain都设置成相同的域名就能够了，须要注意的是，咱们只能把document.domain设置成自身或更高一级的父域，且主域名必须相同。

　　优点：document.domain适用于主域相同，不一样子域的框架之间的交互。

　　问题：非不一样子域框架间无效。在file（本地文件访问）状况下，设置domain失效。

场景3-window.postMessage

　　postMessage是HTML5中的API，且是为数很少能够跨域操做的window属性之一，它可用于解决如下方面的问题：

 

　　a.） 页面和其打开的新窗口的数据传递
　　b.） 多窗口之间消息传递
　　c.） 页面与嵌套的iframe消息传递
　　d.） 上面三个场景的跨域数据传递

场景4-window.name

　　window对象有个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的全部页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的全部页面中的。

场景5-CORS跨域资源共享

　　跨域资源共享定义了在必须访问跨域资源的时，浏览器与服务器应该如何沟通。他的原理是使用自定义的 HTTP 头部，让服务器与浏览器进行沟通，主要是经过设置响应头的 Access-Control-Allow-Origin 来达到目的的。

　　优点：支持get、post各类请求方法。

　　问题：兼容性，浏览器不能低于IE10。须要服务端设置报文头部。

场景6-反向代理跨域

　　同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不须要同源策略，也就不存在跨越问题。

　　实现思路：经过配置一个代理服务器（域名与domain1相同，端口不一样）作跳板机，反向代理访问domain2接口。

　　优点：不存在前端跨域问题，服务器间接口调用效率能够提升

　　问题：多配置一台服务器，成本较高。

场景7- WebSocket协议

　　WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通讯，同时容许跨域通信，是server push技术的一种很好的实现。

　　原生WebSocket API使用起来不太方便，咱们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

　　优点：跨域、全双工、服务器推送

　　问题：须要服务器配套协议支持

场景8- location.hash + iframe跨域

　　实现原理： a欲与b跨域相互通讯，经过中间页c来实现。 三个页面，不一样域之间利用iframe的location.hash传值，相同域之间直接js访问来通讯。

　　具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不一样域只能经过hash值单向通讯，b与c也不一样域也只能单向通讯，但c与a同域，因此c可经过parent.parent访问a页面全部对象。

 

3、工做中的实例

　　一、Iframe在网络协议中的跨域document.domain

　　异步上传文件的方式：

　　　　 一、ajax2级，实现post发送，真正的异步发送，但有兼容性问题。

　　　　二、ajaxfileupload.js使用iframe实现异步上传。当须要用到跨域时要作修改。　

　　二、Iframe在file协议中的跨域postMessage

　　在一个c++客户端，内嵌html页面时，iframe之间的通讯在file协议下收到限制

　　三、Canvas读取图片数据cors

　　为了实如今前端将图片黑白化处理，用到canvas读取图片。图片缓存服务器一般会跨域。　

　　四、JSOP使用过程，回传格式有误

　　回传必须是函数包裹数据，后端可能会失误，漏掉。或者回调名不变，当并发请求时会报错。　

　　五、Img错误汇报，统计计数

　　前端性能监控，错误监控，埋点计数等，使用图片的请求将数据发送回服务端。

　　六、服务器反向代理，vue开发脚手架

　　在本地开发Vue项目时，能够启用脚手架的代理服务，完成跨域访问测试环境。