Pourquoi donc ? #
Parce que j’étais dans une situation où je disposais d’une instance CTFd, que je n’avais ni le temps ni la possibilité de modifier le thème, et que je souhaitais que le niveau de difficulté des défis s’affiche.
Étant donné que dans notre thème (qui, encore une fois, ne pouvait pas être modifié), les tags n’apparaissaient pas sur l’écran des défis (mais uniquement en cliquant sur un défi spécifique) je voulais trouver un moyen d’afficher la difficulté en plus de les trier correctement ce dont j’avais déjà parlé l’année dernière. J’ai cherché en ligne et je n’ai trouvé aucun code prêt à l’emploi, alors le voici.
TLDR : Comment les afficher #
- Définir une échelle de difficulté. Cette année La mienne était
- “beginner”
- “easy”
- “medium”
- “hard”
- “insane”
- Utilisez le code ci-dessous en adaptant votre texte. J’ai également ajouté une option de couleur, même si je ne l’ai finalement pas utilisée car elle ne s’accordait pas avec le style « défi relevé ».
Explication détaillée : #
Connectez-vous à votre console CTFd et cliquez sur le panneau d’administration. Une fois là, allez dans la section Theme :
Une fois là, cliquez sur le bouton Build CSS et entrez le code ci-dessous dans le champ Theme Header.
ints, mais j’avais déjà tout le CTF avec ces 5 tags, donc j’ai choisi la voie la plus facile.
.tag-beginner::after {
content: "Beginner";
}
/*
Use this if you want to oclor code your tags
.tag-beginner {
background-color: #22c55e;
color: #ffffff;
}
*/
.tag-easy::after {
content: "Easy";
}
.tag-medium::after {
content: "Medium";
}
.tag-hard::after{
content: "Hard";
}
.tag-insane::after {
content: "Insane";
}Ensuite, n’oubliez pas de cliquer sur update
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 :
Vous pouvez utiliser le même champ 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