Extension CaptchaAI : CSP et CORS sur les sites durcis

Périmètre sûr : Ce guide vise vos propres applications et environnements de QA, de préproduction ou de production, ou des systèmes que vous êtes autorisé à tester par écrit. Il ne traite pas de l'automatisation de sites tiers.

Sur un site durci, le CSP (Content-Security-Policy) et le CORS bloquent les requêtes que l'extension CaptchaAI émet depuis le navigateur. La parade : ne comptez pas sur l'extension pour joindre l'API depuis la page protégée ; récupérez le token côté serveur, puis injectez-le dans la session qui a déclenché le défi. Ce guide explique pourquoi ces garde-fous gênent une extension et quelle architecture reste stable en CI.

Pourquoi CSP et CORS bloquent l'extension sur un site durci

Un site durci envoie un en-tête Content-Security-Policy restrictif. Ses directives connect-src, script-src et frame-src fixent les origines que la page — et tout script injecté — peut contacter. Si l'origine de l'API n'y figure pas, l'appel fetch de l'extension est refusé avant de partir.

Le CORS ajoute une barrière : une requête cross-origin vers un hôte externe déclenche un préflight OPTIONS, et sans en-têtes Access-Control-Allow-Origin, le navigateur bloque la réponse — une erreur console, jamais un token. Les combattre depuis l'extension revient à lutter contre le navigateur.

L'architecture recommandée : récupérer le token côté serveur

Déplacez l'appel hors de la page : un composant interne — worker ou fonction serverless — appelle CaptchaAI en HTTPS pour obtenir un token, que votre code injecte dans le formulaire. L'appel échappe au CSP de la page et le préflight CORS disparaît.

1. Capturez les seuls paramètres utiles (sitekey, URL de la page, action, proxy éventuel) ; en stocker plus brouille le débogage.
2. Soumettez la tâche à votre composant côté serveur, qui interroge l'API et attend le résultat.
3. Injectez le token dans la même session (même contexte de navigateur, même cookie jar) que celle qui a affiché le défi : une session dépareillée est la première cause de rejet.
4. Suivez la latence et l'acceptation en aval : la résolution et le workflow sont deux métriques distinctes.

Configurer CSP et CORS sur vos propres applications

Propriétaire du site, ajustez la politique vous-même :

• Ajoutez l'origine de votre composant à connect-src en test, et gardez la directive stricte en production.
• Côté CORS, exposez un endpoint interne de même origine qui relaie la demande, plutôt qu'une origine tierce trop large.
• Documentez chaque exception : une directive relâchée « temporairement » finit en production.

Stocker la clé API en toute sécurité

• La clé CaptchaAI vit dans un coffre (Vault, AWS Secrets Manager, Azure Key Vault) ou un secret de CI, jamais dans le code source ; montez-la en variable d'environnement au déploiement.
• Chez OVHcloud ou Scaleway, injectez-la via les variables d'environnement chiffrées de la plateforme, pas dans l'image du conteneur.

Exemple de code

Exemple côté client, extrait de votre propre suite de tests :

import os
import requests

API_KEY = os.environ['CAPTCHAAI_KEY']

def get_balance() -> float:
    resp = requests.post(
        'https://api.captchaai.com/getBalance',
        json={'clientKey': API_KEY},
        timeout=15,
    )
    resp.raise_for_status()
    return float(resp.json().get('balance', 0))

Dépannage

Liste de contrôle

• L'appel à l'API part d'un composant côté serveur, jamais d'un script soumis au CSP de la page.
• La clé CaptchaAI est stockée dans un coffre ou un secret de CI.
• Le token est injecté dans la même session que celle qui a déclenché le défi.
• Un retry idempotent avec backoff exponentiel couvre les erreurs transitoires.
• Côté RGPD, aucune donnée personnelle inutile n'est journalisée.

FAQ

Faut-il désactiver le CSP de la page pour résoudre le CAPTCHA ?

Non. Sur un site tiers c'est interdit ; sur vos pages, une politique relâchée « pour tester » finit en production. Déplacez l'appel hors du navigateur, où le CSP n'a plus d'effet.

Comment éviter les erreurs CORS lors de l'appel à l'API ?

Ne lancez pas la requête cross-origin depuis le navigateur. Faites-la partir d'un worker, d'une fonction serverless ou d'un endpoint interne de même origine. Sans requête cross-origin, plus de préflight OPTIONS.

CaptchaAI prend-il en charge hCaptcha sur ces sites ?

Non — hCaptcha n'est pas pris en charge, pas plus que FunCaptcha (Arkose Labs). CaptchaAI couvre reCAPTCHA v2 et v3, Cloudflare Turnstile et Challenge, GeeTest v3 et l'OCR d'image ; CaptchaFox (bêta), Friendly Captcha (bêta) et Lemin (bêta) sont en déploiement. GeeTest v4 est à venir.

Guides connexes

• Démarrage rapide CaptchaAI
• CAPTCHA en environnements autorisés
• Tester l'endpoint API
• Résolution CAPTCHA en CI
• Résoudre reCAPTCHA v2 via l'API

Fiabilisez vos workflows CAPTCHA. — Créez votre compte CaptchaAI.