同源策略以及应用

2022-01-19  本文已影响0人  扶得一人醉如苏沐晨

同源策略

含义

1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

协议相同

域名相同

端口相同

举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下。

http://www.example.com/dir2/other.html:同源

http://example.com/dir/other.html:不同源(域名不同)

http://v2.www.example.com/dir/other.html:不同源(域名不同)

http://www.example.com:81/dir/other.html:不同源(端口不同)

1.2 目的

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?

很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。

由此可见,"同源政策"是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

1.3 限制范围

随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。

(1)Cookie、LocalStorage 和 IndexDB 无法读取。

(2) DOM无法获得。

(3)AJAX 请求不能发送。

虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响。

1.4 localStorage.clear()的限制

当两个网站符合同源策略,使用localStorage.clear()会将两个页面的localStorage全部清掉

解决办法:localStorage.setItem(“别名”)清除的时候localStorage.removeItem(“别名”)

1.5 ticket失效,再次登陆token无法替换

1、当ticket失效以后

2、needLogin=true,重新登陆,将缓存清除

3、进入判断逻辑

4、重新请求getUserInfoByTicketTmp()方法

5、在这个方法里重新通过getSearchString()获取令牌

6、如果用户信息和token为空

7、调用getUserInfoByTicket()方法

8、将用户信息存储到localStorage

9、获取用户信息,然后重新将App挂载到Vue

原因:失效以后,没有重新获取ticket,请求token,(登陆之后没有将缓存清除,导致调用获取ticket和token的方法进不去)

解决:登陆请求,如果需要needLogin,把浏览器缓存通过localStorage.removeItem(“别名”)清除指定缓存

1.6实施步骤

补充

Location hash 属性

定义和用法

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。

语法

location.hash

获取ticket


拿到ticket去获取userInfo和token并且存到localStorage

如果没有用户信息重新调用异步函数getUserInfoByTicket()获取信息并存储

重新将App挂载到Vue上


判断是否是登陆状态或者无权限

如果是的话将sessionStorage清除,清除指定localStorage.remove(“别名”)

// 如果localStorage为空,且有ticket,重新调用getUserInfoByTicketTmp()

上一篇 下一篇

猜你喜欢

热点阅读