相关疑难解决方法(0)

使用Angular,Ember,React等框架构建SPA风格的应用程序时,人们认为什么是身份验证和会话管理的最佳实践？我可以想到几种方法来考虑解决问题.

1. 假设API和UI具有相同的原始域,则与使用常规Web应用程序的身份验证没有什么不同.

   这可能涉及具有会话cookie,服务器端会话存储以及可能的一些会话API端点,经过身份验证的Web UI可以点击以获取当前用户信息以帮助个性化或甚至可能确定客户端上的角色/能力.当然,服务器仍会强制执行保护数据访问的规则,UI只会使用此信息来自定义体验.

2. 像使用公共API的任何第三方客户端一样对待它,并使用类似于OAuth的某种令牌系统进行身份验证.客户端UI将使用此令牌机制来验证对服务器API发出的每个请求.

我在这里并不是一位专家,但对于绝大多数情况来说,#1似乎已经足够了,但我真的很想听到一些更有经验的意见.

几天来,我一直在为单页面应用程序寻找安全的身份验证和会话管理机制.从有关SPA和身份验证的众多教程和博客文章来看,将JWT存储在localStorage或常规cookie中似乎是最常用的方法,但将JWT用于会话并不是一个好主意因此它不是这个应用程序的选项.

要求

• 登录应该是可以撤销的.例如,如果在用户的帐户上检测到可疑活动,则应该可以立即撤消该用户的访问权限并需要新登录.同样,密码重置等操作应撤消所有现有登录.
• 身份验证应该通过Ajax进行.之后不应该进行浏览器重定向("硬"重定向).所有导航都应该在SPA内部进行.
• 一切都应该跨域工作.SPA将在www.domain1.com上,服务器将在www.domain2.com上.
• JavaScript应该无权访问服务器发送的敏感数据,例如会话ID.这是为了防止XSS攻击,其中恶意脚本可以从常规cookie,localStorage或sessionStorage中窃取令牌或会话ID.

理想的机制似乎是使用HttpOnly包含会话ID的cookie进行基于cookie的身份验证.流程将如下工作:

1. 用户到达登录页面并提交其用户名和密码.
2. 服务器对用户进行身份验证,并将会话ID作为HttpOnly响应cookie 发送.
3. 然后,SPA在随后向服务器发出的XHR请求中包含此cookie.这似乎可以使用该withCredentials选项.
4. 当向受保护的端点发出请求时,服务器会查找cookie.如果找到,它会将该会话ID与数据库表进行交叉检查,以确保会话仍然有效.
5. 当用户注销时,会话将从数据库中删除.下次用户到达站点时,SPA会收到401/403响应(因为会话已过期),然后将用户带到登录屏幕.

因为cookie具有HttpOnly标志,JavaScript将无法读取其内容,因此只要通过HTTPS传输,它就不会受到攻击.

挑战

这是我遇到的具体问题.我的服务器配置为处理CORS请求.在对用户进行身份验证后,它会在响应中正确发送cookie:

HTTP/1.1 200 OK
server: Cowboy
date: Wed, 15 Mar 2017 22:35:46 GMT
content-length: 59
set-cookie: _myapp_key=SFMyNTYBbQAAABBn; path=/; HttpOnly
content-type: application/json; charset=utf-8
cache-control: max-age=0, private, must-revalidate
x-request-id: qi2q2rtt7mpi9u9c703tp7idmfg4qs6o
access-control-allow-origin: http://localhost:8080
access-control-expose-headers: 
access-control-allow-credentials: true
vary: Origin

但是,浏览器不保存cookie(当我检查Chrome的本地cookie时,它不存在).因此,当以下代码运行时:

context.axios.post(LOGIN_URL, creds).then(response => {
  context.$router.push("/api/account")
}

并创建帐户页面:

created() {
  this.axios.get(SERVER_URL + "/api/account/", {withCredentials: true}).then(response => {
    //do stuff
  } …