↓Aller au contenu
Un blog sur mes projets
  1. Posts/

Comment personnaliser une instance CTFd sans changer le thème afin de trier les défis par difficulté ?

·421 mots·2 mins
Lacroix Raphaël (Chepycou)
Auteur
Lacroix Raphaël (Chepycou)
Bonjour, bienvenue sur mon blog. Je suis Raphaël LACROIX, je développe diverses applications pendant mon temps libre, allant du très inutile au parfois utile. Je fais aussi beaucoup de Capture The Flag et de défis de cybersécurité.
Sommaire

Pourquoi donc ?
#

Parce que j’étais dans une situation où j’avais une instance CTFd, pas de temps, pas de moyen de changer le thème, et tous les défis étaient entrés dans un ordre aléatoire (donc on pouvait avoir des challs du style : difficile - facile - moyen - difficile sur la même ligne de catégorie).

Puisque dans notre thème (qui une fois de plus ne pouvait pas être changé) les tags n’étaient pas affichés sur l’écran des défis (mais seulement en cliquant sur un défi spécifique), je voulais au moins avoir le plus facile en premier. J’ai cherché en ligne et je n’ai pas trouvé de code utilisable prêt à l’emploi.

TLDR : Comment les trier
#

  • Définir une échelle de difficulté. La mienne était
    • “facile”
    • “facile-moyen”
    • “moyen”
    • “moyen-dur”
    • “dur”
  • Utiliser le code ci-dessous sans oublier
    • De mettre à jour l’échelle de difficulté
    • De lire le code que je fournie et vérifier qu’il implémente bien une fonction compareFn et rien de malveillant (ne jamais exécuter un code qu’on ne comprend pas).

Explication détaillée :
#

Connectez-vous à votre console CTFd et cliquez sur le panneau d’administration. Une fois là, allez dans la section Theme :

alt text
Une fois là, descendez jusqu’en bas de la page jusqu’à la section theme settings (paramètres du thème). Cliquez sur le bouton Build et entrez le code ci-dessous dans la fonction personnalisée Challenge Order Custom Function.

Notez qu’un moyen plus simple aurait été de définir la difficulté comme une échelle de nombres (1 à 5 ou 1 à 10) et de les comparer après un cast en ints, mais j’avais déjà tout le CTF avec ces 5 tags, donc j’ai choisi la voie la plus facile. 
function compareFn(a, b) {
    //const difficulty_order = ["easy", "easy-medium", "medium", "medium-hard", "hard"]
    const difficulty_order = ["TODO"]
    if (a.tags && b.tags) {
    if (difficulty_order.indexOf(a.tags[0].value) < difficulty_order.indexOf(b.tags[0].value)){
        return -1
    } else if (difficulty_order.indexOf(a.tags[0].value) > difficulty_order.indexOf(b.tags[0].value)){ 
        return 1
    } else {
        return 0
    }

    } else if (!a.tags && b.tags) {
        return -1
    } else if (a.tags && !b.tags) {
        return 1
    }
    return 0;
}

Ensuite, n’oubliez pas de cliquer sur update (deux fois 🤡)

Et en bonus, si vous voulez définir des métadonnées pour avoir des aperçus de liens qui ressemblent à ceci avec une description, un titre et une image sur votre instance CTFd :
alt text
Vous pouvez utiliser le premier champ de la même page et coller ici les valeurs générées par l’utilisation de https://opengraph.dev/.

Au plaisir de vous voir à la THCon ou au CTF de la THCon