We have been tasked with implementing a dashboard containing multiple widgets. The dashboard itself and all widgets need to access various secured APIs. Our authorisation protocol is OpenID.
Currently, the dashboard requests an access_token
with all scope
s required by all widgets. Widgets use this shared access_token
to make requests to secure APIs.
The problem is, because this shared access_token
has so many scopes, it is too "powerful". We are concerned that by using this shared token, widgets and APIs may have more rights than they are entitled to. Ideally we'd like that every widget has a separate access_token
with its own scope
.
I'm not sure how to achieve this. If every widget requests its own access_token
, then the user will be redirected to authorisation endpoint multiple times. This is unacceptable for UX reasons.
We have considered wrapping widgets in iframe
s. So each widget can redirect inside of its own frame without affecting the dashboard. However, because they all run on the same domain, they can always access access_token
s of other widgets (because they are stored in LocalStorage
), so I'm not sure this is better from a security perspective.
How can we architecture the authorisation system in a dashboard so that all widgets have their own access_token
s?