Protéger votre clé API : ne jamais exposer côté client

Une clé API est un mot de passe

Votre clé API xAI est l’équivalent d’un mot de passe avec accès complet à votre compte. Toute personne qui la possède peut effectuer des appels API à vos frais, accéder à vos modèles, et potentiellement compromettre vos données. La règle est simple et absolue : ne jamais exposer une clé API côté client.

Les vecteurs d’exposition courants

Code source frontend

Le cas le plus fréquent est l’inclusion directe de la clé dans du JavaScript :

// DANGER - ne JAMAIS faire cela
const response = await fetch("https://api.x.ai/v1/chat/completions", {
  headers: { "Authorization": "Bearer xai-abc123..." }
});

Ce code, une fois déployé, est visible par n’importe qui dans les outils de développement du navigateur.

Variables d’environnement frontend

Les variables préfixées NEXT_PUBLIC_, VITE_, ou REACT_APP_ sont intégrées dans le bundle JavaScript et donc publiques :

# DANGER - cette variable sera dans le bundle
NEXT_PUBLIC_XAI_API_KEY=xai-abc123...

Dépôts Git publics

Même un commit supprimé reste dans l’historique Git. Si vous avez committé une clé par erreur, elle est compromise.

Logs et messages d’erreur

Les clés peuvent fuiter dans les logs applicatifs, les messages d’erreur affichés à l’utilisateur, ou les outils de monitoring.

L’architecture proxy : la solution

La seule approche sécurisée est de proxier tous les appels via votre backend :

Client (navigateur/mobile)
    ↓ requête sans clé API
Votre Backend (serveur)
    ↓ ajoute la clé API (variable d'environnement)
API xAI
    ↓ réponse
Votre Backend
    ↓ transmet la réponse (filtrée si besoin)
Client

Exemple de proxy minimaliste

# Backend Python (Flask)
import os
from flask import Flask, request, jsonify
import requests

app = Flask(__name__)
XAI_KEY = os.environ["XAI_API_KEY"]  # Variable serveur uniquement

@app.route("/api/chat", methods=["POST"])
def proxy_chat():
    user_message = request.json.get("message")

    response = requests.post(
        "https://api.x.ai/v1/chat/completions",
        headers={"Authorization": f"Bearer {XAI_KEY}"},
        json={
            "model": "grok-3",
            "messages": [{"role": "user", "content": user_message}]
        }
    )

    return jsonify(response.json())

Avantages du proxy

• La clé API n’est jamais transmise au client
• Vous pouvez filtrer les requêtes (rate limiting, validation, modération)
• Vous contrôlez les modèles accessibles (pas de surcoût inattendu)
• Vous pouvez logger les appels pour l’audit
• Vous pouvez cacher certaines réponses pour réduire les coûts

Stockage sécurisé des clés

Variables d’environnement serveur

# Fichier .env (JAMAIS committé dans Git)
XAI_API_KEY=xai-votre-cle-secrete

Ajoutez .env à votre .gitignore :

# .gitignore
.env
.env.local
.env.production

Gestionnaires de secrets

Pour les environnements de production, utilisez un gestionnaire de secrets :

• AWS Secrets Manager ou SSM Parameter Store
• Google Secret Manager
• Azure Key Vault
• HashiCorp Vault
• Doppler ou Infisical pour les startups

Ces outils offrent la rotation automatique, l’audit des accès et le chiffrement au repos.

Que faire si votre clé est compromise

Si vous suspectez qu’une clé a été exposée, agissez immédiatement :

1. Révoquez la clé dans la console xAI (console.x.ai)
2. Générez une nouvelle clé et mettez à jour vos backends
3. Auditez l’utilisation : vérifiez les appels API suspects dans votre historique de facturation
4. Identifiez la source de la fuite pour éviter que cela se reproduise
5. Scannez votre code avec des outils comme gitleaks ou truffleHog

Points clés à retenir

• Une clé API est un mot de passe avec accès complet à votre compte
• Toujours proxier les appels API via votre backend
• Les variables NEXT_PUBLIC_, VITE_, REACT_APP_ sont publiques
• Utilisez un gestionnaire de secrets en production
• Si une clé est compromise, révoquez-la immédiatement et auditez l’utilisation