Isolamento dell'API per più applicazioni a pagina singola con lo stesso dominio

Ho un caso in cui voglio eseguire più applicazioni a singola pagina sullo stesso dominio. Queste app dovrebbero avere accesso a un set specifico di API.

Esempio:

• myapp.example/profile : ospita l'app profilo
• myapp.example/api/profile : restituisce il profilo utente
• myapp.example/playground : ospita l'app del parco giochi
• myapp.example/api/playground/user_data : API generica per il parco giochi per memorizzare alcuni dati.

Non voglio che la SPA in esecuzione sotto il parco giochi sia in grado di accedere all'API del profilo.

Il mio problema attuale è: come posso passare un token / segreto / .. all'app /profile a cui non è possibile accedere l'app /playground , specialmente quando voglio mantenere l'utente loggato (es. cookie, localstorage, ...). Non sono riuscito a trovare alcuna tecnica / schema di autorizzazione che lo supporti correttamente.

La tecnica che sto attualmente sperimentando è:

• quando l'app /profile viene riavviata, allegare un'intestazione set-cookie: token=JWT;Path=/profile in cui il JWT contiene una sorta di informazioni sull'ambito dell'API (ad esempio profile-scope ) e l'ID utente corrente. L'invio del token in un cookie dovrebbe renderlo invisibile per altri percorsi.
• In base alle specifiche XHR, l'intestazione set-cookie potrebbe non essere mai esposta direttamente agli XHR
• Quando l'applicazione viene inizializzata, leggi il token tramite document.cookie
• Quando l'applicazione effettua una richiesta, collega il token in un'intestazione HTTP (oltre alle informazioni di autenticazione tramite cookie / intestazione)
• Sul lato server API, controlla se il token inviato nell'intestazione contiene l'ambito profile-scope richiesto per accedere a questa API

Finora non riuscivo a ottenere l'accesso al token tramite richieste da /playground - funziona o mi manca qualcosa? Esistono tecniche consolidate per questo tipo di problema?