这些年,那些跨域

Posted 伴月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了这些年,那些跨域相关的知识,希望对你有一定的参考价值。

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

  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项目时,可以启用脚手架的代理服务,完成跨域访问测试环境。

 

以上是关于这些年,那些跨域的主要内容,如果未能解决你的问题,请参考以下文章

回顾这些年的学习技术经历

这些年我们处理过的跨域(转)

一些网址收藏

提效小技巧——记录那些不常用的代码片段

跨域访问方法介绍--使用片段识别符传值

web前端开发JQuery常用实例代码片段(50个)