Chez CrowdHandler, nous parlons beaucoup de la protection des URL et des pages. Mais de nombreux sites web modernes utilisent le modèle SPA (Single Page Application).
Si votre site utilise un framework tel que React, Angular ou Vue, vous vous demandez sans doute : « CrowdHandler peut-il protéger mon SPA ? »
Bien sûr, la réponse est oui – et c'est très simple : il suffit de deux étapes.
Mise en place d'un système de file d'attente pour protéger un spa
Commençons par examiner le fonctionnement d’une SPA. Au lieu d’être composée de plusieurs pages HTML, comme un site web traditionnel, une SPA est une page HTML unique qui charge un framework JavaScript. Bien que les utilisateurs puissent voir des URL s’afficher dans leur navigateur lorsqu’ils naviguent dans une SPA, l’application ne retourne en réalité pas vers le serveur pour charger une page entièrement différente à chaque fois. Au lieu de cela, elle effectue divers appels d’API, vers du contenu qui ne se trouve peut-être même pas sur le même domaine, afin de composer les mises à jour de l’écran.
Première étape : intégration de JavaScript
Si vous recherchez donc un système de file d'attente en ligne pour protéger une application SPA contre un trafic excessif, la première étape consiste à utiliser l'intégration JavaScript de CrowdHandler, en activant le mode SPA. Cela ne vous prendra que 15 minutes et vous offrira votre première et principale couche de protection : la vérification des requêtes des utilisateurs et leur redirection vers la salle d'attente si nécessaire.
Lorsque CrowdHandler fonctionne en mode SPA, il ne détecte pas les requêtes adressées au serveur, mais se contente de repérer les modifications de l’URL dans le navigateur provoquées par votre code JavaScript ; il réagit toutefois comme s’il s’agissait d’une requête de page. Cela signifie que vous pouvez utiliser CrowdHandler pour protéger l’ensemble de votre site ou uniquement certains écrans spécifiques de votre SPA – par exemple, pour protéger un événement unique dans une application de billetterie. En mode SPA, CrowdHandler offre exactement la même protection et la même expérience utilisateur que sur un site web traditionnel, y compris la gestion des changements de position de la fenêtre pour maintenir les sessions des utilisateurs actives.
Deuxième étape : Protection côté serveur / API
Si vous souhaitez mettre rapidement en place une protection de base pour votre salle d’attente sur votre SPA, l’intégration JavaScript de CrowdHandler devrait permettre de gérer la charge dans la plupart des cas d’utilisation. Toutefois, pour garantir une sécurité optimale, des contrôles côté serveur sont nécessaires.
Les plus perspicaces d'entre vous auront remarqué que, bien que ce soit le SPA qui offre l'expérience utilisateur, c'est l'API qui a réellement besoin d'être protégée – non seulement contre la surcharge, mais aussi contre toute personne suffisamment avertie pour contourner l'intégration JavaScript et interagir directement avec l'API.
(Reprenons l’exemple de la billetterie : les utilisateurs qui réservent une place au théâtre peuvent choisir leur siège en interagissant avec une carte de sélection des places sur la SPA… mais celle-ci récupère ces informations auprès de l’API de réservation des places, qui ne fonctionne peut-être même pas sur le même nom de domaine. Cette API doit donc être protégée.)
La deuxième étape consiste donc – outre l'intégration de JavaScript – à intégrer CrowdHandler à votre API.
Non seulement cela constitue un deuxième niveau de protection, mais cela transmet également des informations essentielles sur les performances à CrowdHandler, ce qui vous permet de tirer pleinement parti de fonctionnalités telles qu’Autotune.
Grâce à une intégration supplémentaire de l'API, CrowdHandler sera en mesure de compter les sessions accédant à l'API, de les mettre en file d'attente et de les mettre en correspondance avec les jetons de file d'attente présents dans l'application SPA. En d'autres termes, si un utilisateur tente d'effectuer une opération sur l'API sans disposer d'un jeton valide émis par l'application SPA, la requête pourra être ignorée.
Il existe plusieurs façons de configurer cela, et notre article d'assistance intitulé « Protection d'une application monopage (SPA) - Intégration avancée » l'explique plus en détail. Cet article comprend également du code fonctionnel et un EdgeWorker opérationnel pour CloudFront, qui peuvent être modifiés selon vos besoins.
Tranquillité d'esprit : CrowdHandler pour votre SPA
Protéger votre SPA avec CrowdHandler est très simple : vous pouvez tout configurer depuis notre panneau de contrôle, exactement comme s'il s'agissait d'un site web classique.
Si vous cherchez un moyen d'offrir à la fois une expérience agréable dans la salle d'attente de votre spa et une protection totale de votre API, essayez CrowdHandler dès aujourd'hui.