Projet : Dashboard Cybersécurité
Application Web (HTML – CSS – JavaScript)
Sujet / Cahier des charges
Nom :
Classe / Filière :
Encadrant :
Année académique :
2 février 2026
Projet : Dashboard Cybersécurité Application Web
Table des matières
1 Introduction 2
2 Contexte du projet 2
3 Problématique 2
4 Objectifs du projet 2
4.1 Objectif général . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
4.2 Objectifs spécifiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
5 Périmètre et contraintes techniques 3
5.1 Périmètre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
5.2 Contraintes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
6 Fonctionnalités attendues 3
6.1 Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
6.2 Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
7 Livrables 4
8 Critères d’évaluation 4
9 Conclusion 5
1
Projet : Dashboard Cybersécurité Application Web
1 Introduction
La cybersécurité occupe aujourd’hui une place essentielle dans la protection des systèmes
d’information. Les entreprises doivent surveiller en continu leurs infrastructures afin de
détecter rapidement les attaques, limiter les impacts et assurer la continuité des services.
Dans ce contexte, le Centre Opérationnel de Sécurité (SOC : Security Operations Center)
collecte un volume important de données provenant de plusieurs outils (SIEM, EDR,
IDS/IPS, WAF, journaux systèmes, services cloud, etc.). Les analystes SOC ont besoin
d’un outil permettant de visualiser et analyser ces informations de manière synthétique.
Ce projet consiste à développer une application web de type Dashboard Cybersécu-
rité, permettant d’afficher des indicateurs de sécurité, des graphiques et des tableaux
d’incidents afin d’aider à la prise de décision.
2 Contexte du projet
Dans un environnement réel, les événements de sécurité sont générés par :
— les solutions SIEM (Security Information and Event Management) ;
— les solutions EDR/XDR (Endpoint Detection and Response) ;
— les pare-feux, WAF, IDS/IPS ;
— les logs systèmes et applicatifs ;
— les services cloud (AWS CloudTrail, Azure Monitor, etc.).
Ces données sont nombreuses, hétérogènes et parfois difficiles à interpréter rapidement.
Le dashboard doit donc fournir une vue centralisée avec des informations exploitables :
alertes, incidents, vulnérabilités, tendances et priorités.
3 Problématique
Comment concevoir une application web simple et interactive permettant de :
— centraliser des données de cybersécurité ;
— analyser l’état de la sécurité d’un système ;
— faciliter le suivi des incidents et la priorisation des actions ?
4 Objectifs du projet
4.1 Objectif général
Réaliser une application web (front-end) de type dashboard cybersécurité permettant
d’afficher et d’analyser des données de sécurité (simulées ou réelles) afin d’aider un analyste
SOC à surveiller l’état de la sécurité.
2
Projet : Dashboard Cybersécurité Application Web
4.2 Objectifs spécifiques
L’application devra permettre de :
— afficher des indicateurs clés (KPI) :
— nombre total d’alertes filtrées,
— nombre d’incidents ouverts,
— MTTA (Mean Time To Acknowledge),
— MTTR (Mean Time To Resolve).
— visualiser la répartition des alertes par sévérité (Critique, Élevée, Moyenne,
Faible) ;
— visualiser la tendance des alertes selon une période (24h, 7 jours, 30 jours) ;
— afficher une liste/tableau des incidents (horodatage, sévérité, titre, asset, MITRE,
statut) ;
— afficher une liste/tableau des vulnérabilités (CVE, CVSS, produit, asset, âge,
état) ;
— afficher les assets les plus touchés ;
— afficher un flux d’événements (feed) récent ;
— permettre un filtrage et une recherche dynamique ;
— permettre l’export des incidents filtrés au format JSON.
5 Périmètre et contraintes techniques
5.1 Périmètre
Le projet couvre uniquement la partie front-end :
— interface utilisateur ;
— traitement et visualisation des données ;
— interaction (filtrage, recherche, modal, export).
5.2 Contraintes
— Technologies imposées : HTML, CSS, JavaScript.
— Application exécutable localement dans un navigateur.
— Les graphiques doivent être réalisés avec Canvas ou en JavaScript pur.
— Les données peuvent être simulées (mock) mais doivent être cohérentes.
6 Fonctionnalités attendues
6.1 Interface
L’application devra proposer :
3
Projet : Dashboard Cybersécurité Application Web
— une barre de contrôle avec sélection de période, filtre de sévérité et champ de re-
cherche ;
— des cartes KPI (Alertes, Incidents ouverts, MTTA, MTTR) ;
— deux graphiques :
— alertes par sévérité ;
— tendance des alertes.
— un tableau d’incidents cliquable (détail en fenêtre modale) ;
— un tableau de vulnérabilités ;
— une section “Top assets” ;
— une section “Flux d’événements”.
6.2 Interaction
1. Filtrage dynamique des données sans rechargement de page.
2. Recherche par mots-clés (asset, IP, CVE, utilisateur, technique MITRE).
3. Affichage du détail d’un incident dans une fenêtre modale.
4. Export JSON des incidents filtrés.
7 Livrables
Les livrables attendus sont :
— les fichiers sources de l’application :
— [Link]
— [Link]
— [Link]
— un rapport décrivant :
— le contexte et les objectifs,
— la structure de l’application,
— les captures d’écran,
— les tests effectués,
— les limites et perspectives.
8 Critères d’évaluation
Le projet sera évalué selon :
— le respect du cahier des charges et des technologies imposées ;
— la qualité de l’interface (design, lisibilité, responsive) ;
— la qualité du code (structure, clarté, modularité) ;
— la cohérence des données, KPI et graphiques ;
— l’interactivité (filtres, modal, export) ;
— la possibilité d’évolution vers une version connectée à une API.
4
Projet : Dashboard Cybersécurité Application Web
9 Conclusion
Ce projet permet de mettre en pratique les bases du développement web (HTML, CSS et
JavaScript) tout en abordant un domaine stratégique : la cybersécurité. La réalisation d’un
dashboard SOC facilite la visualisation des alertes et incidents, améliore la compréhension
de la situation de sécurité et contribue à la priorisation des actions.
L’application développée constitue une base évolutive pouvant être améliorée par l’ajout
d’une base de données, d’une API et de fonctionnalités avancées telles que l’authentifica-
tion, la gestion des rôles (RBAC) ou encore l’intégration de données réelles issues d’outils
SIEM/EDR.