将 JWT 令牌存储到 HttpOnly cookie 中

Question

我读过一些文章，本地存储不是存储 JWT 令牌的首选方式，因为它不适合用于会话存储，因为您可以通过 JavaScript 代码轻松访问它，如果存在易受攻击的第三方，这可能会导致 XSS 本身-派对图书馆什么的。

从这些文章总结，正确的方法是使用 HttpOnly cookies 而不是本地存储来存储会话/敏感信息。

问题1

我找到了一项 cookie 服务，就像我当前用于本地存储的服务一样。我不清楚的是expires=Thu, 1 Jan 1990 12:00:00 UTC; path=/；`。它真的必须在某个时候过期吗？我只需要存储我的 JWT 和刷新令牌。全部信息都在那里。

import { Injectable } from '@angular/core';

/**
 * Handles all business logic relating to setting and getting local storage items.
 */
@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {
  setItem(key: string, value: any): void {
    localStorage.setItem(key, JSON.stringify(value));
  }

  getItem<T>(key: string): T | null {
    const item: string | null = localStorage.getItem(key);
    return item !== null ? (JSON.parse(item) as T) : null;
  }

  removeItem(key: string): void {
    localStorage.removeItem(key);
  }
}

import { Inject, Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
  })
export class AppCookieService {
    private cookieStore = {};

    constructor() {
        this.parseCookies(document.cookie);
    }

    public parseCookies(cookies = document.cookie) {
        this.cookieStore = {};
        if (!!cookies === false) { return; }
        const cookiesArr = cookies.split(';');
        for (const cookie of cookiesArr) {
            const cookieArr = cookie.split('=');
            this.cookieStore[cookieArr[0].trim()] = cookieArr[1];
        }
    }

    get(key: string) {
        this.parseCookies();
        return !!this.cookieStore[key] ? this.cookieStore[key] : null;
    }

    remove(key: string) {
      document.cookie = `${key} = ; expires=Thu, 1 jan 1990 12:00:00 UTC; path=/`;
    }

    set(key: string, value: string) {
        document.cookie = key + '=' + (value || '');
    }
}

问题2

看看注销功能signOut()。在后端撤销JWT token（向后端追加订阅）不是更好的做法吗？

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { map, Observable, of } from 'rxjs';

import { JwtHelperService } from '@auth0/angular-jwt';
import { environment } from '@env';
import { LocalStorageService } from '@core/services';
import { AuthResponse, User } from '@core/types';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private readonly ACTION_URL = `${environment.apiUrl}/Accounts/token`;

  private jwtHelperService: JwtHelperService;

  get userInfo(): User | null {
    const accessToken = this.getAccessToken();
    return accessToken ? this.jwtHelperService.decodeToken(accessToken) : null;
  }

  constructor(
    private httpClient: HttpClient,
    private router: Router,
    private localStorageService: LocalStorageService
  ) {
    this.jwtHelperService = new JwtHelperService();
  }

  signIn(credentials: { username: string; password: string }): Observable<AuthResponse> {
    return this.httpClient.post<AuthResponse>(`${this.ACTION_URL}/create`, credentials).pipe(
      map((response: AuthResponse) => {
        this.setUser(response);
        return response;
      })
    );
  }

  refreshToken(): Observable<AuthResponse | null> {
    const refreshToken = this.getRefreshToken();
    if (!refreshToken) {
      this.clearUser();
      return of(null);
    }

    return this.httpClient.post<AuthResponse>(`${this.ACTION_URL}/refresh`, { refreshToken }).pipe(
      map((response) => {
        this.setUser(response);
        return response;
      })
    );
  }

  signOut(): void {
    this.clearUser();
    this.router.navigate(['/auth']);
  }

  getAccessToken(): string | null {
    return this.localStorageService.getItem('accessToken');
  }

  getRefreshToken(): string | null {
    return this.localStorageService.getItem('refreshToken');
  }

  hasAccessTokenExpired(token: string): boolean {
    return this.jwtHelperService.isTokenExpired(token);
  }

  isSignedIn(): boolean {
    return this.getAccessToken() ? true : false;
  }

  private setUser(response: AuthResponse): void {
    this.localStorageService.setItem('accessToken', response.accessToken);
    this.localStorageService.setItem('refreshToken', response.refreshToken);
  }

  private clearUser() {
    this.localStorageService.removeItem('accessToken');
    this.localStorageService.removeItem('refreshToken');
  }
}

问题3

我的后端是 ASP.NET Core 5，我使用的是 IdentityServer4。我不确定是否必须让后端验证 cookie 或者它是如何工作的？

import { Injectable } from '@angular/core';

/**
 * Handles all business logic relating to setting and getting local storage items.
 */
@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {
  setItem(key: string, value: any): void {
    localStorage.setItem(key, JSON.stringify(value));
  }

  getItem<T>(key: string): T | null {
    const item: string | null = localStorage.getItem(key);
    return item !== null ? (JSON.parse(item) as T) : null;
  }

  removeItem(key: string): void {
    localStorage.removeItem(key);
  }
}

Answer 1

1. 您希望后端使用刷新令牌设置 HttpOnly cookie。因此，您将有一个 POST 端点，您可以在其中发布用户凭据，并且此端点在 HttpOnly cookie 中返回刷新令牌，并且 accessToken 可以作为常规 JSON 属性在请求正文中返回。以下是如何设置 cookie 作为响应的示例：

       var cookieOptions = new CookieOptions
       {
           HttpOnly = true,
           Expires = DateTime.UtcNow.AddDays(7),
           SameSite = SameSiteMode.None,
           Secure = true
       };
       Response.Cookies.Append("refreshToken", token, cookieOptions);
   

2. 一旦您拥有带有刷新令牌的 HttpCookie，您就可以将其传递到专用 API 端点以轮换访问令牌。该端点实际上还可以轮换刷新令牌，作为安全最佳实践。以下是检查请求中是否有 HttpCookie 的方法：

       var refreshToken = Request.Cookies["refreshToken"];
       if (string.IsNullOrEmpty(refreshToken))
       {
           return BadRequest(new { Message = "Invalid token" });
       }
   

3. 您的访问令牌应该是短暂的，例如 15-20 分钟。这意味着您希望在过期前不久主动轮换它，以确保经过身份验证的用户不会被注销。您可以使用JavaScript 中的setInterval函数来构建此刷新功能。

4. 您的刷新令牌的寿命可以更长，但它不应该不会过期。此外，如第 2 点所述，在访问令牌刷新时轮换刷新令牌确实是个好主意。

5. 您的访问令牌不需要存储在本地/会话存储或 cookie 等任何地方。您可以简单地将其保留在某些 SPA 服务中，只要不重新加载单个页面，该服务就会一直存在。如果用户重新加载它，您只需在初始加载期间轮换令牌（记住 HttpOnly cookie 粘在您的域上，并且可以作为资源供您的浏览器使用），一旦您拥有访问令牌，您可以将其放入每个后端请求的授权标头中。

6. 您需要将发布的刷新令牌保留在某处（关系数据库或键值存储），以便能够验证它们、跟踪过期情况并在需要时撤销。