Construire un mini pare-feu IA pour le navigateur avec JavaScript et l'API de GPT

Introduction : Pourquoi un pare-feu côté navigateur ?

Dans un monde où les interactions numériques se font majoritairement via des navigateurs web, la sécurité à ce niveau est cruciale. Or, la plupart des dispositifs de protection (pare-feu, antivirus, anti-spam) sont centrés sur le réseau ou le système. Ce que nous proposons ici est un concept simple mais prometteur : un pare-feu comportemental côté navigateur, à l’aide d’une API d’IA.

Notre projet est développé en JavaScript, le langage natif du navigateur. Plutôt que de réinventer la roue avec un moteur d’analyse complexe, nous tirons parti de la puissance d’un modèle d’intelligence artificielle existant (GPT-3.5). Cela permet de simplifier considérablement le développement tout en profitant des capacités avancées d’analyse contextuelle qu’offrent les IA modernes. Là où autrefois il aurait fallu écrire, maintenir et mettre à jour manuellement une série de règles (régulièrement périmées face à l'évolution des attaques), nous confions cette tâche à un moteur déjà entraîné sur des milliards d’exemples.

Objectif du projet

Construire un prototype de "mini pare-feu" IA embarqué dans le navigateur, capable de :

• Intercepter les champs de formulaire
• Détecter un contenu potentiellement suspect (tentatives de phishing, injections malveillantes, mots-clés dangereux)
• Réagir immédiatement (alerte visuelle, blocage, etc.)

Nous utiliserons JavaScript pur et une API GPT (par exemple, OpenAI GPT-3.5) pour l’analyse contextuelle du contenu.

Rappel : qu’est-ce qu’un pare-feu ?

Un pare-feu ("firewall") est un outil qui filtre les communications entrantes et sortantes d’un système informatique. Il agit comme un "vigile" qui bloque ou autorise certaines données selon des règles. Ici, notre pare-feu est adapté au contexte : il ne filtre pas le réseau, mais l’interaction utilisateur-application.

Traditionnellement, un pare-feu repose sur une liste de règles fixes qu’il faut mettre à jour en fonction des nouvelles menaces. L’un des avantages de notre solution basée sur une IA existante est qu’elle remplace ces règles rigides par une interprétation intelligente, adaptable et évolutive.

Prototype simple en JavaScript + API GPT : découpage et explication pédagogique

1. Sélection et écoute des champs de saisie

document.querySelectorAll('input, textarea').forEach(el => {
  el.addEventListener('blur', async () => {
    const flag = await analyseAvecIA(el.value);
    if (flag) {
      el.style.border = '2px solid red';
      alert("⚠️ Contenu potentiellement dangereux détecté.");
    }
  });
});

Explication :
- On sélectionne tous les éléments de type input et textarea.
- Lorsqu’un utilisateur quitte un champ (blur), on déclenche une analyse.
- Si le contenu est jugé dangereux par l’IA, on colore le champ en rouge et on affiche une alerte.

2. Fonction d’analyse avec GPT

async function analyseAvecIA(texte) {
  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer VOTRE_CLE_API"
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [
        { role: "system", content: "Ta tâche est de déterminer si un contenu est une tentative de phishing ou contient une injection malveillante." },
        { role: "user", content: texte }
      ]
    })
  });
  const data = await response.json();
  return data.choices[0].message.content.toLowerCase().includes("oui");
}

Explication :
- On appelle l’API GPT d’OpenAI en lui envoyant deux messages :
• Un prompt système qui définit le rôle de l’IA : détecter le phishing ou l’injection.
• Le contenu réel saisi par l’utilisateur.
- On interprète la réponse : si elle contient oui, on considère que le contenu est suspect.

Remarques de sécurité :
- Il faut remplacer VOTRE_CLE_API par votre vraie clé OpenAI.
- Ne jamais exposer une clé sensible en production côté client (voir plus loin les limitations).

Limitations du prototype

• Temps de réponse dû à l'appel API (latence perceptible)
• Risque de faux positifs ou négatifs selon la formulation du prompt
• Le code étant exécuté côté client, il peut être désactivé ou contourné
• Exposer une clé API en clair dans le navigateur est dangereux (solution : proxy sécurisé ou back-end intermédiaire)

Pistes d'amélioration

• Utiliser un modèle IA local exécuté dans le navigateur (WebLLM, Mistral via WebGPU, etc.)
• Créer une extension navigateur pour une meilleure intégration
• Ajouter un historique local ou un apprentissage progressif des comportements fréquents

Conclusion

Ce projet montre qu’avec un peu de JavaScript et une API d’IA, il est possible d’implanter une couche supplémentaire de réflexion et d’analyse dans le navigateur lui-même. Ce n’est pas une solution de sécurité totale, mais une preuve de concept qui ouvre la voie à une sécurité plus fine, contextuelle et proactive. Idéal pour l’expérimentation, la pédagogie, ou comme base pour un projet plus ambitieux. Et surtout, il illustre à quel point les IA modernes permettent aujourd’hui de créer en quelques lignes ce qui aurait autrefois nécessité des centaines de règles manuelles, mises à jour et surveillées en permanence.