Introduction:

We’ll explore a solution to mitigate XSS attacks in Single Page Application. It’s particularly important in a micro services architecture with multiple APIs on the backend side.

If Open Id Connect is used then those APIs require an access token to serve the resources

to the SPA. This access token is a critical elements which has to be highly protected.

Open Id Connect:

Open Id Connect version 1(OIDC) is authentication layer on top of OAuth2 protocol.

It’s frequently used for single sign on purpose. Who didn’t use his facebook or google identity to create an account for a game or e-commerce website? OIDC is the mechanism behind the scene.

I recommend to have a good knowledge about OIDC and OAuth2 to read this page, that will avoid some confusions.

You can find here the specification.

SPA and XSS:

It’s obviously not a scoop front-end technologies like React, Angular, Vue Js, etc... are widespread.

And all of them apply the same principle by executing the code on the user agent side (i.e. the browser).

An application based on this concept is commonly named a single page application (SPA).

OIDC is quite often used as the sign-in method to an SPA, in this context the application delegates to an Identity Provider (IDP) the identity verification. If the user is granted the IDP returns an id and an access token (in Json Web Token format). The SPA stores the tokens in the browser cache.

SPA provides a great user experience, however, it’s more exposed to the Cross-Site Scripting (XSS) Attacks.

XSS is about to inject malicious code. An SPA is particularly sensitive to this treat, because of the complex frameworks, third party libraries and SPA’s program on top of that.

A malicious script can steal the access token from the browser cache. This type of token allows the access of the backend resources and we easily imagine how that can be dramatic: