浏览器同源策略和跨域请求

懵懂的女人 提交于 2020-02-04 07:12:30

浏览器同源策略

同源:如果两个页面拥有相同的协议(如http,https等),端口(80,443)和域名(www.happyjava.cn),那么这两个页面就属于同一个源。

同源策略:浏览器的一套安全机制,这些安全机制都以同源为限制条件。同源策略,隔离了不同源网站的cookie,拦截不同源的请求,只允许同源网站的脚本运行,保证了web网站的安全。

如果没有同源策略,当你打开银行网站,同时又打开了另外一个恶意网站。这时,恶意网站就有能力修改你这个网站的dom,使你后续发送的请求都发送到恶意网站的服务器上,然后恶意网站就能获取到你的cookie等信息,将会对个人的隐私财产构成巨大的威胁。

同源策略的缺点和权衡

如果严格的遵循同源策略,也会面临很多的问题。比如,图片,css,js等都得从同域名网站下去获取,个人网站,小网站这样是没问题的。但是对于用户量很大的网站,显然对服务器的压力将会很大,图片等大文件都会占用服务器的带宽。

不要安全不行,不要性能也不行。在安全和性能上的考虑,使得现代浏览器在安全性和可用性之间选择了一个平衡。所以,现在的浏览器,对于一些资源标签,都开了后门权限。比如,img script style等标签,都允许垮域引用资源,严格说这都是不符合同源要求的。

跨域请求

了解了浏览器的同源策略之后,可以接着谈谈跨域请求的问题了。因为同源策略的存在,所以跨域的AJAX都是会被浏览器拦截下来的。我们先来看一个例子:

这是一个andt-pro的页面,有个请求当前用户的方法,然后把用户信息显示在右上角。由于是前后端分离开发的,所以前端页面在http://localhost:8000上,后端接口在http://localhost:8080上,这就是不同源了。请求的结果如下:

我在后端的接口里也做了请求输出:

@GetMapping(value = "/currentUser")
public Object currentUser() {
 System.out.println("请求过来了");
 Map map = new HashMap();
 map.put("name", "Happy");
 map.put("avatar", "http://locahost:8080/head.jpg");
 return map;
}

通过上面两个结果,可以明显看出,请求是成功了的。但是,结果却被浏览器给拦截了: xxx has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource。

解决跨域问题

之前我写了【快学springboot】6.WebMvcConfigurer配置静态资源和解决跨域,在这篇文章里,我介绍了如何通过springboot的配置解决跨域问题。其实解决跨域问题有很多种方式,这里暂时不做其他探讨了。有时间会再写一篇文章来总结。

解决了跨域问题之后,刷新之前的页面:

请求成功,昵称和头像都出来了。

安全防范

现在的浏览器,在安全和性能上做了权衡,并不是严格遵循同源策略的。所以,在开发web的时候,要注意防范XSS攻击等。别被利用XSS漏洞,通过输入框,给你注入了恶意的js代码等。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!