安全性：Java Spring Boot + Angular 2 + JWT

Question

我正在開發一個使用Spring Boot 1.5.7作為后端和Angular 2作為前端的網站。 我是這兩種技術的新手，這是我第一次嘗試開發網站。 所以我對很多事情都有些困惑。

我已經通過JWT實現了用戶身份驗證。 當用戶通過憑據登錄時，后端會驗證它們，然后創建一個 JWT 並將其返回給前端：令牌以這種方式添加到標頭中：

Authorization - Bearer <jwt token>

在前端，我檢查該鍵是否在帖子響應中。 如果存在，我會將其與用戶名一起添加到localStorage 中。

private authUrl = 'http://localhost:8080/login';
private headers = new Headers({
    'Content-Type': 'application/json',
    'Accept': 'application/json'
});

constructor(private http: Http) { }

login(username: string, password: string): Observable<void> {
    let loginRequest = JSON.stringify({ username: username, password: password });

    return this.http.post(this.authUrl, loginRequest, { headers: this.headers })
        .map((response: Response) => {
            let token = response.headers.get('Authorization');
            // If token is not null, empty or undefined.
            if (token) {
                localStorage.setItem('jwt', JSON.stringify({ username: username, token: token }));
            }
        });
}

用戶登錄后，每次訪問受保護的資源時，都會從localStorage 中獲取token 並發送回后端進行驗證。 整件事都有效。 JWT 不受 CSRF 的影響，所以我可以在后端禁用它，

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.csrf().disable()
    ...

但我讀過（例如， 這里）使用 localStorage 時存在漏洞。

特別是 localStorage 可通過同一域上的 JavaScript 訪問，從而暴露於XSS攻擊。 為了解決這個問題，我似乎可以使用 JWT Cookie。 正如之前鏈接中所寫，我可以設置 HttpOnly cookie 標志以避免通過 JavaScript 訪問 cookie。

但是，有了 cookie，我現在很容易受到CRSF攻擊。

現在，在這里，我已經閱讀了 Angular 2+ 提供了內置的、默認啟用的、反 XSS 的內容。

所以問題是。 我應該使用 localStorage 並且只使用嵌入的 Angular 2 anti XSS 功能，或者這還不夠，然后我應該將 JWT 存儲在 cookie 上以防止 XSS 攻擊，然后在它上面使用 Spring 實現某種 CRSF 保護后端啟動配置？

謝謝

編輯：該網站是一種購物車。 用戶幾乎可以查看所有頁面，但要付費，他需要登錄。

Answer 1

Aniruddha Das 方法很好，但如果用戶刷新瀏覽器，客戶端應用程序將丟失令牌，因為 DOM 將隨着瀏覽器刷新而重新加載，並且包括令牌在內的所有內存數據都將丟失。

現在回到你的方法——

1. 本地存儲 - 使用這種方法無法進行 CSRF 攻擊，應用程序將是無狀態的，但容易受到 XSS 攻擊。 默認情況下，Angular 執行輸出編碼以防止 XSS 攻擊，但服務器端 Angular 模板仍然存在風險。 為了減輕 XSS 攻擊，如果有一些敏感信息，您可以減少令牌到期時間並對其進行加密。
2. Cookie 方法 - HTTP cookie 將減輕 XSS 攻擊，但您必須實施 CSRF 保護。 您必須使用 API 網關模式使應用程序無狀態。

這兩種方法都有優點/缺點，您必須根據您的應用程序進行選擇。 如果您的應用程序與金融領域相關，那么我建議使用基於 cookie 的方法。

Answer 2

在 angular 中，您可以保留您的令牌並在需要時使用它。 就像 angular 中的 java 中的pojo一樣，您可以使用 getter 和 setter 創建一個 angular 服務來保存令牌。 向模塊提供該服務，它將在所有component和directives可用。

當應用程序在瀏覽器中打開時，令牌將在內存中，並將存儲在瀏覽器中。

我會說使用 observable/Subject 類型變量，這樣它就會等到令牌從服務器中提取出來並使用它來做事情。