3.2 [Basics] Attaques XSS : prévenir

Une attaque XSS est une injection de code malveillant opérée au sein d'une page web.

En tant que développeur·euse, comment s'en prémunir ? C'est ce que nous allons voir dans cette quête !

_Source : _Giphy

Objectifs

• Connaître le principe général d'une stratégie de prévention contre les attaques XSS
• Comprendre et mettre en œuvre un encodage de donnée basique

Conversation avec darkMereGrand_93, la suite

[Rappel : frustré·e de te faire *spoiler la dernière saison de Jeu des Trônes alors que tu campes dans une forêt à l’autre bout du monde, tu as décidé de créer un réseau social alternatif épuré de toutes allusions à des productions télévisuelles. Ta grand-mère, darkMereGrand_93, t'a alors interpellé·e sur les risques d'attaques XSS, ce qui t'a entraîné·e dans le monde merveilleux de la cyber-sécurité.]*

– Mais maintenant que tu sais comment casser des sites, est-ce que tu as au moins une idée de comment les protéger, ma petite caille digitale ?

Source : Photo by Noah Buscher on Unsplash

La voix de ta grand-mère résonne encore dans la visioconférence qui se coupe par manque de 3G tandis que tu croises les doigts pour que tes camarades de camping n'aient pas entendu le surnom qu'elle te donne...

... et que tu retournes lire des tutoriels de sécurité web.

En avant !

Utiliser un framework de développement

Aucune solution n'est parfaite, mais utiliser un framework moderne pour développer son site web permet de sécuriser automatiquement les données entrées par l'utilisateur. En effet, ces frameworks considèrent que toute donnée insérée dans le DOM est suspecte par défaut. Elles appliquent à cette dernière un encodage (encoding ou escaping en anglais – les deux termes sont équivalents) et un assainissement (sanitization en anglais) systématiques.

Sans plus attendre, saute sur la documentation officielle de ton framework préféré pour savoir si/comment celui-ci protège tes œuvres des attaques XSS !

Une stratégie de prévention en trois étapes

Pour tenter de prémunir au maximum son code des attaques XSS, un·e développeur·euse doit mettre en place trois étapes de défense :

1. Encoder la donnée entrée.

2. Valider la donnée entrée.

3. Si la donnée n'est pas validée, la rejeter ou l'assainir.

Pour mieux comprendre ce processus général, lis cet article, de la partie « Methods of preventing XSS » jusqu'à « Encoding ».

Dans cette quête basics, on s'intéressera uniquement à l'encodage des données. Pour le reste des étapes de défense, vas voir du côté de la quête advanced.

Encoder une donnée (on parle aussi d'input), c'est convertir ses caractères dans un autre format que son format d'origine. Consulte la partie « Encoding » de l'article précédent pour en savoir plus.

Okay pour la théorie ! Mais concrètement parlant, comment fait-on ?

En Javascript, il existe des méthodes d'encodage natives très simples.

Ainsi, si l'input entré par l'utilisateur est destiné à être inséré dans une div (ex : <div> INPUT INSÉRÉ </div>), l'OWASP recommande d'utiliser certaines méthodes et d'en éviter d'autres.

Challenge

Sauvez cette page !

Prouve à darkMereGrand_93, ta grand-mère hacktiviste, que tu as compris les bases de l'encodage des données pour la prévention des attaques XSS en sécurisant cette mini page web.

1. Clone le repo.
2. Dans un premier temps, essaie d'exploiter la faille XSS seul·e de manière à afficher une alerte dans le navigateur. Si jamais tu sèches, vas voir l'index.html : la faille y est indiquée dans un commentaire commençant par « XSS vulnerability ».
3. Sécurise la faille en utilisant la technique d'encodage de ton choix.
4. Envoie le projet vers ton dépôt distant et partage le lien en solution.

Critères de validation

• L'input initialement présent a été conservé et fonctionne.
• Le hack décrit dans le commentaires commençant par « XSS vulnerability » ne fonctionne plus.