Kamran Ayub is a technologist, speaker, and Pluralsight author and specializes in building full-stack solutions with a focus on modern web technology and cloud native architecture.
There's a few ways to handle this. In both companies I worked at, we implemented multiple tiers of token levels. Meaning that what gets stored in local storage is a low-access token. If an attacker got ahold of this, they could only access low-privilige APIs, like read only methods that didn't deal with PCI data.
For higher level access, you require the user to go through an auth flow and a temporary high-access token is issued that uses a session cookie AND the PCI based pages are server-side only.
This has the benefit of still allowing a mostly SPA architecture and you can store tokens in local storage but with added security for pages that deal with personally-identifiable information (PII) or PCI data.
For a pure SPA, the session reverse proxy approach like Ben lays out is probably needed throughout. But for the apps I work on, we do a hybrid client-server. It's still React but all PCI-compliant pages are actually bundled separately and only rendered in SSR.
Other security practices like Content Security Policy, Subresource Integrity, CORS, Same Site cookies, and CSRF prevention help mitigate browser-based attacks too.
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'd recommend this series by Ben Botto on how to approach this securely.
medium.com/@benjamin.botto/secure-...
There's a few ways to handle this. In both companies I worked at, we implemented multiple tiers of token levels. Meaning that what gets stored in local storage is a low-access token. If an attacker got ahold of this, they could only access low-privilige APIs, like read only methods that didn't deal with PCI data.
For higher level access, you require the user to go through an auth flow and a temporary high-access token is issued that uses a session cookie AND the PCI based pages are server-side only.
This has the benefit of still allowing a mostly SPA architecture and you can store tokens in local storage but with added security for pages that deal with personally-identifiable information (PII) or PCI data.
For a pure SPA, the session reverse proxy approach like Ben lays out is probably needed throughout. But for the apps I work on, we do a hybrid client-server. It's still React but all PCI-compliant pages are actually bundled separately and only rendered in SSR.
Other security practices like Content Security Policy, Subresource Integrity, CORS, Same Site cookies, and CSRF prevention help mitigate browser-based attacks too.