Waiting rooms for SPAs (Single Page Applications)
At CrowdHandler we talk a lot about protecting URLs and pages. But many modern websites use an SPA (Single Page Application) paradigm.
If your site is using a framework like REACT, Angular, or Vue, you probably want to know: ‘can CrowdHandler protect my SPA?’
Of course, the answer is yes – and it’s an easy two-step process.
Installing a queue system to protect an SPA
First, let’s think about the way an SPA works. Instead of being made up of multiple HTML pages, like a traditional website, an SPA is a single HTML page loading a JavaScript framework. Although users may see URLs in their browser as they navigate around an SPA, the application isn’t actually going back to the server to load an entirely different page every time. Instead, it’s making various API calls, to content that may not even live on the same domain, to compose screen updates.
Step one: JavaScript integration
So if you’re looking for an online queue system to protect an SPA against excessive traffic, the first step is to use CrowdHandler’s JavaScript integration, with SPA mode enabled. This takes all of 15 minutes and will provide your first and primary layer of protection: checking user requests and redirecting users to the waiting room if necessary.
When CrowdHandler is running in SPA mode, it doesn’t look for requests to the server, it just looks for your JavaScript changing the URL in the browser; but it will react as if there has been a page request. This means you can use CrowdHandler to protect your whole site or just specific screens within your SPA – for example, to protect a single event in a ticketing application. CrowdHandler in SPA mode offers exactly the same protection and user experience as it does on a traditional website, including reacting to window location changes to keep users’ sessions alive.
Step two: Server-side / API protection
If you want to get basic waiting room protection up and running quickly on your SPA, CrowdHandler’s JavaScript integration should control the load for most use cases. However, for true security, there need to be server-side checks.
The sharper readers amongst you will have noticed that, although an SPA provides the user experience, it’s the API that really needs protection – not just from overload, but from anyone who might be savvy enough to bypass the Javascript integration and interact directly with the API.
(Take the ticketing example again: users booking a visit to the theatre can choose their seat by interacting with a seat picker map on the SPA… but the SPA is getting that information from the seat booking API, which may not even be running on the same domain name. So that API needs to be protected.)
So, step two –in addition to JavaScript integration– is to integrate CrowdHandler into your API.
This not only acts as a second layer of protection, it also sends critical performance information to CrowdHandler, so that you can make the most of features like Autotune.
With additional API integration, CrowdHandler will be able to count the sessions accessing the API, queue them, and correlate them with the queue tokens found in the SPA. In other words, if someone tries to execute an operation on the API, but does not have a valid token issued by the SPA, the request can be ignored.
There are a couple of ways to set this up, and our support article Protecting a Single Page Application (SPA) - Advanced Integration explains it in more detail. The article also includes working code and a working EdgeWorker for CloudFront, which can be modified to suit.
Peace of mind: CrowdHandler for your SPA
Protecting your SPA with CrowdHandler is easy, and you can configure everything within our control panel, just as if it were a classic website.
If you have been looking for a way to provide both a waiting room experience in your SPA, and full protection for your API, try out CrowdHandler today.
Sign up