Accéder au contenu principal

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.

Commentaires

Posts les plus consultés de ce blog

Comprendre les Buffer Overflows - Analyse Technique 🗂️ Table des matières 🧠 Introduction 📚 Comprendre la vulnérabilité 🛠️ Compilation sans protections 🔎 Mécanisme d'exploitation 🛡️ Protections modernes 🧰 Outils à connaître 🔧 Environnement Docker 📌 Rappel sur les registres : Lorsqu'une fonction est exécutée, plusieurs registres processeur sont utilisés. Parmi eux : RIP (x86_64) : registre d'instruction, contient l'adresse de la prochaine instruction à exécuter. EIP (x86 32-bit) : équivalent de RIP sur les systèmes 32 bits. RBP / EBP : pointeur de base de la pile, souvent utilisé pour référencer les variables locales et les arguments. RSP / ESP : pointeur de sommet de la pile, toujours à jour avec l'adresse actuelle du haut de pile. Ces registres sont au cœur des méca...

🛡️ Analyse de faille avec Nikto : exploitation et protection contre Shellshock via CGI

Introduction : pourquoi analyser les failles ? Dans le monde de la cybersécurité, l’analyse de faille est un processus indispensable. Elle permet d’identifier et corriger les vulnérabilités avant qu’elles ne soient exploitées. Un attaquant n’a besoin que d’un seul point faible : à nous de le détecter avant lui. Dans cet article, nous allons nous intéresser à une faille emblématique : Shellshock (CVE-2014-6271), qui a touché Bash en 2014. Nous verrons comment utiliser Nikto , un scanner de vulnérabilités web, pour la détecter, comment l’exploiter manuellement, et surtout comment s’en prémunir. Pour cela, il est essentiel de comprendre le rôle joué par CGI (Common Gateway Interface) dans l’exploitation. 🧠 CGI : le chaînon faible de Shellshock Qu’est-ce que CGI ? CGI (Common Gateway Interface) est une spécification permettant à un serveur web d’exécuter des programmes externes – appelés scripts CGI – pour générer dynamiquement des réponses HTTP. Ces scripts peuvent être écrits e...
Introduction au Machine Learning avec Python : Votre Premier Modèle IA de A à Z L'intelligence artificielle, souvent associée à des concepts abstraits et complexes, devient accessible grâce à Python. Aujourd’hui, vous allez découvrir comment créer un modèle de machine learning qui apprend à prédire si un passager du Titanic a survécu ou non. Ce projet concret vous donnera une vraie compréhension de ce qu’est l’IA appliquée. Étape 1 : Comprendre les données et le rôle de df Dans ce tutoriel, nous utilisons un jeu de données très célèbre : celui du Titanic. Chaque ligne représente un passager, avec des colonnes comme son âge, son sexe, sa classe dans le bateau, le prix payé pour son billet, et surtout, s’il a survécu ( Survived = 1 ) ou non ( Survived = 0 ). Quand on lit ce fichier CSV avec pandas , on stocke les données dans une structure appelée DataFrame , abrégée en df . Un DataFrame est un tableau à deux dimensions : les colonnes sont les variables (âge, sexe…), et ch...