用Chrome插件实现快速登录中台系统

谁人的狮吼功
1,547 阅读3分钟

一、背景

现在的中台应用，各个系统使用同一套登录逻辑 user-center，所有与账号权限相关的代码逻辑 都需要重新logout再login 有时候创建的角色多了, 需要保存书签或者本地记住密码。而且容易混淆。比如sit uat 每个环境又对应着很多角色、角色下又绑定了权限

二、需求

将账号系统本地化, 由使用者自己创建保存, 无需人工记住密码 可一键切换账号，所以基于Chrome plugin来实现。

三、开发

设计：

kic-user-center 基于浏览器的set-cookie机制实现SSO单点登录，只需要拿到登录后的token，在特定的域名下面设置cookie的值。

当我们尝试再浏览器写入对应的cookie时：

document.cookie = "kic.auth.token=456; domain=.xxx.com; HttpOnly" // 写入失败 原因:不能通过js设置httponly=true的cookie
document.cookie = "kic.auth.token=456; domain=.xxx.com;" // 写入成功,如果已经有对应的cookie且httpOnly=true ，写入失败
document.cookie = "test=123; Domain=.baidu.com" // 写入失败,不能跨域设置 Cookie

解决方法：既然每次都要调接口去拿token，后端已经直接帮我们写入了浏览器。根本不用自己手动控制，如图:

java后台回写cookie代码逻辑

Chrome cookie机制

  1. 从一个Chrome的更新现象说起：kic-web:本地开发http://localhost:3001/login 登录后 无法携带cookie导致一直处于登录页面

chrome80后的版本,默认修改了samesite的值：

  1. Strict 仅允许一方请求携带 Cookie，即浏览器将只发送相同站点请求的 Cookie，即当前网页 URL 与请求目标 URL 完全一致。
  2. Lax 在发送同站请求的时候会带上 Cookie, 跨站会携带部分cookie,视情况而定
  3. None 无论是否跨站都会发送 Cookie

跨站的解释：

只要两个 URL 的 eTLD+1 相同即可，不需要考虑协议和端口。其中，eTLD 表示有效顶级域名，注册于 Mozilla 维护的公共后缀列表（Public Suffix List）中，例如，.com、.co、.uk、.github.io 等。而 eTLD+1 则表示，有效顶级域名+二级域名，例如taobao.com等。

举几个例子，www.taobao.com和www.baidu.com是跨站，www.a.taobao.com和www.b.taobao.com是同站，a.github.io和b.github.io是跨站(注意是跨站)

本地开发解决办法：

  1. 本地设置Chrome cookie 策略（推荐）

  1. 本地修改host文件 127.0.0.1 => xxx.shishike.com
  2. 弃用cookie 改用jwt认证方式 （后端支持，不过失去了单点登录效果，而且cookie是Java response写入的 都会写入cookie）

表现：

  1. 同环境下，不同域名(子项目)，cookie可共享 （例如：kic-web.xxx.com 与 customer-web.xxx.com）共享.xxx.com的cookie
  2. 不同环境，同一子项目，cookie无法共享（需要后端验证）（例如：kic-web.xxx.com 与 kic-web.xxx.com ） 虽然都会携带 domain = .xxx.com 的cookie 但是token会被验证是无法共用的。

存在问题以及疑惑：

  1. dev，citest 验证码 默认8888， 但是gld pre prd 环境登录验证码随机生成，与返回tag没有任何关联，如下图:

解决方法：

  1. 图片识别（tesseract.js）缺点：命中率低，需要记忆训练, 识别时间太长，可能识别出来tag已经过期。
  2. 让后端开一个免验证码登录的接口，缺点：需要人力，安全的同事可能会审核。
  3. 手工增加token，缺点：每次都会人工登录，而且token是有有效期的。
  4. 将验证码图片转canvas识别 （调研中。。。）
  1. 原型 (快速画图)

  1. Chrome插件通信机制：

项目采用content_script与弹窗的通信

坑点:

  1. 不能运行内联脚本

默认打包：

设置INLINE_RUNTIME_CHUNK=false 打包后:

 "build": "INLINE_RUNTIME_CHUNK=false node scripts/build.js",

目前已知问题：

  1. 在Mac屏幕上删除正常, 在外接屏幕上操作卡顿
  2. “切换”账号有时没有反应, 看看content_script是否加载到页面中，刷新页面可解决

参考文档:

  1. 内容安全策略(CSP): developer.mozilla.org/zh-CN/docs/…
  2. Cookie机制 www.ruanyifeng.com/blog/2019/0…
avatar
文章
阅读
粉丝