前后端分离项目,后期前端身份验证的麻烦
软件构成
- 后端
后端是一个
asp.netcore webapi
项目,使用jwt进行身份验证和鉴权。 - 前端
前端是一个基于http协议的
asp.netcore RezorPage
项目,但实际上完全使用的
wwwwroot
目录下的静态文件。没有使用
RazorPage
。
目前只有后端接口鉴权,前端页面任意访问
身份验证需求
这两天安全要求下来了,要求给前端页面加上身份验证。只开放
login
登录页面
redirect
第三方系统跳转此系统页面。初始办法是后端登录生成token后,放到
redis
中。
- login.html
访问前端
login
登录页面,点击登录后,后端接口返回token,
login
页面将token放在
本地cookie
中。之后打开新页面时都会带上这个cookie。前端中间件中取出cookie中的token,和redis中的token比较。如果一致,则放行到下一个中间件。如果不一致,则重定向到
login
录页面,并短路请求处理管道。
- redirect.html
对于
redirect
第三方系统跳转此系统页面,则是在url中传入了一个token,前端项目验证token有效性之后放入到redis中。同时
redirect
页面也把这个token放入本地cookie。之后新标签页都会带上这个cookie。在前端项目的中间件中进行验证。
问题
对于在新标签页打开页面的形式,这种身份验证方式运行良好,没有任何问题。
但是使用cookie进行身份验证有一个问题。就是
iframe
框架限制了跨域的cookie提交。当
redirect
被嵌入其它系统时,首先,这个本地cookie被禁止写入。其次,cookie不会被放到请求中,因此一直往登录页面跳转。
我之后试了下
会话cookie
,也就是
session
。但是被查看响应信息,提示
会话cookie
同样被浏览器禁止写入。这下子就麻烦了,好多其它系统页面都使用了
iframe
嵌入这个项目的页面。如果加上前端身份验证的话,那些地方的
iframe
都会跳转到登录页面。
是否只有https才能在iframe中携带cookie,解决这个跨域问题?
最终方案
经过
@the boy、图样图森破
的提醒。我最终决定两种方案都使用。但是通过url传递,而不是header,没法给html请求设置header啊。
我这里存在一种情况,不同域名的第三方系统,
iframe
打开的页面还会有弹窗子页面,这个弹窗也是一个iframe。这种情况使用第一种方案,同时还要改造原来的iframe中的页面,把token添加到其弹窗的子页面url中。这种页面不知道有多少,多了就寄了。
我这里还有域名不同,顶级域名不同的系统,第二种方案就省心多了。