ADMR (Active Directory Mindmap)

Vue d'ensemble

La page ADMR (Active Directory Mindmap) est un visualiseur interactif de cartes mentales basé sur les fichiers Obsidian Canvas. Elle permet d'explorer de manière interactive les différentes techniques d'attaque Active Directory organisées dans une structure de mindmap navigable.

Fonctionnalités principales

1. Visualisation interactive des mindmaps

• Navigation fluide entre les différentes cartes de la mindmap

• Zoom et pan pour explorer les détails

• Rendu en temps réel des fichiers .canvas d'Obsidian

• Support des liens entre les différentes cartes

2. Parsing des fichiers Canvas

• Chargement automatique de tous les fichiers .canvas du dossier ADMR

• Résolution des liens entre les cartes

• Rendu des différents types de nœuds (texte, groupe, fichier)

• Support du markdown avec syntaxe highlightée

3. Interface utilisateur

• Contrôles de navigation (zoom, minimap, contrôles)

• Modal d'explication technique détaillée

• Design responsive adapté aux différentes tailles d'écran

• Thème sombre cohérent avec l'application

Interface utilisateur

Header principal

• Logo et titre de l'application

• Description de la fonctionnalité

• Bouton d'aide avec modal explicative

• Crédits aux contributeurs et sources

Zone de visualisation

• Canvas principal avec la mindmap interactive

• Contrôles de navigation (zoom in/out, fit to screen)

• Minimap pour la navigation globale

• Background avec grille pour l'orientation

Modal d'explication

• Explication technique du fonctionnement

• Détails sur le parsing des fichiers .canvas

• Stack technologique utilisée

• Notes de production et déploiement

Composants techniques

CanvasViewer.tsx

Fichier principal : src/components/features/admr/CanvasViewer.tsx

Fonctionnalités clés :

• Chargement des assets Canvas via Vite

• Parsing et résolution des liens entre cartes

• Rendu des nœuds avec React Flow

• Gestion de la navigation et des états

Types de données :

type CanvasNode = {
  id: string;
  type: 'text' | 'group' | 'file';
  x: number;
  y: number;
  width?: number;
  height?: number;
  color?: string;
  label?: string;
  text?: string;
  file?: string;
};

type CanvasEdge = {
  id: string;
  fromNode: string;
  toNode: string;
  fromSide?: 'left' | 'right' | 'top' | 'bottom';
  toSide?: 'left' | 'right' | 'top' | 'bottom';
  color?: string;
};

ADMRPage.tsx

Fichier principal : src/components/features/admr/ADMRPage.tsx

Fonctionnalités :

• Layout principal de la page

• Header avec informations et crédits

• Intégration du CanvasViewer

• Modal d'explication technique

Modèle de données

Structure des fichiers Canvas

Les fichiers .canvas sont des JSON contenant :

• nodes : Tableau des nœuds (texte, groupe, fichier)

• edges : Tableau des connexions entre nœuds

• Métadonnées : Positions, couleurs, dimensions

Types de nœuds supportés

1. Text : Nœuds de texte avec support markdown

2. Group : Groupes de nœuds avec bordures

3. File : Liens vers d'autres cartes canvas

Système de couleurs

• Mapping des couleurs Obsidian vers classes Tailwind

• Support des couleurs personnalisées

• Thème cohérent avec l'application

Workflow d'utilisation

1. Chargement initial

1. Import des assets : Vite charge tous les fichiers .canvas

2. Parsing des cartes : Conversion JSON vers structure React

3. Résolution des liens : Mapping des références entre cartes

4. Rendu initial : Affichage de la carte principale

2. Navigation

1. Clic sur nœud fichier : Navigation vers la carte cible

2. Zoom et pan : Exploration des détails

3. Minimap : Navigation globale

4. Contrôles : Reset, fit to screen

3. Interaction avec le contenu

1. Lecture des nœuds texte : Contenu markdown formaté

2. Exploration des groupes : Organisation hiérarchique

3. Suivi des liens : Navigation entre concepts

Personnalisation

Ajout de nouvelles cartes

1. Placer le fichier .canvas dans le dossier /ADMR/

2. Structure JSON conforme au format Obsidian

3. Rechargement automatique via Vite

Modification des couleurs

1. Mapping dans colorToClass() pour les couleurs standard

2. Support inline pour les couleurs personnalisées

3. Cohérence avec le thème de l'application

Ajout de types de nœuds

1. Extension du type CanvasNode

2. Ajout du composant de rendu

3. Gestion des propriétés spécifiques

Intégration technique

Stack technologique

• React Flow : Rendu des graphiques interactifs

• React Markdown : Rendu du contenu markdown

• Vite : Bundling et chargement des assets

• TypeScript : Typage strict des données

Chargement des assets

const canvasAssets = import.meta.glob('/ADMR/**/*.canvas', {
  eager: true,
  as: 'url',
}) as Record<string, string>;

Résolution des liens

function getCanvasAssetUrl(logicalPath: string): string | undefined {
  const norm = normalizePath(logicalPath);
  return canvasAssets[norm] ?? canvasAssets[decodeURI(norm)] ?? canvasAssets[norm.replace(/%20/g, ' ')];
}

Fonctionnalités avancées

Support markdown

• Syntaxe complète markdown supportée

• Highlighting du code avec highlight.js

• Emojis pour les annotations spéciales

• Liens et formatage avancé

Gestion des erreurs

• Fallback pour les fichiers manquants

• Validation des structures JSON

• Gestion des liens cassés

Performance

• Chargement paresseux des cartes

• Mise en cache des assets

• Optimisation du rendu React Flow

Utilisation recommandée

Pour les pentesteurs

1. Exploration des techniques d'attaque AD

2. Apprentissage des méthodologies

3. Référence rapide pendant les audits

4. Formation et sensibilisation

Pour les formateurs

1. Support visuel pour les formations

2. Navigation interactive des concepts

3. Adaptation du contenu selon les besoins

4. Suivi de la progression d'apprentissage

Maintenance et évolution

Mise à jour du contenu

1. Synchronisation avec les sources originales

2. Validation de la structure des cartes

3. Test de la navigation et des liens

4. Déploiement des nouvelles versions

Améliorations possibles

1. Recherche dans le contenu des cartes

2. Favoris et signets personnalisés

3. Export des cartes en différents formats

4. Collaboration en temps réel

Dépannage

Problèmes courants

1. Cartes non chargées : Vérifier la structure JSON

2. Liens cassés : Valider les chemins des fichiers

3. Rendu incorrect : Contrôler la syntaxe markdown

4. Performance : Optimiser la taille des cartes

Logs et débogage

1. Console du navigateur pour les erreurs JavaScript

2. Network tab pour les problèmes de chargement

3. React DevTools pour l'état des composants

4. Vite logs pour les problèmes de build

Sources et crédits

Contributeurs

• gr0bot : Création de la mindmap originale

• bl4ckarch : Contributions et améliorations

• OCD mindmaps : Inspiration et méthodologie

• The Hacker Recipes : Documentation technique

Sources

• GitHub ADMR : https://github.com/Imp0sters/ADMR

• OCD Mindmaps : https://orange-cyberdefense.github.io/ocd-mindmaps/

• The Hacker Recipes : https://www.thehacker.recipes/