Angular: MemoryTokenStorageService still persists refresh_token in localStorage, and concurrent tabs break refresh-token rotation #10937

2 Answer(s)

• 

  0

  maliming created 12 hours ago

  Support Team Fullstack Developer

  Hi,

  1. You can keep the refresh_token in memory too. It is then shared between tabs through the same SharedWorker as the access token. Extend MemoryTokenStorageService like this:

  import { Injectable, inject } from '@angular/core';
  import { AbpLocalStorageService } from '@abp/ng.core';
  import { MemoryTokenStorageService } from '@abp/ng.oauth';
  
  @Injectable({ providedIn: 'root' })
  export class RefreshTokenInMemoryStorageService extends MemoryTokenStorageService {
    constructor() {
      super();
      const storage = this as any;
      storage.keysShouldStoreInMemory.push('refresh_token');
      storage.port?.postMessage({ action: 'get', key: 'refresh_token' });
      inject(AbpLocalStorageService).removeItem('refresh_token');
    }
  }
  

  Then register it after provideAbpOAuth() in app.config.ts:

  import { MemoryTokenStorageService, provideAbpOAuth } from '@abp/ng.oauth';
  import { RefreshTokenInMemoryStorageService } from './refresh-token-in-memory-storage.service';
  
  providers: [
    // ...
    provideAbpOAuth(),
    { provide: MemoryTokenStorageService, useExisting: RefreshTokenInMemoryStorageService },
    // ...
  ]
  

  A few notes:

  • This is for a normal (non-SSR) Angular app.
  • If you register OAuthStorage yourself (for example with localStorage), remove that. Otherwise this class is not used.
  • The SharedWorker is created from a data: URL, so your CSP needs to allow data: in worker-src. If the worker can't start, each tab keeps its own tokens.
  • This class uses private members of MemoryTokenStorageService, so treat it as a temporary workaround.
  • The removeItem call deletes the refresh token that older builds left in localStorage.
  • The tokens are not kept after the last tab is closed, and may be lost when the only open tab is reloaded. The user then needs to click Login again. As long as the AuthServer cookie is still valid, they won't be asked for the password.

  2. Each tab runs its own refresh timer, so two tabs can send the same refresh token. If the token was already redeemed when the second request arrives, that request is rejected as a replay. We don't have a workaround that keeps the zero leeway for now. If you can accept a short reuse window, change your current zero leeway to 10 seconds in the PreConfigureServices of your AuthServer module:

  PreConfigure<OpenIddictServerBuilder>(builder =>
  {
      builder.SetRefreshTokenReuseLeeway(TimeSpan.FromSeconds(10));
  });
  

  A redeemed refresh token is then accepted again only within 10 seconds of its first redemption.

  3. We'll pass the rest to the Angular team: a supported option to keep the refresh token in memory, letting only one tab refresh at a time, the HttpOnly cookie / BFF option, and the docs for the token storage and the worker-src CSP.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  wali-092 created 7 hours ago

  Hi maliming

  Thanks for the workaround. We'll use it for now.

  For our pen-test finding (CWE-922), the cleanest fix is a cookie-based session, where no tokens are held in the browser at all. Could you tell us:

  1. Does ABP have a supported or sample backend-for-frontend (BFF) setup for an Angular SPA in a microservice solution? In this setup, an ASP.NET Core host signs in with OpenIddict, keeps the tokens server-side, gives the browser only an HttpOnly, Secure, SameSite cookie, and proxies API calls (for example with YARP) to the gateway with the access token attached.
  2. If not, is it on the roadmap, and is there a rough timeline?
  3. In the meantime, what is the recommended way to run @abp/ng.core without @abp/ng.oauth? Which services or providers should we replace so that login, logout, the 401 redirect, and /api/abp/application-configuration work with cookie auth?

  This would also solve the multi-tab refresh problem, since only the server would redeem refresh tokens, and we could keep SetRefreshTokenReuseLeeway(0).

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel