Contexte technique

Le site Hacktron AI Docs utilise le framework Astro, comme le montre le composant <astro-island uid="1A75eg" ...> présent dans le code source. L’objectif principal est de garantir que l’attribut data-theme, qui détermine les couleurs d’affichage, reste cohérent lors du rendu initial et pendant les transitions de page (swap) afin d’éviter le phénomène de FOUC (Flash Of Unstyled Content).

Mécanisme de préservation du thème

Le processus repose sur deux étapes distinctes. D’abord, le thème est appliqué avant le rendu du corps (before the body paints) pour que le premier rendu utilise les bonnes couleurs. Ensuite, Astro déclenche l’événement astro:before-swap, qui réapplique data-theme au document entrant. Cette double injection assure que le thème persiste même lorsque le DOM est remplacé par un nouveau fragment HTML.

// Extrait du code source
if (document.body) {
  // Appliquer le thème avant le premier paint
  document.body.setAttribute('data-theme', currentTheme);
}
// Hook Astro avant le swap de page
window.addEventListener('astro:before-swap', (event) => {
  event.detail.document.documentElement.setAttribute('data-theme', currentTheme);
});

Le fragment ci‑dessus montre comment le thème est d’abord fixé sur document.body, puis réinjecté via le hook astro:before-swap. L’utilisation de event.detail.document indique que le swap manipule un document virtuel avant son insertion dans le DOM réel.

Implications sécuritaires

Conserver data-theme entre les swaps ne se limite pas à l’esthétique. L’attribut peut être exploité pour injecter des styles malveillants si un acteur externe parvient à modifier la valeur du thème. En conservant la même chaîne de caractères, le site réduit la surface d’attaque liée à la réinitialisation du DOM, mais il doit néanmoins valider la provenance de currentTheme. Si la valeur provient d’un paramètre d’URL ou d’un stockage côté client non protégé, un attaquant pourrait forger un thème contenant du CSS dangereux, menant à des attaques de type cross‑site scripting (XSS) via des propriétés CSS telles que url().

Le choix d’un hook côté client plutôt que d’un rechargement complet du serveur minimise les requêtes réseau, mais il augmente la dépendance à la logique JavaScript. Une faille dans le code qui calcule currentTheme pourrait donc compromettre l’intégrité visuelle du site et, indirectement, la confiance des utilisateurs.

Limites et perspectives

Le mécanisme décrit ne couvre que le thème de couleur. D’autres attributs d’accessibilité (par exemple lang ou dir) ne bénéficient pas de la même persistance, ce qui peut entraîner des incohérences lors de swaps complexes. De plus, le code fourni ne précise pas comment currentTheme est synchronisé entre le serveur et le client, laissant une zone d’ombre sur la cohérence multi‑session.

Pour renforcer la robustesse, il serait judicieux d’ajouter une validation stricte du thème côté serveur, d’utiliser des valeurs d’énumération limitées et de mettre en place un mécanisme de fallback en cas d’échec du hook. Enfin, l’intégration d’un test automatisé qui simule les swaps tout en vérifiant l’absence de FOUC et de modifications non autorisées du DOM offrirait une garantie supplémentaire pour les déploiements continus.