Attaques CSS sur les webmails : comment les pirates exploitent les failles pour voler vos mots de passe et jetons

Et si un simple e-mail pouvait se transformer en piège pour voler vos mots de passe ? Selon le rapport 2025 de Verizon, 94 % des logiciels malveillants sont distribués par e-mail. Aujourd’hui, une nouvelle recherche présentée au Black Hat USA 2026 par Gareth Heyes, chercheur chez PortSwigger, montre que le contenu d’un e-mail peut désormais s’extraire de son cadre pour interagir avec l’interface du webmail. Ces attaques CSS ciblent les principaux services de messagerie en ligne : Outlook, Gmail, Yahoo Mail, Proton Mail, Fastmail et AOL Mail. Elles permettent de capturer des mots de passe, de détourner des comptes tiers, de fuiter des jetons d’authentification et même de manipuler des outils d’intelligence artificielle lisant les e-mails. Face à cette menace inédite, il est urgent de comprendre les mécanismes exploités et les parades possibles.

Attaques CSS sur les webmails : le principe de l’évasion de contenu

Les attaques reposent sur deux grandes approches. La première consiste à abuser des éléments HTML et CSS que le webmail autorise déjà. Par exemple, les balises <label> peuvent être utilisées pour cibler des contrôles en dehors du message grâce à l’attribut for. Les attributs personnalisés (data-*) peuvent être transformés en nouveaux nœuds DOM par le JavaScript de l’application, qui les interprète comme du code valide. La seconde approche exploite un décalage entre ce que le sanitizer accepte et ce que le navigateur ou l’application interprète finalement. Ce décalage permet de faire passer du code malveillant qui sera exécuté dans le contexte de confiance de l’interface du webmail.

Un exemple de ce décalage est l’utilisation d’un backslash échappé dans une URL d’image. Le sanitizer peut considérer l’URL comme valide et autorisée, mais le navigateur l’interprète différemment, permettant de charger une image depuis un domaine contrôlé par l’attaquant. Cette technique a été utilisée pour contourner le proxy d’images de Fastmail.

Dans le cas d’Outlook, la combinaison de plusieurs techniques aboutit à une capture de mot de passe en temps réel. Un élément <select> est déguisé en champ de saisie de mot de passe, et une astuce de media query permet de réinitialiser le timer de sélection à chaque fois que l’élément sort de l’écran, rendant la capture instantanée. Ce type d’attaque montre comment des fonctionnalités CSS légitimes peuvent être détournées pour des fins malveillantes.

Le CSS (Cascading Style Sheets) est un langage de style utilisé pour décrire la présentation d’un document HTML. Dans le contexte des e-mails, il est souvent limité pour des raisons de sécurité, mais les chercheurs ont montré que ces limitations peuvent être contournées.

« Le problème fondamental est que le HTML et le CSS autorisés dans les e-mails peuvent être détournés pour interagir avec l’interface du webmail. » - Gareth Heyes

Les chercheurs ont identifié deux voies principales :

• Abus des fonctionnalités autorisées : le webmail autorise certains éléments HTML et CSS qui peuvent être détournés. Par exemple, les balises <label> peuvent cibler des éléments en dehors du message grâce à l’attribut for. Les attributs personnalisés (data-*) peuvent être transformés en nouveaux nœuds DOM par le JavaScript de l’application.
• Contournement du sanitizer : il existe un décalage entre ce que le filtre de nettoyage accepte et ce que le navigateur interprète. Par exemple, un backslash échappé dans une URL peut être interprété différemment par le sanitizer et le navigateur, permettant de faire passer une requête d’image vers un domaine autorisé.

Les chaînes d’attaque démontrées : de la capture de mot de passe au détournement de jeton

Outlook/Firefox : capture de mot de passe en temps réel

La chaîne d’attaque la plus complète concerne Outlook avec le navigateur Firefox. Tout commence par l’envoi d’un e-mail contenant une balise <label> qui cible un contrôle situé en dehors du message. Parallèlement, le JavaScript d’Outlook transforme des attributs personnalisés (pourtant nettoyés) en nouveaux nœuds DOM, ce qui permet d’injecter du CSS arbitraire. Une astuce de media query (parsing trick) donne ensuite à l’attaquant un contrôle total sur les styles. Le chercheur a utilisé ce CSS pour transformer un élément <select> en un faux champ de mot de passe, imitant l’écran de connexion Microsoft. Grâce à une media query qui réinitialise le timer de sélection de Firefox à chaque déplacement de l’élément hors de l’écran, la saisie de la victime est capturée caractère par caractère en temps réel.

Cette attaque est particulièrement dangereuse car elle ne nécessite aucune interaction de la part de l’utilisateur autre que l’ouverture de l’e-mail. Le faux champ de mot de passe apparaît de manière convaincante dans l’interface d’Outlook, et la victime peut être amenée à saisir son mot de passe Microsoft sans se douter de rien.

Yahoo/AOL : vol de jeton par paste race

Une autre technique exploite le collage de contenu HTML dans les brouillons de Yahoo Mail ou AOL Mail. Sous Firefox, le HTML collé conserve temporairement du CSS actif avant d’être nettoyé par le sanitizer. L’attaquant peut ainsi initier un flux de connexion par e-mail (par exemple, pour Medium) et demander à la victime de copier un CSS malveillant puis de le coller dans un brouillon. Les requêtes générées par ce CSS révèlent suffisamment de caractères du jeton de connexion (12 caractères) pour permettre à l’attaquant de le reconstruire et de se connecter au compte de la victime. Cette technique, appelée paste race, repose sur la fenêtre de temps entre le collage et la sanitisation.

Le chercheur a démontré que cette méthode fonctionne même si la victime ne clique sur aucun lien. Il suffit qu’elle copie et colle le contenu fourni par l’attaquant. Cela montre l’importance de ne jamais copier-coller du contenu non fiable dans un webmail.

IA et webmails : injection de prompts et manipulation d’assistants

L’essor des assistants IA connectés aux e-mails ouvre une nouvelle surface d’attaque. Gmail, combiné à l’outil Anthropic Claude Cowork, peut être victime d’une injection indirecte de prompts. L’attaquant envoie un e-mail contenant des instructions cachées dans le CSS (via la propriété image-set()). Lorsque l’utilisateur demande à Cowork de traiter ses e-mails, l’IA exécute les instructions et place un jeton Slack dans un brouillon HTML. La simple visualisation de ce brouillon par l’utilisateur suffit à fuiter le jeton vers le serveur de l’attaquant.

De même, Fastmail a été utilisé pour cibler l’IA Atlas d’OpenAI (aujourd’hui abandonnée). Des pseudo-éléments CSS et des opacités permettent de montrer un texte anodin à l’humain tout en cachant des instructions pour l’IA. Lorsque l’utilisateur demande une traduction, l’IA exécute les instructions cachées et ouvre des onglets contenant des données personnelles.

Enfin, Proton Mail exposait l’adresse IP du destinataire via un vecteur CSS, ce qui contredit sa politique de protection de la vie privée. Le chercheur note que Fastmail a corrigé deux bugs de mutation CSS et que le contournement du proxy de Proton Mail ne fonctionnait plus lors des tests ultérieurs. Cependant, les attaques sur Outlook et Gmail n’étaient pas encore corrigées au moment de la publication (6 août 2026).

Ces exemples montrent que les webmails doivent non seulement protéger contre les attaques classiques, mais aussi contre les manipulations d’IA, un domaine encore peu exploré.

Impact sur les utilisateurs et les entreprises : quels risques concrets ?

Les conséquences de ces attaques sont potentiellement graves. Pour un particulier, la capture du mot de passe de sa messagerie principale peut donner accès à l’ensemble de ses comptes en ligne (banque, réseaux sociaux, services cloud). Pour une entreprise, le détournement d’un compte professionnel peut entraîner une fuite de données sensibles, une compromission de la chaîne d’approvisionnement ou une atteinte à la réputation.

Selon le rapport 2025 de l’ANSSI, 70 % des cyberattaques en France débutent par un e-mail. Les webmails étant largement utilisés dans les PME et les grandes entreprises, ces nouvelles techniques augmentent considérablement la surface d’attaque. En outre, l’utilisation croissante d’assistants IA connectés aux messageries (comme Cowork ou Copilot) crée de nouvelles opportunités pour les attaquants.

D’après une étude d’IBM, le coût moyen d’une violation de données en France est de 4,2 millions d’euros en 2025. Une attaque réussie sur un webmail d’entreprise pourrait donc avoir un impact financier majeur, sans compter les dommages réputationnels.

Le tableau ci-dessous résume les vulnérabilités identifiées par la recherche de PortSwigger :

« Ces attaques montrent que les défenses actuelles des webmails sont insuffisantes face à des techniques CSS créatives. » - Gareth Heyes.

En France, la CNIL pourrait considérer ces vulnérabilités comme des manquements à l’obligation de sécurité des données (RGPD). Les fournisseurs de webmail ont donc tout intérêt à déployer rapidement des correctifs. Les entreprises utilisant ces services doivent également évaluer les risques et mettre en place des mesures compensatoires.

Comment se protéger ? Recommandations pour les fournisseurs et les utilisateurs

Pour les fournisseurs de webmail

Les chercheurs de PortSwigger proposent plusieurs mesures de durcissement :

1. Isoler le contenu HTML des e-mails dans des iframes sandboxées. Cela empêche le code de l’e-mail d’accéder au DOM parent et d’interagir avec l’interface du webmail. L’iframe doit être configurée avec l’attribut sandbox sans allow-scripts ni allow-top-navigation.
2. Restreindre strictement le CSS autorisé : interdire les sélecteurs dangereux (comme :has(), :is(), les media queries, les @import, les image-set()). Utiliser une liste blanche de propriétés CSS et de valeurs autorisées.
3. Bloquer les attributs personnalisés (data-*) qui pourraient être transformés en nœuds DOM par le JavaScript de l’application. Si nécessaire, les valider rigoureusement.
4. Interdire les éléments <select>, <menu>, <label> dans les e-mails, ou les désactiver via l’attribut inert. Ces éléments sont rarement nécessaires dans un e-mail légitime.
5. Empêcher les requêtes d’images vers des domaines contrôlés par l’attaquant en utilisant un proxy d’images restrictif et en bloquant les redirections. Vérifier que les URLs d’images sont bien des images et non des pages HTML.
6. Valider rigoureusement les URLs et utiliser une liste blanche de caractères pour la validation CSS. Éviter les interprétations laxistes qui pourraient être contournées.

En pratique, nous avons observé que ces mesures, bien que contraignantes, sont efficaces pour prévenir la majorité des attaques par CSS. Les fournisseurs comme Fastmail ont déjà corrigé certaines failles, prouvant que des correctifs sont possibles. Cependant, la mise en œuvre peut être complexe en raison de la nécessité de maintenir la compatibilité avec les e-mails existants.

Pour les utilisateurs

En attendant que les webmails déploient des correctifs, vous pouvez adopter les bonnes pratiques suivantes :

• Utilisez un navigateur à jour : les attaques présentées utilisent Firefox, mais d’autres navigateurs pourraient être vulnérables. Les mises à jour de sécurité peuvent atténuer certains risques.
• Activez l’authentification multi-facteurs (MFA) sur tous vos comptes. Cela limite l’impact d’un vol de mot de passe, car l’attaquant aura besoin d’un second facteur.
• Utilisez un gestionnaire de mots de passe qui remplit automatiquement les champs. Cela réduit le risque de saisie manuelle dans un faux champ, car le gestionnaire remplit uniquement sur les formulaires authentiques.
• Ne copiez-collez pas de contenu inconnu dans vos brouillons de webmail, surtout si cela vous est demandé par un e-mail. Soyez particulièrement vigilant si l’on vous demande de coller du code CSS.
• Soyez prudent avec les assistants IA : désactivez les connexions automatiques à vos e-mails si vous ne les utilisez pas activement. Vérifiez les permissions accordées aux applications tierces.
• Surveillez les activités suspectes sur vos comptes (connexions inhabituelles, e-mails envoyés sans votre consentement). Activez les alertes de sécurité si disponibles.

« L’isolation stricte du contenu des e-mails est la seule façon de garantir que le code non fiable ne puisse pas interagir avec l’interface de confiance. » - Extrait des recommandations de l’étude.

Exemple de code CSS à risque

/* Exemple simplifié d'une media query utilisée pour réinitialiser le timer de sélection */
@media (max-width: 1000px) {
  select {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
}

Ce code, bien que légitime en apparence, peut être utilisé pour superposer un élément transparent sur un champ de saisie et capturer les frappes. Il illustre comment des fonctionnalités CSS standard peuvent être détournées.

Que faire en cas de compromission ?

Si vous pensez avoir été victime d’une attaque CSS sur votre webmail, voici les étapes à suivre :

1. Changez immédiatement votre mot de passe depuis un appareil sécurisé et en utilisant une connexion de confiance.
2. Activez ou vérifiez l’authentification multi-facteurs sur votre compte.
3. Vérifiez les activités récentes de votre compte (connexions, e-mails envoyés, paramètres modifiés).
4. Contactez le support du webmail pour signaler l’incident et demander de l’aide.
5. Informez votre entreprise si vous utilisez un compte professionnel, car cela peut avoir des implications plus larges.

Conclusion : une vigilance accrue s’impose

Les attaques CSS sur les webmails révélées par Gareth Heyes marquent une étape importante dans l’évolution des menaces en ligne. Bien qu’il s’agisse de preuves de concept, elles démontrent que les mécanismes de sécurité actuels ne suffisent pas à protéger les utilisateurs. Les fournisseurs de messagerie doivent réagir rapidement en isolant le contenu des e-mails et en durcissant les règles CSS. En tant qu’utilisateur, vous pouvez dès aujourd’hui renforcer votre sécurité en suivant les recommandations ci-dessus. La cybersécurité est l’affaire de tous : restez informé, restez vigilant.

Pour aller plus loin, nous vous invitons à consulter les ressources de l’ANSSI et les publications de PortSwigger sur ce sujet. La recherche en sécurité est essentielle pour anticiper les menaces de demain. N’hésitez pas à partager cet article avec vos collègues et à engager la conversation sur la sécurité des webmails dans votre organisation.