概述
作为 web 开发,跨域是一个绕不开的话题,最早我们从使用 jQuery 的jsonp
开始,到后来原生实现 jsonp,再到后来各种其他实现方式,如document.domain+iframe
、CORS
等,再到后来了解了可以通过 nginx 等代理跨域,现在随着 HTML5 的流行,又有了 postMessage 跨域与 WebSocket 协议跨域。对于相关概念、各种实现的区别本文做个汇总整理。
详述
跨域
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。
广义的跨域:
- 资源跳转: A 链接、重定向、表单提交;
- 资源嵌入:
<link>
、<script>
、<img>
、<frame>
等 dom 标签,还有样式中 background:url()、@font-face()等文件外链; - 脚本请求: js 发起的 ajax 请求、dom 和 js 对象的跨域操作等;
狭义的跨域:
是由浏览器同源策略限制的一类请求场景。
同源策略
同源策略是一个重要的安全策略,它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。
同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 1995 年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指”协议+域名+端口”三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源。
同源策略限制以下几种行为:
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js 对象无法获得
- AJAX 请求不能发送
下表给出了与 URL http://store.company.com/dir/page.html
的源进行对比的示例:
URL | 结果 | 原因 |
---|---|---|
http://store.company.com/dir2/other.html |
同源 | 只有路径不同 |
http://store.company.com/dir/inner/another.html |
同源 | 只有路径不同 |
https://store.company.com/secure.html |
失败 | 协议不同 |
http://store.company.com:81/dir/etc.html |
失败 | 端口不同 ( http:// 默认端口是 80) |
http://news.company.com/dir/other.html |
失败 | 主机不同 |
源的继承
在页面中通过 about:blank 或 javascript: URL 执行的脚本会继承打开该 URL 的文档的源,因为这些类型的 URLs 没有包含源服务器的相关信息。
例如,about:blank 通常作为父脚本写入内容的新的空白弹出窗口的 URL(例如,通过 Window.open() )。 如果此弹出窗口也包含 JavaScript,则该脚本将从创建它的脚本那里继承对应的源。
IE 中的特例
Internet Explorer 的同源策略有两个主要的差异点:
- 授信范围(Trust Zones):两个相互之间高度互信的域名,如公司域名(corporate domains),则不受同源策略限制。
- 端口:IE 未将端口号纳入到同源策略的检查中,因此
https://company.com:81/index.html
和https://company.com/index.html
属于同源并且不受任何限制。
这些差异点是不规范的,其它浏览器也未做出支持。
跨域解决方案
jsonp 跨域
Jsonp(JSON with Padding) 是 json 的一种”使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
实现原理:基于两个条件:网页允许资源嵌入,且资源路径不受限制;网页使用 js 有三种方式,HTML 标签上javascript:xxx
、<script>
标签内和<script>
标签外链。JSONP 就是利用这种标签外链,通过请求其他域下的服务,返回一个携带结果数据的 JS 执行函数。
jsonp 缺点:只能实现 get 一种请求。
客户端定义一个函数:
1 | function handleCallback(res) { |
服务端返回一段 js:
1 | handleCallback({ status: true, user: "admin" }); |
具体实现
客户端(原生):
1 | <script> |
客户端(jquery):
1 | $.ajax({ |
服务端(nodejs):
1 | var querystring = require("querystring"); |
服务端(java):
1 | protected void packNoJsonStringCallBack(HttpServletRequest request, HttpServletResponse response, Object result) { |
实际运用(JSONP+Promise):
1 | const jsonp = (url, params) => { |
跨域资源共享(CORS)
普通跨域请求:只服务端设置 Access-Control-Allow-Origin 即可,前端无须设置,若要带 cookie 请求:前后端都需要设置。
需注意的是:由于同源策略的限制,所读取的 cookie 为跨域请求接口所在域的 cookie,而非当前页。
目前,所有浏览器都支持该功能(IE8+:IE8/9 需要使用 XDomainRequest 对象来支持 CORS)),CORS 也已经成为主流的跨域解决方案。
前端设置:
- 原生 ajax
1 | // 前端设置是否带cookie |
- jQuery ajax
1 | $.ajax({ |
- axios
1 | axios.defaults.withCredentials = true; |
服务端设置:
- Java
1 | /* |
- Nodejs
1 | var http = require("http"); |
实际运用:
1 | "/promotion/hotDeals", produces = "text/html;charset=UTF-8") (value = |
document.domain
+ iframe
跨域
此方案仅限主域相同,子域不同的跨域应用场景。
实现原理:两个页面都通过 js 强制设置 document.domain 为基础主域,就实现了同域。
- 父窗口:(
http://www.domain.com/a.html
)
1 | <iframe id="iframe" src="http://child.domain.com/b.html"></iframe> |
- 子窗口:(
http://child.domain.com/b.html
)
1 | <script> |
实际运用:
在主站(主站应用 www.abc.com)中打开弹框登录窗口(登录应用 login.abc.com),这时候两个子域之间沟通可以通过设置 domain 为父域值来实现数据交换。
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 页面所有对象。
- a.html:(
http://www.domain1.com/a.html
)
1 | <iframe |
- b.html:(
http://www.domain2.com/b.html
)
1 | <iframe |
- c.html:(
http://www.domain1.com/c.html
)
1 | <script> |
window.name
+ iframe
跨域
window.name 属性的独特之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。
- a.html:(
http://www.domain1.com/a.html
)
1 | var proxy = function (url, callback) { |
proxy.html:(
http://www.domain1.com/proxy.html
)
中间代理页,与 a.html 同域,内容为空即可。b.html:(
http://www.domain2.com/b.html
)
1 | <script> |
总结:通过 iframe 的 src 属性由外域转向本地域,跨域数据即由 iframe 的 window.name 从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
postMessage 跨域
postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API,且是为数不多可以跨域操作的 window 属性之一,它可用于解决以下方面的问题:
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的 iframe 消息传递
- 上面三个场景的跨域数据传递
用法:postMessage(data,origin)方法接受两个参数
data: html5 规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用 JSON.stringify()序列化。
origin: 协议+主机+端口号,也可以设置为”*“,表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为”/“。
- a.html:(
http://www.domain1.com/a.html
)
1 | <iframe |
- b.html:(
http://www.domain2.com/b.html
)
1 | <script> |
实际运用:
域 1 下的 react 项目中:
1 |
|
域 2 下的 jquery 项目中:
1 | var evt = window.event; |
WebSocket 协议跨域
WebSocket protocol 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是 server push 技术的一种很好的实现。
原生 WebSocket API 使用起来不太方便,我们使用 Socket.io,它很好地封装了 webSocket 接口,提供了更简单、灵活的接口,也对不支持 webSocket 的浏览器提供了向下兼容。
- 前端代码:
1 | <div>user input:<input type="text" /></div> |
- Nodejs socket 后台:
1 | var http = require('http'); |
nginx 代理跨域
- nginx 配置解决 iconfont 跨域
浏览器跨域访问 js、css、img 等常规静态资源被同源策略许可,但 iconfont 字体文件(eot|otf|ttf|woff|svg)例外,此时可在 nginx 的静态资源服务器中加入以下配置。
1 | location / { |
- nginx 反向代理接口跨域
跨域原理: 同源策略是浏览器的安全策略,不是 HTTP 协议的一部分。服务器端调用 HTTP 接口只是使用 HTTP 协议,不会执行 JS 脚本,不需要同源策略,也就不存在跨越问题。
实现思路:通过 nginx 配置一个代理服务器(域名与 domain1 相同,端口不同)做跳板机,反向代理访问 domain2 接口,并且可以顺便修改 cookie 中 domain 信息,方便当前域 cookie 写入,实现跨域登录。
nginx 具体配置:
1 | #proxy服务器 |
前端代码示例:
1 | var xhr = new XMLHttpRequest(); |
Nodejs 后台示例:
1 | var http = require("http"); |
Nodejs 中间件代理跨域
node 中间件实现跨域代理,原理大致与 nginx 相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置 cookieDomainRewrite 参数修改响应头中 cookie 中域名,实现当前域的 cookie 写入,方便接口登录认证。
利用 node + express + http-proxy-middleware 搭建一个 proxy 服务器。
前端代码示例:
1 | var xhr = new XMLHttpRequest(); |
中间件服务器:
1 | var express = require("express"); |
Nodejs 后台(同 nginx)
参考
https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy