非常全的跨域实现方案
Posted fe-read
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了非常全的跨域实现方案相关的知识,希望对你有一定的参考价值。
由于同源策略的限制,满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全,但另一方面也限制了资源的使用。
那么如何实现跨域呢,以下是实现跨域的一些方法。
一、jsonp跨域
原理:script标签引入js文件不受跨域影响。不仅如此,带src属性的标签都不受同源策略的影响。
正是基于这个特性,我们通过script标签的src属性加载资源,数据放在src属性指向的服务器上,使用json格式。
由于我们无法判断script的src的加载状态,并不知道数据有没有获取完成,所以事先会定义好处理函数。服务端会在数据开头加上这个函数名,等全部加载完毕,便会调用我们事先定义好的函数,这时函数的实参传入的就是后端返回的数据了。
示例代码:https://github.com/mfaying/lesson/tree/master/cross-origin/jsonp
演示网址:https://mfaying.github.io/lesson/cross-origin/jsonp/index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function callback(data) {
alert(data.test);
}
</script>
<script src="./jsonp.js"></script>
</body>
</html>
jsonp.js
callback({"test": 0});
访问index.html弹窗便会显示0
该方案的缺点是:只能实现get一种请求。
二、document.domain + iframe跨域
此方案仅限主域相同,子域不同的应用场景。
比如百度的主网页是www.baidu.com,zhidao.baidu.com、news.baidu.com等网站是www.baidu.com这个主域下的子域。
实现原理:两个页面都通过js设置document.domain为基础主域,就实现了同域,就可以互相操作资源了。
示例代码:https://github.com/mfaying/lesson/tree/master/cross-origin/document-domain
演示网址:https://mfaying.github.io/lesson/cross-origin/document-domain/index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="https://mfaying.github.io/lesson/cross-origin/document-domain/child.html"></iframe>
<script>
document.domain = 'mfaying.github.io';
var t = '0';
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
document.domain = 'mfaying.github.io';
alert(window.parent.t);
</script>
</body>
</html>
三、location.hash + iframe跨域
父页面改变iframe的src属性,location.hash的值改变,不会刷新页面(还是同一个页面),在子页面可以通过window.localtion.hash获取值。
示例代码:https://github.com/mfaying/lesson/tree/master/cross-origin/location-hash
演示网址:https://mfaying.github.io/lesson/cross-origin/location-hash/index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="child.html#" style="display: none;"></iframe>
<script>
var oIf = document.getElementsByTagName('iframe')[0];
document.addEventListener('click', function () {
oIf.src += '0';
}, false);
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
window.onhashchange = function() {
alert(window.location.hash.slice(1));
}
</script>
</body>
</html>
点击index.html页面弹窗便会显示0
四、window.name + iframe跨域
原理:window.name属性在不同的页面(甚至不同域名)加载后依旧存在,name可赋较长的值(2MB)。
在iframe非同源的页面下设置了window的name属性,再将iframe指向同源的页面,此时window的name属性值不变,从而实现了跨域获取数据。
示例代码:https://github.com/mfaying/lesson/tree/master/cross-origin/window-name
演示网址:https://mfaying.github.io/lesson/cross-origin/window-name/parent/index.html
./parent/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var oIf = document.createElement('iframe');
oIf.src = 'https://mfaying.github.io/lesson/cross-origin/window-name/child.html';
var state = 0;
oIf.onload = function () {
if (state === 0) {
state = 1;
oIf.src = 'https://mfaying.github.io/lesson/cross-origin/window-name/parent/proxy.html';
} else {
alert(JSON.parse(oIf.contentWindow.name).test);
}
}
document.body.appendChild(oIf);
</script>
</body>
</html>
./parent/proxy.html
空文件,仅做代理页面
./child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
window.name = '{"test": 0}'
</script>
</body>
</html>
五、postMessage跨域
postMessage是HTML5提出的,可以实现跨文档消息传输。
用法
getMessageHTML.postMessage(data, origin);
data: html5规范支持的任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。
origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
getMessageHTML是我们对于要接受信息页面的引用,可以是iframe的contentWindow属性、window.open的返回值、通过name或下标从window.frames取到的值。
示例代码:https://github.com/mfaying/lesson/tree/master/cross-origin/postMessage
演示网址:https://mfaying.github.io/lesson/cross-origin/postMessage/index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe id='ifr' src='./child.html' style="display: none;"></iframe>
<button id='btn'>click</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function () {
var ifr = document.getElementById('ifr');
ifr.contentWindow.postMessage(0, '*');
}, false);
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('message', function(event){
alert(event.data);
}, false);
</script>
</body>
</html>
点击index.html页面上的按钮,弹窗便会显示0。
六、跨域资源共享(CORS)
只要在服务端设置Access-Control-Allow-Origin就可以实现跨域请求,若是cookie请求,前后端都需要设置。
由于同源策略的限制,所读取的cookie为跨域请求接口所在域的cookie,并非当前页的cookie。
CORS是目前主流的跨域解决方案。
原生node.js实现
示例代码:https://github.com/mfaying/lesson/tree/master/cross-origin/cors
演示网址:https://mfaying.github.io/lesson/cross-origin/cors/index.html(访问前需要先执行node server.js命令启动本地服务器)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<script>
$.get('http://localhost:8080', function (data) {
alert(data);
});
</script>
</body>
</html>
server.js
var http = require('http');
var server = http.createServer();
server.on('request', function(req, res) {
res.writeHead(200, {
'Access-Control-Allow-Credentials': 'true', // 后端允许发送Cookie
'Access-Control-Allow-Origin': 'https://mfaying.github.io', // 允许访问的域(协议+域名+端口)
'Set-Cookie': 'key=1;Path=/;Domain=mfaying.github.io;HttpOnly' // HttpOnly:脚本无法读取cookie
});
res.write(JSON.stringify(req.method));
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
koa结合koa2-cors中间件实现
示例代码:https://github.com/mfaying/lesson/tree/master/cross-origin/koa-cors
演示网址:https://mfaying.github.io/lesson/cross-origin/koa-cors/index.html (访问前需要先执行node server.js命令启动本地服务器)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<script>
$.get('http://localhost:8080', function (data) {
alert(data);
});
</script>
</body>
</html>
server.js
var koa = require('koa');
var router = require('koa-router')();
const cors = require('koa2-cors');
var app = new koa();
app.use(cors({
origin: function (ctx) {
if (ctx.url === '/test') {
return false;
}
return '*';
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
maxAge: 5,
credentials: true,
allowMethods: ['GET', 'POST', 'DELETE'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))
router.get('/', async function (ctx) {
ctx.body = "0";
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000);
console.log('server is listening in port 3000');
七、WebSocket协议跨域
WebSocket协议是HTML5的新协议。能够实现浏览器与服务器全双工通信,同时允许跨域,是服务端推送技术的一种很好的实现。
示例代码:https://github.com/mfaying/lesson/tree/master/cross-origin/websocket
演示网址:https://mfaying.github.io/lesson/cross-origin/websocket/index.html(访问前需要先安装依赖包,再执行node server.js命令启动本地websocket服务端)
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var ws = new WebSocket('ws://localhost:8080/', 'echo-protocol');
// 建立连接触发的事件
ws.onopen = function () {
var data = { "test": 1 };
ws.send(JSON.stringify(data));// 可以给后台发送数据
};
// 接收到消息的回调方法
ws.onmessage = function (event) {
alert(JSON.parse(event.data).test);
}
// 断开连接触发的事件
ws.onclose = function () {
conosle.log('close');
};
</script>
</body>
</html>
server.js
var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer(function(request, response) {
response.writeHead(404);
response.end();
});
server.listen(8080, function() {
console.log('Server is listening on port 8080');
});
wsServer = new WebSocketServer({
httpServer: server,
autoAcceptConnections: false
});
function originIsAllowed(origin) {
return true;
}
wsServer.on('request', function(request) {
if (!originIsAllowed(request.origin)) {
request.reject();
console.log('Connection from origin ' + request.origin + ' rejected.');
return;
}
var connection = request.accept('echo-protocol', request.origin);
console.log('Connection accepted.');
connection.on('message', function(message) {
if (message.type === 'utf8') {
const reqData = JSON.parse(message.utf8Data);
reqData.test -= 1;
connection.sendUTF(JSON.stringify(reqData));
}
});
connection.on('close', function() {
console.log('close');
});
});
八、nginx代理跨域
原理:同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不存在跨越问题。
实现:通过nginx配置代理服务器(域名与test1相同,端口不同)做跳板机,反向代理访问test2接口,且可以修改cookie中test信息,方便当前域cookie写入,实现跨域登录。
nginx具体配置:
#proxy服务器
server {
listen 81;
server_name www.test1.com;
location / {
proxy_pass http://www.test2.com:8080; #反向代理
proxy_cookie_test www.test2.com www.test1.com; #修改cookie里域名
index index.html index.htm;
add_header Access-Control-Allow-Origin http://www.test1.com; #当前端只跨域不带cookie时,可为*
add_header Access-Control-Allow-Credentials true;
}
}
!-->以上是关于非常全的跨域实现方案的主要内容,如果未能解决你的问题,请参考以下文章