理解同源策略和解决跨域问题

1、什么是同源策略

简单来说,就是域名、协议、端口相同,即为同源。同源策略是一种浏览器安全策略,规定JavaScript能读取哪些web网站的内容,从而保护网站的数据不被其他网站读取。保护用户在使用浏览器访问网站时,B网站不能读取用户存储在A网站的数据。

2、同源策略的目的

举个简单的例子:

当我们使用浏览器去访问A网站时,如果是第一次登录需要输入账号密码,为了方便下次访问,而不需要输入账号密码,服务端会给我们返回一个凭证——cookie,当前浏览器就会将这个凭证存起来,当我们下次再用这个浏览器去访问A网站时,A网站就会先向浏览器请求一下是否有这个凭证,如果存在则不需要再次登录。

注意:cookie只存储在当前浏览器,换了浏览器之后就需要重新输入账号密码

用户小黑第一次登录A网站:

理解同源策略和解决跨域问题_第1张图片

用户小黑第二次登录A网站:(浏览器存在A网站的cookie)

理解同源策略和解决跨域问题_第2张图片

同源策略是针对浏览器的,想象一下如果没有同源策略,当用户小黑登录了A网站,再去访问B网站,B网站就可以读取A网站的cookie,再利用这个cookie伪造用户去登录A网站。

理解同源策略和解决跨域问题_第3张图片

如果B网站是一个坏人李明搭建的,那么李明就可以用B网站获取到的cookie伪造小黑的身份登录A网站,从而盗取小黑的存在A网站的信息数据,甚至通过小黑身份去搞破坏。就跟qq微信被盗骗一样

而同源策略就会去阻止这种行为,当B网站向浏览器请求A网站的cookie时,浏览器会检测B网站和A网站是否同源(域名、协议、端口相同),如果非同源,就会拒绝该请求,使B网站无法获取A网站的cookie

理解同源策略和解决跨域问题_第4张图片

3、判断是否同源

理解同源策略和解决跨域问题_第5张图片

注意:localhost和127.0.0.1虽然都指向本机,但也属于非同源

4、跨域问题

前面说到,如果非同源就无法进行数据请求,那如果A网站和B网站非同源,却偏偏要请求数据,该怎么办呢?

在前后端分离的项目中,都会出现跨域问题

前端部署在80端口,是http://1.1.1.1:80   A服务器

后端部署在81端口,是http://1.1.1.1:81   B服务器

解决跨域的问题有好几种,不过原理都很相似,采用代理的方法。

只要A和B都跟代理服务器实现了某种接口,使得A和代理服务器、B和代理服务器都不存在跨域,

那么只要A在请求B的数据时,将请求发给代理服务器,代理服务器就会将A的请求发给B,再将B返回的数据发给A,这样就解决了跨域的请求。

理解同源策略和解决跨域问题_第6张图片

 在实际应用中,跨域的解决办法会有所不同,怎么简单怎么来,哪种最安全就选哪种。

 比如使用nginx时就可以选择nginx反向代理解决跨域问题。。。

又比如vue的axios,可以选择在前端服务器配置反向代理解决跨域问题。。。

你可能感兴趣的:(前端,web安全)