一、造成跨域的两种策略
浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:
DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。
XmlHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。 只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。
二、为什么要有跨域限制
了解完跨域之后,想必大家都会有这么一个思考,为什么要有跨域的限制,浏览器这么做是出于何种原因呢。其实仔细想一想就会明白,跨域限制主要是为了安全考虑。
常见的跨域场景:
URL 说明 是否允许通信 http:
(1)AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略,相当危险,我们发起的每一次HTTP请求都会带上请求地址对应的cookie,那么可以做如下攻击:
1、用户登录了自己的银行页面http://mybank.com,http://mybank.com向用户的cookie中添加用户标识。
2、用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
3、http://evil.com向http://mybank.com发起AJAXHTTP请求,请求会默认把http://mybank.com对应cookie也同时发送过去。
4、银行页面从发送的cookie中提取用户标识,验证用户无误,response中返回请求数据。此时数据就泄露了。
5、而且由于Ajax在后台执行,用户无法感知这一过程。
(2)DOM同源策略也一样,如果iframe之间可以跨域访问,可以这样攻击:
1、做一个假网站,里面用iframe嵌套一个银行网站 http://mybank.com。
2、把iframe宽高啥的调整到页面全部,这样用户进来除了域名,别的部分和银行的网站没有任何差别。
3、这时如果用户输入账号密码,我们的主网站可以跨域访问到http://mybank.com的dom节点,就可以拿到用户的输入了,那么就完成了一次攻击。 所以说有了跨域跨域限制之后,我们才能更安全的上网了。
三、跨域的解决方式
(1)跨域资源共享
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。 对于这个方式,阮一峰老师总结的文章特别好,希望深入了解的可以看一下http://www.ruanyifeng.com/blog/2016/04/cors.html。
这里简单的说一说大体流程。
1、对于客户端,我们还是正常使用xhr对象发送ajax请求。 唯一需要注意的是,我们需要设置我们的xhr属性withCredentials为true,不然的话,cookie是带不过去的,设置: xhr.withCredentials = true;
2、对于服务器端,需要在 response header中设置如下两个字段: Access-Control-Allow-Origin: http://www.yourhost.com Access-Control-Allow-Credentials:true 这样,我们就可以跨域请求接口了。
(2)jsonp实现跨域
基本原理就是通过动态创建script标签,然后利用src属性进行跨域。
这么说比较模糊,我们来看个例子:
1 // 定义一个fun函数
2 function fun(fata) {
3 console.log(data);
4 };
5 // 创建一个脚本,并且告诉后端回调函数名叫fun
6 var body = document.getElementsByTagName('body')[0];
7 var script = document.gerElement('script');
8 script.type = 'text/javasctipt';
9 script.src = 'demo.js?callback=fun';
10 body.appendChild(script);
返回的js脚本,直接会执行。所以就执行了事先定义好的fun函数了,并且把数据传入了进来。
fun({"name": "name"})
当然,这个只是一个原理演示,实际情况下,我们需要动态创建这个fun函数,并且在数据返回的时候销毁它。 因为在实际使用的时候,我们用的各种ajax库,基本都包含了jsonp的封装,不过我们还是要知道一下原理,不然就不知道为什么jsonp不能发post请求了~
(3)document.domain + iframe跨域
此方案仅限主域相同,子域不同的跨域应用场景。
实现原理:两个页面都通过js强制设置document.domain为基础主域,就实现了同域。
(1)父窗口:(http://www.domain.com/a.html)
1 <iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
2 <script>
3 document.domain = 'domain.com';
4 var user = 'admin';
5 </script>
(2)子窗口:(http://child.domain.com/b.html)
1 <script>
2 document.domain = 'domain.com';
3 // 获取父窗口中变量
4 alert('get js data from parent ---> ' + window.parent.user);
5 </script>
(4)window.name + iframe跨域
window对象拥有name属性,它有一个特点:相同协议下,在一个页面中,不随URL的改变而改变
通过window.name实现跨域也很简单,iframe拥有contentWindow属性,其指向该iframe的window对象的引用,如果在iframe的src指向的页面中设置window.name值,那么就可以通过iframe.contentWindow.name就可以拿到这个值了
1 var url = "http://funteas.com/lab/windowName";
2 var iframe = document.createElement('iframe')
3 iframe.onload = function(){
4 var data = iframe.contentWindow.name
5 console.log(data)
6 }
7 iframe.src = url
8 document.body.appendChild(iframe)
然而,chrome会提示你跨域了! 而我们已经知道window.name不随URL的改变而改版,即onload时,已经获取到了name,只不过因为不同源,当前页面的脚本无法拿到iframe.contentWindow.name,此时只需要把iframe.src改为同源即可
1 var url = "http://funteas.com/lab/windowName";
2 var iframe = document.createElement('iframe')
3 iframe.onload = function(){
4 iframe.src = 'favicon.ico';
5 var data = iframe.contentWindow.name
6 console.log(data)
7 }
8 iframe.src = url
9 document.body.appendChild(iframe)
(5)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)a.html:(http://www.domain1.com/a.html)
1 <iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
2 <script>
3 var iframe = document.getElementById('iframe');
4
5 // 向b.html传hash值
6 setTimeout(function() {
7 iframe.src = iframe.src + '#user=admin';
8 }, 1000);
9
10 // 开放给同域c.html的回调方法
11 function onCallback(res) {
12 alert('data from c.html ---> ' + res);
13 }
14 </script>
(2)b.html:(http://www.domain2.com/b.html)
1 <iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
2 <script>
3 var iframe = document.getElementById('iframe');
4
5 // 监听a.html传来的hash值,再传给c.html
6 window.onhashchange = function () {
7 iframe.src = iframe.src + location.hash;
8 };
9 </script>
(3)c.html:(http://www.domain1.com/c.html)
1 <script>
2 // 监听b.html传来的hash值
3 window.onhashchange = function () {
4 // 再通过操作同域a.html的js回调,将结果传回
5 window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
6 };
7 </script>
(6)postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
(a)页面和其打开的新窗口的数据传递(b)多窗口之间消息传递(c)页面与嵌套的iframe消息传递
用法:otherWindow.postMessage(message,targetOrigin);
postMessage(data,origin)方法接受两个参数:
data: html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。
origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
(1)a.html:(http://www.domain1.com/a.html))
1 <iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
2 <script>
3 var iframe = document.getElementById('iframe');
4 iframe.onload = function() {
5 var data = {
6 name: 'aym'
7 };
8 // 向domain2传送跨域数据
9 iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
10 };
11
12 // 接受domain2返回数据
13 window.addEventListener('message', function(e) {
14 alert('data from domain2 ---> ' + e.data);
15 }, false);
16 </script>
(2)b.html:(http://www.domain2.com/b.html)
1 <script>
2 // 接收domain1的数据
3 window.addEventListener('message', function(e) {
4 alert('data from domain1 ---> ' + e.data);
5
6 var data = JSON.parse(e.data);
7 if (data) {
8 data.number = 16;
9
10 // 处理后再发回domain1
11 window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
12 }
13 }, false);
14 </script>
(7)WebSocket协议跨域
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。 原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。
(1)前端代码
1 <div>user input:<input type="text"></div>
2 <script src="./socket.io.js"></script>
3 <script>
4 var socket = io('http://www.domain2.com:8080');
5
6 // 连接成功处理
7 socket.on('connect', function() {
8 // 监听服务端消息
9 socket.on('message', function(msg) {
10 console.log('data from server: ---> ' + msg);
11 });
12
13 // 监听服务端关闭
14 socket.on('disconnect', function() {
15 console.log('Server socket has closed.');
16 });
17 });
18
19 document.getElementsByTagName('input')[0].onblur = function() {
20 socket.send(this.value);
21 };
22 </script>
(2)Nodejs socket后台
1 var http = require('http');
2 var socket = require('socket.io');
3
4 // 启http服务
5 var server = http.createServer(function(req, res) {
6 res.writeHead(200, {
7 'Content-type': 'text/html'
8 });
9 res.end();
10 });
11
12 server.listen('8080');
13 console.log('Server is running at port 8080...');
14
15 // 监听socket连接
16 socket.listen(server).on('connection', function(client) {
17 // 接收信息
18 client.on('message', function(msg) {
19 client.send('hello:' + msg);
20 console.log('data from client: ---> ' + msg);
21 });
22
23 // 断开处理
24 client.on('disconnect', function() {
25 console.log('Client socket has closed.');
26 });
27 });
(8)nginx代理跨域
1、nginx配置解决iconfont跨域
浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置。
1 location / {
2 add_header Access-Control-Allow-Origin *;
3 }
2、nginx反向代理接口跨域
跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。
实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。
nginx具体配置:
1 #proxy服务器
2 server {
3 listen 81;
4 server_name www.domain1.com;
5
6 location / {
7 proxy_pass http://www.domain2.com:8080; #反向代理
8 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
9 index index.html index.htm;
10
11 # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
12 add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时,可为*
13 add_header Access-Control-Allow-Credentials true;
14 }
15 }
(1)前端代码示例:
1 var xhr = new XMLHttpRequest();
2
3 // 前端开关:浏览器是否读写cookie
4 xhr.withCredentials = true;
5
6 // 访问nginx中的代理服务器
7 xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
8 xhr.send();
(2)Nodejs后台示例:
1 var http = require('http');
2 var server = http.createServer();
3 var qs = require('querystring');
4
5 server.on('request', function(req, res) {
6 var params = qs.parse(req.url.substring(2));
7
8 // 向前台写cookie
9 res.writeHead(200, {
10 'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本无法读取
11 });
12
13 res.write(JSON.stringify(params));
14 res.end();
15 });
16
17 server.listen('8080');
18 console.log('Server is running at port 8080...');
(9)Nodejs中间件代理跨域
node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。
1、 非vue框架的跨域(2次跨域)
利用node + express + http-proxy-middleware搭建一个proxy服务器。
(1)前端代码示例:
1 var xhr = new XMLHttpRequest();
2
3 // 前端开关:浏览器是否读写cookie
4 xhr.withCredentials = true;
5
6 // 访问http-proxy-middleware代理服务器
7 xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
8 xhr.send();
(2)中间件服务器:
1 var express = require('express');
2 var proxy = require('http-proxy-middleware');
3 var app = express();
4
5 app.use('/', proxy({
6 // 代理跨域目标接口
7 target: 'http://www.domain2.com:8080',
8 changeOrigin: true,
9
10 // 修改响应头信息,实现跨域并允许带cookie
11 onProxyRes: function(proxyRes, req, res) {
12 res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
13 res.header('Access-Control-Allow-Credentials', 'true');
14 },
15
16 // 修改响应信息中的cookie域名
17 cookieDomainRewrite: 'www.domain1.com' // 可以为false,表示不修改
18 }));
19
20 app.listen(3000);
21 console.log('Proxy server is listen at port 3000...');
(3)Nodejs后台示例:同nginx中
2、 vue框架的跨域(1次跨域)
利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下,由于vue渲染服务和接口代理服务都是webpack-dev-server同一个,所以页面与代理接口之间不再跨域,无须设置headers跨域信息了。
webpack.config.js部分配置:
1 module.exports = {
2 entry: {},
3 module: {},
4 ...
5 devServer: {
6 historyApiFallback: true,
7 proxy: [{
8 context: '/login',
9 target: 'http://www.domain2.com:8080', // 代理跨域目标接口
10 changeOrigin: true,
11 cookieDomainRewrite: 'www.domain1.com' // 可以为false,表示不修改
12 }],
13 noInfo: true
14 }
15 }
总结:以上跨域详解摘自不同的专栏整理而成,实际情况下,一般用cors,jsonp等常见方法就可以了。不过遇到了一些非常规情况,我们还是需要知道有更多的方法可以选择的。 |