本文已参与[新人创作礼]活动,一起开启掘金创作之路。
一、问题背景
最近在项目上做一个退出功能,退出之后要回到一个嵌套的二维码登录页面(由于不能放二维码)
在项目中搜索不到这个页面,于是多方打听下,发现这个页面是由网关监控弹出来出来的,而现在的功能就是我需要点击退出按钮,使其再次弹出这个页面
二、问题复现
好的,那么问题来了,依照以前代码的逻辑,我只需要路由跳转到登录页面即可,但是这个嵌套的是监控在项目中的,于是开始研究监控触发的条件,经过一系列控制变量法、勾股定理、代码分析之后,我通过登录之前和之后的对比,将依据锁定在了cookies登录前后的值上,皇天不负有心人,终于在那么多的cookies中发现了一个与众不同的
就是这个SSO-PDID。在我手动删除掉这个值刷新页面之后,达到了预期效果,嵌套的网关页面出来啦!
三、解决办法
找到问题就简单了,由于是VUE项目,引用js-cookie 或者 vue-cookies 使用remove('SSO-PDID')方法不就行了,
1.引入 vue-cookies
import cookies from "vue-cookies";
2.清除cookies.remove('SSO-PDID')
cookies.remove('SSO-PDID')
3.下班
ok,本地自测完,搞定下班
4.然而终究还是被cookies拖住了下班的脚步
奇怪,明明本地测完了,怎么环境上还是不行,睁开我的火眼金睛,发现这个SSO-PDID 有了httpOnly属性,在掘金上翻了一下cookies的信息
httpOnly | 如果给某个 cookie 设置了 httpOnly 属性,则无法通过 JS 脚本 读取到该 cookie 的信息,但还是能通过 Application 中手动修改 cookie,所以只是在一定程度上可以防止 XSS 攻击,不是绝对的安全 |
---|
原来后端配置了这个属性,蛋疼,于是控制台调试,发现果然如这个httpOnly所言,不仅改不了,而且都不能读取得到。没有办法,只能调用后端接口,让后端清除了。
4.再次下班
ok,交给后端,我下班
5.“调用了这个接口,后端有事不在回家了,你再想想办法,明天要上线,紧急需求。。。”
然后终究还是被拦在了公司门口。 然后发现确实调用了一个logout的接口,这个接口也确实返回了ok,cookies的值也确实没有清掉,麻了
6.开始继续调试
怎么会清不掉咧?网关就是判断这个字段啊?它确实加了httpOnly这个属性啊,我前端我有什么办法?
继续调用cookies的三个方法remove()、set()、get(),居然在测试环境凑巧回到了网关登陆页面
终于,发现了一个漏洞
漏洞
cookies.set('SSO-PDID','',-1) //设置过期 这里我是想修改,结果变成了增加
然后再看浏览器cookies
卧槽?两个SSO-PDID ?卧槽?真的有用?
7.下班下班
刚走到门口,又拉回来了 “你这个确实实现了退出到登录页面,但是只能搞一次啊!我再登录,它又退出不了了!”
8.小问题小问题
再次打打开控制台cookies页面,果然第二次退出的时候那个空的SSO-PDID 掉到了有值的那个下面。 卧槽?这也可以的嘛,这么不想让我下班
想了下cookies的机制又想了下httpOnly这个属性
咦?网关的SSO-PDID删不掉,我自己加的那个讲道理是可以删除修改的呀 继续调用cookies的三个方法remove()、set()、get(),我的可以删掉欸,按照这个新加cookies放在前面的排队机制
我先删除掉我自己加的,再添加
cookies.remove('SSO-PDID') //清除过期
cookies.set('SSO-PDID','',-1)//这里我就是想增加一个新的
果然这个空的又放到了前面
完美
9.终于下班 及 后续
原来是接口调错了,和后端协调之后给出了正确的接口