HTML5 Web 应用程序中 OAuth2 的 Localstorage 与 cookie

Question

我目前正在尝试使用 OAuth2 开发一个完全用 JavaScript 构建的移动应用程序，该应用程序与 CakePHP API 对话。查看以下代码以查看我的应用程序当前的外观 （请注意，这是一个实验，因此代码混乱，区域结构缺乏等。）

 var access_token,
     refresh_token;

var App = {
    init: function() {
        $(document).ready(function(){
            Users.checkAuthenticated();
        });
    }(),
    splash: function() {
        var contentLogin = '<input id="Username" type="text"> <input id="Password" type="password"> <button id="login">Log in</button>';
        $('#app').html(contentLogin);
    },
    home: function() {
        var contentHome = '<h1>Welcome</h1> <a id="logout">Log out</a>';
        $('#app').html(contentHome);
    }
};

var Users = {
    init: function(){
        $(document).ready(function() {
            $('#login').live('click', function(e){
                e.preventDefault();
                Users.login();
            });
            $('#logout').live('click', function(e){
                e.preventDefault();
                Users.logout();
            });
        });
    }(),
    checkAuthenticated: function() {
        access_token = window.localStorage.getItem('access_token');
        if( access_token == null ) {
            App.splash();
        }
        else {
            Users.checkTokenValid(access_token);
        }
    },
    checkTokenValid: function(access_token){

        $.ajax({
            type: 'GET',
            url: 'http://domain.example/api/oauth/userinfo',
            data: {
                access_token: access_token
            },
            dataType: 'jsonp',
            success: function(data) {
                console.log('success');
                if( data.error ) {
                    refresh_token = window.localStorage.getItem('refresh_token');
                     if( refresh_token == null ) {
                         App.splash();
                     } else {
                         Users.refreshToken(refresh_token);
                    }
                } else {
                    App.home();
                }
            },
            error: function(a,b,c) {
                console.log('error');
                console.log(a,b,c);
                refresh_token = window.localStorage.getItem('refresh_token');
                 if( refresh_token == null ) {
                     App.splash();
                 } else {
                     Users.refreshToken(refresh_token);
                }
            }
        });

    },
    refreshToken: function(refreshToken){

        $.ajax({
            type: 'GET',
            url: 'http://domain.example/api/oauth/token',
            data: {
                grant_type: 'refresh_token',
                refresh_token: refreshToken,
                client_id: 'NTEzN2FjNzZlYzU4ZGM2'
            },
            dataType: 'jsonp',
            success: function(data) {
                if( data.error ) {
                    alert(data.error);
                } else {
                    window.localStorage.setItem('access_token', data.access_token);
                    window.localStorage.setItem('refresh_token', data.refresh_token);
                    access_token = window.localStorage.getItem('access_token');
                    refresh_token = window.localStorage.getItem('refresh_token');
                    App.home();
                }
            },
            error: function(a,b,c) {
                console.log(a,b,c);
            }
        });

    },
    login: function() {
        $.ajax({
            type: 'GET',
            url: 'http://domain.example/api/oauth/token',
            data: {
                grant_type: 'password',
                username: $('#Username').val(),
                password: $('#Password').val(),
                client_id: 'NTEzN2FjNzZlYzU4ZGM2'
            },
            dataType: 'jsonp',
            success: function(data) {
                if( data.error ) {
                    alert(data.error);
                } else {
                    window.localStorage.setItem('access_token', data.access_token);
                    window.localStorage.setItem('refresh_token', data.refresh_token);
                    access_token = window.localStorage.getItem('access_token');
                    refresh_token = window.localStorage.getItem('refresh_token');
                    App.home();
                }
            },
            error: function(a,b,c) {
                console.log(a,b,c);
            }
        });
    },
    logout: function() {
        localStorage.removeItem('access_token');
        localStorage.removeItem('refresh_token');
        access_token = window.localStorage.getItem('access_token');
        refresh_token = window.localStorage.getItem('refresh_token');
        App.splash();
    }
};

我有一些关于我的 OAuth 实施的问题：

1. 显然将 access_token 存储在 localStorage 中是不好的做法，我应该改用 cookie。谁能解释为什么？据我所知，这不再安全或不太安全，因为 cookie 数据不会被加密。

根据这个问题： Local Storage vs Cookies storing the data in localStorage is ONLY available on the client-side anyways and does not do any HTTP request 不像 cookies，所以对我来说似乎更安全，或者至少似乎没有任何据我所知的问题！**

1. 关于问题 1，使用 cookie 过期时间，对我来说同样毫无意义，就像你看代码一样，在应用程序启动时发出请求以获取用户信息，如果过期则会返回错误在服务器端，并需要一个 refresh_token。所以不确定在客户端和服务器上都有到期时间的好处，而服务器端才是真正重要的。

2. 我如何获得刷新令牌，没有 A，将其与原始 access_token 一起存储以备后用，以及 B) 还存储 client_id？我被告知这是一个安全问题，但我以后如何使用这些，但在仅限 JS 的应用程序中保护它们？再次查看上面的代码，了解到目前为止我是如何实现的。

原文由 Cameron 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看起来您正在使用 资源所有者密码凭证 OAuth 2.0 流程，例如提交用户名/密码以取回访问令牌和刷新令牌。

• 访问令牌 可以在 JavaScript 中公开，访问令牌以某种方式被公开的风险因其较短的生命周期而得到缓解。
• 刷新令牌 不应暴露给客户端 JavaScript。它用于获取更多访问令牌（正如您在上面所做的那样），但如果攻击者能够获取刷新令牌，他们将能够随意获取更多访问令牌，直到 OAuth 服务器撤销对为其颁发 刷新令牌的 客户端。

考虑到这一背景，让我回答您的问题：

1. cookie 或 localstorage 将在页面刷新时为您提供本地持久性。将访问令牌存储在本地存储中可以为您提供更多保护以防止 CSRF 攻击，因为它不会像 cookie 那样自动发送到服务器。您的客户端 JavaScript 需要将其从 localstorage 中提取出来，并在每次请求时传输它。我正在开发 OAuth 2 应用程序，因为它是单页方法，所以我什么都不做；相反，我只是将它保存在内存中。
2. 我同意…如果您存储在 cookie 中只是为了持久性而不是为了过期，服务器将在令牌过期时响应错误。我认为您可能会创建一个过期 cookie 的唯一原因是您可以检测它是否已过期，而无需先发出请求并等待错误响应。当然，您可以通过保存已知的到期时间来对本地存储做同样的事情。
3. 这是我认为的整个问题的症结所在……“我如何获得刷新令牌，没有 A，将其与原始 access_token 一起存储以备后用，B) 还存储一个 client_id”。不幸的是，您真的不能…正如该介绍性评论中所述，拥有 刷新令牌 客户端会否定 访问令牌 的有限生命周期提供的安全性。我在我的应用程序中所做的（我没有使用任何持久的服务器端会话状态）如下：

• 用户向服务器提交用户名和密码
• 然后， 服务器 将用户名和密码转发到 OAuth 端点，在您上面的示例中 http://domain.example/api/oauth/token ，并接收 访问令牌和刷新令牌。
• 服务器加密 刷新令牌 并将其设置在 cookie 中（应该是 HTTP Only）
• 服务器 仅以明文形式（在 JSON 响应中）和加密的 HTTP only cookie 响应访问令牌
• 客户端 JavaScript 现在可以读取和使用访问令牌（存储在本地存储或其他任何地方
• 当访问令牌过期时，客户端向服务器（不是 OAuth 服务器，而是托管应用程序的服务器）提交请求以获取新令牌
• 服务器接收它创建的加密的 HTTP only cookie，对其进行解密以获取 刷新令牌，请求新的访问令牌并最终在响应中返回新的 访问令牌。

不可否认，这确实违反了您正在寻找的“仅限 JS”约束。但是，a）你真的不应该在 JavaScript 中使用刷新令牌，b）它在登录/注销时需要非常少的服务器端逻辑，并且不需要持久的服务器端存储。

关于 CSRF 的注意事项：如评论中所述，此解决方案未解决 跨站点请求伪造问题；请参阅 OWASP CSRF Prevention Cheat Sheet 以获取有关解决这些形式攻击的更多想法。

另一种选择是根本不请求刷新令牌（不确定这是否是您正在处理的 OAuth 2 实现的一个选项；刷新令牌 根据规范 是可选的）并在其过期时不断重新验证。

原文由 jandersen 发布，翻译遵循 CC BY-SA 4.0 许可协议