题目点评
主要考察对web安全是否有接触 ,关于安全方面的在面试时是经常被问到的。同一个意思可能问法也不同,比如说:“你对跨域了解吗?”“什么是跨域请求了?”其实都是同一个意思,回答思路可以先回答什么是跨域请求,有什么方式可以实现跨域请求基本上就可以了。
什么是跨域请求
基于JavaScript的安全,JavaScript同源策略要求一个网站不能调用其它网站的js对象。构成跨域的条件就是一个页面的URL协议、域名、端口与另一个页面的URL只要有一个不同就构成了跨域请求。为了辅助大家的理解,看下面的表格就是知道是什么意思了!
URL | 说明 | 是否允许通信 |
http://www.a.com/a.js | 同一域名下 | 允许 |
http://www.a.com/lab/a.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js | 同一域名,不同端口 | 不允许 |
http://www.a.com/a.js | 同一域名,不同协议 | 不允许 |
http://www.a.com/a.js | 域名和域名对应ip | 不允许 |
http://www.a.com/a.js | 主域相同,子域不同 | 不允许 |
http://www.a.com/a.js | 同一域名,不同二级域名(同上) | 不允许(cookie这种情况下也不允许访问) |
http://www.cnblogs.com/a.js | 不同域名 | 不允许 |
特别注意两点:
第一:如果是协议和端口造成的跨域问题“前台”是无能为力的,
第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。
“URL的首部”可以理解为“协议, 域名 和 端口 必须匹配”。
解决跨域请求的方式
(一)JSONP
情景:网站http://localhost:63342/ 页面要请求http://localhost:3000/users/userlist 页面,userlist页面返回json字符串格,如下图:
端口号为63342网站的一个页面index.html通过ajax请求url http://localhost:3000/users/userlist ,这个明显的出现了跨域请求,因为端口号不一样。请求时发生的错误如下:
解决方式,采用JSONP方式来请求
index.html
<script>
$.ajax({
url:"http://localhost:3000/users/userlist",
type:"get",
dataType:"jsonp",
success:function(e){
console.log(e);
}
});
</script>
Node.js 服务器代码
router.get("/userlist", function (req, res, next) {
var callback=req.query["callback"];
var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'};
res.write(callback+"("+ JSON.stringify(user)+")");
res.end();
});
成功请求的结果
缺点:
1、这种方式无法发送post请求
有点
1.使用比较方便
2.很多大型的网站也是采用这种方式
(二)在服务器端设置同源策略地址
router.get("/userlist", function (req, res, next) {
var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'};
res.writeHeader(200,{"Access-Control-Allow-Origin":'http://localhost:63342'});
res.write(JSON.stringify(user));
res.end();
});
在响应头上添加Access-Control-Allow-Origin属性,指定同源策略的地址。同源策略默认地址是网页的本身。
缺点
1.目前IE浏览器的老版本还不支持
(三)H5新特性postMessage
发送信息页面 http://localhost:63342/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域请求</title>
</head>
<body>
<iframe src="http://localhost:3000/users/reg" id="frm"></iframe>
<input type="button" value="OK" οnclick="run()">
</body>
</html>
<script>
function run(){
var frm=document.getElementById("frm");
frm.contentWindow.postMessage("跨域请求信息:智学无忧IT教育","http://localhost:3000");
}
</script>
接收信息页面 http://localhost:3000/message.html
window.addEventListener("message",function(e){
console.log(e.data);
},false);