Aller au contenu
ALTCHA ALTCHA ALTCHA

Dépannage

Cette page fournit des conseils pour résoudre les problèmes courants liés aux intégrations ALTCHA. Pour commencer, activez le mode de débogage sur le widget et vérifiez les journaux dans la console du développeur.

Mode Débogage

Pour activer le mode de débogage sur le widget, utilisez l’attribut debug:

<altcha-widget
  debug
></altcha-widget>

Le mode débogage affichera des messages de journal dans la console. Ouvrez la console du développeur de votre navigateur pour visualiser ces journaux.

Problèmes Courants

Le Widget Échoue à Trouver la Solution

Problème:

Le widget signale “Échec de la vérification” et la console affiche “Impossible de trouver une solution” (avec le debug activé).

Solution:

Ce problème peut survenir en raison de :

  1. Nombre Aléatoire Supérieur au Maximum: Assurez-vous que le nombre aléatoire généré par votre serveur ne dépasse pas le nombre maximum configuré. Par défaut, le nombre maximum est de 1 000 000, mais il peut être outrepassé par le paramètre maxnumber dans la réponse du défi. Alignez la génération de nombres aléatoires de votre serveur avec ce maximum.

  2. Calcul du Défi Incorrect: Vérifiez votre implémentation côté serveur. Pour plus de détails, consultez la documentation du serveur ou les bibliothèques officielles pour des implémentations spécifiques au langage. Par exemple, vérifiez si salt=some_salt?expires=1722614680 et number=1234 génèrent un challenge SHA-256 égal à 8b1fa4ee51e9e9c8b53cd0c080ca42458accc39424a13fb51e56cfe439814d5f. Assurez-vous que tous les paramètres supplémentaires (par ex., expires) sont inclus dans l’entrée du hash.

Secure Context

Problème :
Le widget ALTCHA ne fonctionne pas et affiche l’erreur suivante dans la console du développeur :
Uncaught TypeError: Cannot read properties of undefined (reading 'digest').

Solution :
Le widget ALTCHA utilise l’interface SubtleCrypto intégrée au navigateur pour effectuer des opérations cryptographiques en toute sécurité. Cette interface n’est disponible que dans un contexte sécurisé, généralement accessible via HTTPS ou certaines configurations localhost.

Pour résoudre ce problème :

  1. Assurez-vous que votre site Web est accessible via HTTPS.
  2. Pour le développement local, utilisez des domaines localhost compatibles, tels que :
    • http://localhost
    • http://*.localhost (par exemple, http://monapp.localhost)

Cela activera le contexte sécurisé nécessaire au bon fonctionnement du widget.

Les écouteurs d’événements ne fonctionnent pas

Problème :

Les événements tels que statechange ou verified ne sont pas déclenchés.

Solution :

Assurez-vous d’ajouter les écouteurs d’événements après que le script ALTCHA soit chargé et que le composant soit initialisé.

  1. Ajouter les écouteurs après l’initialisation :
    Les écouteurs d’événements doivent être ajoutés uniquement après que le script ALTCHA soit entièrement chargé et le composant initialisé.

    • Pour les frameworks modernes et les bundlers :
      Assurez-vous d’importer import 'altcha' dans votre application.

    • Pour JavaScript personnalisé :
      Utilisez l’événement DOMContentLoaded pour ajouter des écouteurs :

      document.addEventListener('DOMContentLoaded', () => {
        altchaWidgetElement.addEventListener('statechange', (event) => {
          // Gérer l'événement statechange
        });
      });

  2. Gérer les imports asynchrones :
    Si vous utilisez des imports asynchrones comme import('altcha'), attendez que l’import soit résolu avant d’ajouter des écouteurs :

    import('altcha').then(() => {
      altchaWidgetElement.addEventListener('statechange', (event) => {
        // Gérer l'événement statechange
      });
    });

Problèmes avec le rendu côté serveur (SSR)

Problème:

Lorsque vous utilisez des frameworks comme Next.js ou SvelteKit, la compilation peut échouer avec l’erreur ReferenceError: customElements is not defined.

Solution:

Le widget ALTCHA est un WebComponent personnalisé qui dépend de la propriété Window.customElements, généralement indisponible dans les environnements SSR.

Pour résoudre ce problème, assurez-vous que le widget est uniquement importé côté client (navigateur). Par exemple, utilisez la fonction dynamique import('altcha'). Certains frameworks proposent des fonctions d’assistance pour détecter si le code est exécuté côté serveur. Sinon, vous pouvez vérifier manuellement l’environnement du navigateur en testant typeof window.

Dans SvelteKit, vous pouvez utiliser $app/environment pour détecter si le code est exécuté dans le navigateur:

+page.svelte
<script>
  import { browser } from '$app/environment';


  if (browser) {
    import('altcha');
  }
</script>


<altcha-widget></altcha-widget>

Problèmes de Politique de Sécurité du Contenu (CSP)

Problème:

Le widget ne se rend pas correctement, ou la console affiche des erreurs liées à CSP.

Solution:

Consultez la documentation sur la Politique de Sécurité du Contenu pour configurer correctement le CSP pour le widget.

Problèmes de Partage de Ressources en Origine Croisée (CORS)

Problème:

Le widget échoue à récupérer le défi du serveur, et des erreurs liées à CORS apparaissent dans la console.

Solution:

Ce problème survient lorsque votre site web ou application se trouve sur un domaine différent de votre serveur. Activez CORS (Partage de Ressources en Origine Croisée) sur votre serveur. Une configuration CORS de base comprend :

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: GET, POST, OPTIONS

Pour des orientations détaillées, consultez la documentation MDN.