这些年，那些跨域

Posted 2020-10-29 伴月

跨域的各种场景，和工作中的实例

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

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

二、跨域方式总结　

场景1-JSONP JSON with padding

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

　　优势：前后端易实现，兼容性好。

　　问题：1、只能实现get请求2、不便处理接口错误 3、接口并发请求时，回调名必须不同

场景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页面所有对象。

 

三、工作中的实例

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

　　异步上传文件的方式：

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

　　　　2、ajaxfileupload.js使用iframe实现异步上传。当需要用到跨域时要做修改。　

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

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

　　3、Canvas读取图片数据cors

　　为了实现在前端将图片黑白化处理，用到canvas读取图片。图片缓存服务器通常会跨域。　

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

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

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

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

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

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