达观数据跨域问题产生及解决办法

熟悉web前端开发的人都知道,浏览器在请求不同域的资源时,会受到浏览器的同源策略影响,请求资源有可能不成功,这也就是我们前端常常提到的跨域问题。

这类问题往往会拖延项目推进,困扰着前端开发者。本文将从技术层面全面解析跨域问题的由来、实战经验,以及方法总结。

1.跨域问题的由来

首先我们需要了解,前端处于项目开发过程中最接近用户的区域,代码最容易被hack获取解析,也最容易受到攻击。

针对这个问题,互联网早期探索者Netscape提出了一个著名的安全策略——同源策略:浏览器限制脚本中发起的跨站请求,要求JavaScript或cookie只能访问同源的资源。

这里的同源指的是域名、协议名以及端口号相同。正是由于这个机制,才使得我们无法用简单的手段来请求不同域名下的资源。

2.如何解决跨域问题

2.1跨域资源共享CORS

CORS是W3C提出的一个标准——跨域资源共享(Cross-Origin Resource Sharing)。它允许浏览器向跨域服务器发出XML Http Request请求,从而克服AJAX只能同源使用的限制。

首先CORS需要浏览器和服务器同时支持,现代浏览器包括IE10+都支持CORS请求。

图1 CORS浏览器支持进度

使用CORS跨域和普通的AJAX过程是一样的。浏览器一旦发现AJAX请求跨域资源,就会自动添加一些请求头帮助我们处理一些事情。所以只要服务端提供CORS支持,前端不需要做额外的事情。

CORS请求分两种,这里简要介绍其中一种:

i)简单请求(simple request)

满足以下两大条件,就属于简单请求。

  1. 请求方式是head,get,post三者中其一;
  2. http请求头信息不超出以下字段:Accept、Accept-Language、Last-Event-ID、Content-Type:只限于application/x-www-form-urlencoded、multipart/form-data和text/plain。

浏览器在进行简单请求时,伴随着ajax请求的产生,浏览器会自动添加origin字段,表明请求来源。服务器会识别出源,并且决定是否返回数据给该源。

图2 浏览器自动添加origin字段

如果origin并不在服务器许可范围内,服务器会返回一个正常的http。浏览器接受后发现这个http的头信息中不包含Access-Control-Allow-Origin字段,就知道出错了,随后在浏览器会抛出相应的error。

图3 origin不被服务器认可从而抛出error

这里列出几个返回http中常见的几个CORS请求头:

  1. Access-Control-Allow-Origin:该字段为必需字段,可以是指定的源名(协议+域名+端口),也可以使用通配符*代表接受所有跨域资源请求
  2. Access-Control-Allow-Credentials:该字段为boolean值,表示是否允许发送cookie,默认为false,即不允许发送cookie值。
  3. Access-Control-Expose-Headers:该字段可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma.如果想拿到其他的字段,必须在Access-Control-Expose-Headers里面指定。

图4 CORS请求成功后,服务其返回成功的请求头

ii)非简单请求

非简单请求会对服务器有特殊要求,在正式通信之前,会增加一次http查询请求,额外的占用资源,并影响到请求速度。

达观数据在数据处理以及返回数据的过程中对性能有着极高的要求,在实际项目中并没有尝试这种实现方式。笔者本人也并未对此做过深入学习,在此就不班门弄斧了。

2.2使用jsonp进行跨域请求

Jsonp可以说是目前前端跨域问题最普遍的解决方案了。首先简要介绍一下jsonp概念,jsonp跟json只有一字母之差,却完全是两个概念,json是一种数据存储的基本格式,通常见于js脚本存储数据,ajax请求数据。

而jsonp是一种非正式的传输协议,该协议的一个要点是允许用户传递一个callback参数给服务端,服务端返回数据时,会将callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

Jsonp的原理是:普通资源请求都会受到跨域影响,但含有src属性的跨域资源在调用时并不会受到影响,Jsonp就是由于这种特性被发掘并实现跨域的。

在使用jsonp进行跨域请求时,需要注册一个callback回调函数,这个函数接受到一个参数,之后在浏览器中动态生成一个script标签,,并在请求的src中加入我们的callback名称。

图5 在本地定义callback函数

例如:callback名为alert Message,在页面中动态添加src为www.datagrand.com? callback=alert Message的script标签。

这样,一条请求就向服务端发送成功了,服务端在接收并识别出callback后,将想要返回的数据动态的包裹在callback括号内。

图6 Jsonp请求成功后返回的脚本内容

Script加载成功后,会执行本地alert Message方法,将最终的结果alert出来。本质上,jsonp就是将需要执行的函数名传递给服务端,在服务端将对应的数据包装到函数参数域内,并返回到本地进行调用的过程。

2.3小众跨域方式

除了CORS和jsonp之外还有一些比较小众的跨域方式,一起整理分享给各位读者。

i)document.domain

页面中的iframe和其父页面的window对象是可以互相获取到的(尽管取到的window对象不能拿到方法和属性)。但是我们可以通过修改document.domain这一属性,来使获得window对象具有方法和属性。

这里需要注意的是,iframe和其父页面的主域名必须相同。例如,在www.datagrand.com/index.html页面中嵌入一个src为shilieyu.datagrand.com/index.html的iframe,同时修改两个页面的document.domain为datagrand.com。

这样就可以在互相获取到对方页面的window对象中,且存在方法和属性了。这时,在其中一个页面中可以使用ajax请求数据,另一个页面就可以使用window对象获取到对应数据。

ii)window.postMessage

postMessage为html5中引进的方法,该方法可以向其他window对象发送消息,无论这个window对象是否同源。

图7 possMessage支持进度

首先介绍一下postMessage方法的两个参数,postMessage接受两个参数,第一个为要发送的数据,该参数只能为字符串类型,第二个参数用来限定接受消息的window对象所在域。

如果不想限定,可以使用通配符*允许所有域接受该消息。需要接收消息的window对象,需要监听自身的message事件,来获取传过来的消息。

事件触发时,可以通过接受参数的data值,来获取对应的数据。

举例,如下图所示,在a页面中创建指向b页面的iframe并在其onload阶段调用postMessage方法,随后在iframe完成时,页面会alert出a页面传递过去的值。也就意味着通过postMessage方法跨域成功了。

图8 使用postMessage的a页面

图9 接受postMessage的b页面(http://shilieyu.datagrand.net/index.html)

iii)window.name

Window的name属性有个很有趣的特点,在一个窗口(window)的生存周期内,所有页面共享一个name属性,每个页面对window.name都有读写的权限,这就意味着,在页面即将发生跳转时,可以将想要传递的数据放入window.name中,页面跳转成功后,新页面可以通过window.name获取前页面传递的值。

利用这种特性,可以在a页面通过iframe的形式,先访问存储数据页面,将请求值存入iframe的window.name中,再将src设置为与a页面同源的页面,否则是无法通过window获取到iframe中的属性的(详见window.domain中内容)

总结

跨域作为一个前端开发中经常会遇到的门槛,常常困扰着开发者们。本文对跨域问题的产生以及如何解决跨域问题进行了总结,也是希望读者在遇到相似的困境时,能有一个完整清晰的解决思路。

作者简介

施列宇,15年毕业于西安电子科技大学,专业软件工程,目前就职于达观数据,任职前端开发工程师,负责大数据平台的pc与webapp的研发工作。曾在上海葡萄城信息技术有限公司wijmo项目组负责wijmo控件前端的维护以及控件在Asp.Net平台的衍生工作。对web兼容性,前端性能提升,SEO,响应式设计以及主流前端框架有着丰富的实战经验。

原文发布于微信公众号 - 达观数据(Datagrand_)

原文发表时间:2016-08-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LanceToBigData

struts2(一)之初识struts2

前言   我们都知道struts2是一个框架,那什么是框架呢?很多人其实不太明白,其实框架就是一个半成品,别人将一些功能已经写好了,我们只需要拿来用即可,像我们...

24090
来自专栏散尽浮华

SVN和Git对比梳理

在日常运维工作中,经常会用到版本控制系统,目前用到最广泛的版本控制器就是SVN和Git,那么这两者之间有什么不同之处呢? SVN(Subversion)是集中式...

33060
来自专栏数据库

数据恢复-SQL被注入攻击程序的应对策略

前几天某客户紧急求助我们,其Oracle数据库由于重启之后无法正常启动。最后通过数据库全备进行了一天一夜的恢复,最后仍然无法正常打开数据库。 alter dat...

21780
来自专栏向治洪

node.js基本工作原理及流程

概述 Node.js是什么 Node 是一个服务器端 JavaScript 解释器,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动,...

86260
来自专栏云飞学编程

python爬虫零基础入门——反爬的简单说明

之前在《如何开始写你的第一个python脚本——简单爬虫入门!》中给大家分享了一下写一个爬虫脚本的基本步骤,今天继续分享给大家在初期遇到的一个很烦人的问题——反...

10330
来自专栏Java帮帮-微信公众号-技术文章全总结

Maven 核心原理解析(1)

Maven 是每一位Java工程师每天都会接触的工具, 但据我所知其实很多人对Maven理解的并不深, 只把它当做一个依赖管理工具(下载依赖、打包), Mave...

592100
来自专栏我是攻城师

关于SparkStreaming中的checkpoint

31040
来自专栏Android开发实战

HTTP1.0、HTTP1.1和HTTP2.0的区别

早在HTTP建立之初,主要就是为了将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。也是说对于前端来说,我们所写的HTML页面将要放在我们的w...

22830
来自专栏前端杂货铺

XSS分析及预防

XSS(Cross Site Scripting),又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行。在WEB前端应用日益发展的今天,XSS漏洞尤其容...

38070
来自专栏cloudskyme

maven 学习总结

1、关于Maven 最近学了一些maven方面的知识,感觉这个工具挺好用,为防遗忘现总结一下。Maven是一个项目管理工具,它可以通过一段描述信息来管理项目的构...

34850

扫码关注云+社区

领取腾讯云代金券