Anti Bot Arcade Wordpress Plugin ! [PG : Pandora's box is open]

Mon blog est spammé de toute part, il faut que j’y mette fin !! Tout de suite !!!
Hum Hum Hum, il a fallu que je prenne le temps de créer ce plugin avec moultes options en backend, les sprites sont faits via aseprite et les règles en multitests et finetuning en mode humanbot. L’idée est d’éviter l’utilisation de plugins comme re-captcha et autre usine à pomper les données de façon inconsciente . J’espère que je n’ai pas empiré la situation avec ce plugin !! Et oui aussi au niveau graphisme, promis je changerai de typo pixel art dés que je trouve mon bonheur !!!

PX3K Captcha Arcade — Under the hood (Sous le capuchon :o)

Sécurité : Transient. HMAC. Unforgeable.

« Security is not a product, but a process. »
— Bruce Schneier

Un peu de charabia ? Chaque partie émet un play_token — un UUID généré côté serveur, stocké en transient WP (90 secondes, usage unique). Sans ce token, l’endpoint ajax_verify répond 403. Le cookie de validation est signé hash_hmac('sha256', …, wp_salt('auth')) : même si un attaquant lit le cookie, il ne peut pas le recréer sans la clé serveur. Pas de raccourci possible.

Un transient WordPress c’est une valeur stockée temporairement en base de données avec une durée de vie.
Hash-based Message Authentication Code — une empreinte cryptographique.

Transient = le ticket existe et expire. HMAC = le ticket est authentique. Unforgeable = sans les deux, la porte reste fermée.

Moteur de jeu : RAF. Nodes. State.

« Make it work, make it right, make it fast. »
— Kent Beck

Encore un peu de charabia ? La boucle tourne à 60 fps via requestAnimationFrame — aucun setInterval, aucun timer approximatif. Les sprites (cibles, leurres, bullets) sont des nœuds DOM persistants : pas d’innerHTML rebuild à chaque frame, ce qui évite le rechargement d’images sur Chrome. Tout transite par un objet state central — positions, score, vies, tokens — jamais muté pendant le rendu.

En résumé

Un plugin faisant office de captcha qui ne nourrit pas une IA pour déterminer si un feu rouge n’est pas vert, mais un captcha qui ne fait que perdre du temps à l’utilisateur de façon fun et qui peut-être en bonus bloque les spam-bots.

L’arsenal tech ou stack du plugin — stack c’est la pile technologique

Langages
PHP 8.1+ — backend, AJAX handlers, settings, template rendering
JavaScript ES5 — moteur de jeu (vanilla, aucune dépendance)
CSS3 — layout, animations, custom properties
HTML/PHP templates — captcha-box.php, pages admin
Gouvernance : Tout se charge via le domaine codeurbarbu.ch
normalement, Écosystème fermé : Aucune ressource externe (CDN ou Fonts) n’est chargée, garantissant performance et respect de la vie privée. On y croit ? [Vérifiez F12 + activité réseau]

Ressources WordPress natives
— wp_localize_script — config PHP → JS
— set_transient / get_transient — sécurité play_token
— wp_salt(‘auth’) + hash_hmac — signature cookie
— wp_enqueue_* — assets
— add_menu_page / add_submenu_page — admin UI
— Media uploader WP natif — picker assets

Ressources humaines
Pour construire ce plugin seul il faudrait :
— 1 dev PHP WordPress senior (backend, sécurité, hooks)
— 1 dev JS (moteur RAF, game loop, DOM)
— 1 designer pixel art (assets, palette, UX)
Soit ~3 semaines à temps plein pour la v1.0, avec les features actuelles (sécurité, game engine, admin UI complète).
Avec un LLM comme PuxiLlm (Cherchez pas je viens de l’inventer) — 1 personne, sessions courtes suffisent pour avancer feature par feature, comme on le fait ici. (Parle pour toi, ça prend du temps de faire un canon et de fignoler et coller des rustines !!!)

Pas exempt de bug mais fait avec passion sans les fruits !!!

Canon de pirate portable en pixel art avec son gnome prêt à toute éventualité dont celle d’être projetée à vitesse 60fps

« C’est pas parceque c’est moche que c’est pass beau ! » [Gnomicus]

Canon de pirate portable en pixel art avec son gnome à bonne rouge.

Canevas : 32 × 32 px

Palette : (14 couleurs)

256×256px | 8x

—

Que signifie moteur RAF ?
RAF = requestAnimationFrame
C’est une API navigateur qui dit : « Lance ma fonction au prochain rafraîchissement de l’écran » — généralement 60 fois par seconde (60 fps).

Pourquoi c’est un « moteur »


Code js

function loop() {
update(); // déplace les cibles, les bullets
render(); // met à jour le DOM
requestAnimationFrame(loop); // planifie le prochain frame
}
requestAnimationFrame(loop); // démarre

C’est une boucle infinie synchronisée avec l’écran — c’est littéralement la même technique que les moteurs de jeu (Unity, Godot) mais dans le navigateur.

Avantages vs setInterval
Précis — calé sur le vsync du monitor, pas d’approximation timer
Économe — s’arrête automatiquement si l’onglet est en arrière-plan
Fluide — pas de saut de frames
C’est le cœur du jeu : sans RAF, pas de mouvement, pas de détection de collision, pas de particules.

Petit nuage de mots clé de derrière les fagots ?

                 ██████████
                  R  A  F
              ████████  ████████
            S T A T E    H M A C
          ████   ████████████   ████
        T👌EN   CAPTCHA ARCADE   DOM
       ██████  ████████████████  ████
      CO👌IE  PIXEL-ART  NODES  PHP
        ████   ██████████████   ███
          60FPS   LOOP   AJAX
            ████   ████████
             WP_SALT  CSS3
               ██   ████
               DRAG  ES5

Si les commentaires sont actifs sur cet article, alors tu peux essayer le mini jeu !
Ci-dessous, oui plus bas ou pas!!
specaut

T’as testé ? Ça marche vraiment ?

Quand on crée un logiciel, il faut faire des tests unitaires, c’est le travail du DevOps, pour qu’à chaque update du logiciel, c’est robuste et ça marche. Ici on parlera tout simplement de tests tout court :

Mac, PC, Smartphone, Tablette, principalement 2 systèmes de contrôle (input) : une main sur souris, un doigt sur un écran tactile. Donc c’est pas vraiment accessible. Et les bots auront peut-être plus de facilitéen lisant le code pour trafiquer le jeu, mais le premier filtre empechera les 10 messages de spam par jours, soit ~3600 messages de spambot par ans.

Le mini jeu ne marchait pas sur google chrome, il a fallu deboguer, … huhu huhu ! Voilà j’ai fini pour aujourd’hui, d’écrire un maximum en mode open mind.

Après une journée, je reçois du spam … je me doute que cela ne passe pas par la page du formulaire, mais par le REST API de wordpress. J’ajoute donc quelques protections supplémentaires, ce qui ne désactive pas des fonctionnalités que j’utilise.

Protection REST API, Protection XML-RPC, Création Champ Honeypot, Rate Limiting, Blocage Trackbacks/Pingbacks.

Évaluation