CyberSafeÉtude de cas — écosystème abrt

Le contexte

CyberSafe est un site informatif rédigé entièrement en anglais autour de la cybersécurité. Il a été pensé comme une ressource de sensibilisation : expliquer simplement les menaces courantes et les bons réflexes à adopter pour se protéger en ligne. Il s'inscrit dans mon écosystème personnel abrt et partage son design et son authentification.

Comment c'est fait

CyberSafe est une application monopage (SPA) : une seule page HTML, une navigation latérale, et du JavaScript pur pour basculer entre les sections sans rechargement. Pas de framework — uniquement HTML, CSS et JavaScript, sur le design « console » maison de l'écosystème.

• Threats — 6 menaces courantes (phishing, ransomware, mots de passe…)
• Protections — 6 bonnes pratiques de défense
• Rules & Guidelines — 3 catégories de règles (Must / Must not / Should)
• Quiz — 20 questions interactives en JavaScript pur, avec classement
• Glossary (15 termes) et Resources (8 liens externes)

Difficultés rencontrées et solutions

• Un classement facile à truquer. Le quiz envoie son score au serveur. Une première version acceptait un total libre : {score:1,total:1} donnait 100 %. Le serveur exige désormais le nombre exact de questions (20), rejette les scores incohérents, recalcule le pourcentage lui-même et plafonne le corps de la requête.
• Limiter les abus. Les enregistrements au classement sont limités par adresse IP (30 par heure et 100 par jour), avec des compteurs distincts de ceux de la connexion pour ne pas se gêner.
• Respecter la vie privée sur un site qui en parle. Les vignettes des vidéos étaient chargées depuis YouTube, ce qui transmettait l'adresse IP du visiteur à Google dès l'ouverture. Elles ont été remplacées par un visuel local : le lien n'est suivi qu'au clic.
• Droits minimaux en base. Le compte applicatif n'a plus le droit de créer des tables : le code qui créait la table du classement à la volée a été retiré, la table étant créée une fois pour toutes.
• Du style dispersé. Environ 130 lignes de CSS écrites dans la page ont été déplacées dans une feuille dédiée, après vérification sélecteur par sélecteur qu'aucune règle n'était perdue.

Résultats

• Un quiz complet de 20 questions avec correction détaillée à la fin et classement des 10 meilleurs scores.
• Du contenu varié 6 menaces, 6 protections, 15 termes de glossaire, 8 ressources et 4 vidéos sélectionnées.

Compétences BTS SIO mobilisées

Ce projet s'inscrit dans plusieurs compétences du référentiel BTS SIO, option SISR :

• Bloc 1 Développer la présence en ligne de l'organisation
• Bloc 1 Mettre à disposition des utilisateurs un service informatique
• Bloc 3 Cybersécurité — sensibilisation et bonnes pratiques
• Transverse Travailler en mode projet · communiquer en anglais

Pour aller plus loin

Voir aussi

D'autres études de cas de l'écosystème, proches de celle-ci :