具有基于HttpOnly cookie的身份验证和会话管理的单页应用程序

Question

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

null

null

由于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

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
  }
}

GET /api/account/ HTTP/1.1
Host: localhost:4000
Connection: keep-alive
Accept: application/json
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,tr;q=0.6

• 用于身份验证和会话管理的SPA最佳实践
• HTTPOnly cookie是否通过XmlHTTPRequest以WithCredentials=true提交？
• 停止对会话使用JWT，第2部分：解决方案不起作用的原因

Answer 1

我在Vue.js2上使用credentials=true实现了这个功能。从客户端站点设置凭据只是故事的一半。您还需要从服务器设置响应标头：

    header("Access-Control-Allow-Origin: http://localhost:8080");
    header("Access-Control-Allow-Credentials: true");

不能将通配符用于Access-Control-Allow-Origin，如下所示：

header("Access-Control-Allow-Origin: *");

当您指定Credentials：true标头时，您需要指定orgin。

Vue.http.options.credentials = true

<template>
<div id="userprofile">
    <h2>User profile</h2>
    {{init()}}

</div>
</template>

<script>
    export default {  
        name: 'UserProfile',
        methods: {
        init: function() {


                // loggin in
              console.log('Attempting to login');

            this.$http.get('https://localhost/api/login.php')
            .then(resource =>  {
             // logging response - Notice I don't send any user or password for testing purposes  

            });

            // check the user profile

                console.log('Getting user profile');

                this.$http.get('https://localhost/api/userprofile.php')
                .then(resource =>  {
                    console.log(resource.data);
                })

        }
    }
    }

</script>

<?php

header("Access-Control-Allow-Origin: http://localhost:8080");
header("Access-Control-Allow-Credentials: true");

$cookie = setcookie('user', 'student', time()+3600, '/', 'localhost', false , true);

if($cookie){
  echo "Logged in";
}else{
  echo "Can't set a cookie";
}

最后，userprofile.php只验证是否设置了cookie=user

<?php

  header("Access-Control-Allow-Origin: http://localhost:8080");
    header("Access-Control-Allow-Credentials: true");


if(isset($_COOKIE['user'])){
  echo "Congratulations the user is ". $_COOKIE['user'];

}else{
  echo "Not allowed to access";
}

成功登录