Digi4 — Site vitrine & CMS d'agence
Site vitrine, CMS et sécurité: l'écosystème digital complet de l'agence Digi4.
- 0
- Injection SQL détectée
- 1
- Faille XSS corrigée
- 71
- Commits sur le dépôt
Le défi
Digi4, agence digitale marocaine, avait besoin d'un site vitrine capable de présenter ses services, ses études de cas et son équipe en français et en anglais, sans dépendre d'un thème générique ni d'un CMS externe difficile à faire évoluer. Le cahier des charges imposait des URL localisées par langue, un référencement naturel soigné (métadonnées, données structurées, sitemap), et un espace d'administration permettant à des profils non techniques de publier du contenu, des articles de blog et des demandes de devis, tout en garantissant un contrôle d'accès strict par rôle et par module.
La solution
Saad a conçu et développé un écosystème complet: un frontend Angular 19 en SSR (port 4400) consommant une API Node.js/Express unifiée (port 3400) qui expose des routes publiques en lecture seule et des routes privées authentifiées, ainsi qu'un SPA d'administration Angular 19 distinct (port 4401, Tailwind v3) pour la gestion de contenu par les équipes non techniques.
- Contenu bilingue FR/EN via des tables i18n dédiées et ngx-translate, avec transfert d'état compatible SSR
- RBAC granulaire (projet, module, action) résolu par rôles avec surcharges individuelles par utilisateur
- Authentification JWT (bcryptjs, passport-jwt), upload et traitement d'images (multer, sharp)
Les résultats
Le projet a fait l'objet d'un audit de sécurité interne daté, couvrant les injections SQL, le pipeline d'upload de fichiers, les failles XSS et CSRF ainsi que le rendu SSR. L'audit a confirmé qu'aucune requête n'était vulnérable aux injections SQL malgré l'activation de multipleStatements au niveau de la connexion MySQL, un point de vigilance identifié et neutralisé. Une vulnérabilité de sévérité élevée a été détectée: un fichier mal étiqueté (GIF/SVG) pouvait déclencher une XSS stockée via le pipeline d'upload; elle a été corrigée, de même que plusieurs constats de sévérité moyenne et faible. L'architecture bilingue SSR et le système d'analytics maison ont également été livrés et validés.
Méthodologie et gestion de projet
Le développement s'est concentré sur environ un mois de travail intensif en juillet 2026 (67 des 71 commits du dépôt), après une phase de cadrage et de socle technique posée dès le printemps. Le choix d'architecture a lui-même évolué: une première tentative avec un CMS headless Directus a été abandonnée au profit d'une stack Express/MySQL/Angular sur mesure, jugée plus adaptée au niveau de contrôle recherché sur le RBAC et le SEO. Par souci de juste dimensionnement, un schéma multi-tenant (federation_id) et un microservice de fichiers séparé avec authentification HMAC, présents dans une architecture de référence étudiée, ont été volontairement remplacés par des équivalents mono-tenant plus simples, adaptés à l'échelle réelle du projet.
Architecture technique et performance
L'architecture repose sur une API Node.js/Express unifiée adossée à MySQL 8 (pool mysql2 en mode callback), avec des jetons JWT signés par un secret propre à chaque utilisateur (clé serveur combinée au hash du mot de passe), ce qui invalide automatiquement les sessions actives lors d'un changement de mot de passe. Les cookies sont HttpOnly, Secure et SameSite=Strict, un jeu de jetons révocables est conservé côté serveur, et l'en-tête X-Requested-With est exigé sur toute requête de mutation en défense CSRF. Le système d'analytics maison écrit les événements bruts puis les pré-agrège par heure via une tâche planifiée, une conception pensée pour tenir des dizaines de millions d'événements mensuels.