Maison > Article > interface Web > Protéger vos applications JavaScript contre les attaques XSS basées sur DOM

Protéger vos applications JavaScript contre les attaques XSS basées sur DOM

WBOYoriginal: 2024-07-24 16:00:431067parcourir

Protecting Your JavaScript Applications from DOM-based XSS Attacks

Les attaques de type cross-site scripting (XSS) sont une vulnérabilité courante dans les applications Web, et l'un des types les plus dangereux est le XSS basé sur DOM. Cette forme de XSS se produit lorsque le modèle objet de document (DOM) d'une page Web est manipulé pour exécuter des scripts malveillants. Dans ce blog, nous explorerons le XSS basé sur DOM, son fonctionnement et la manière dont vous pouvez protéger vos applications contre ces attaques avec un exemple de code concret.

Qu’est-ce que XSS basé sur DOM ?

Le XSS basé sur DOM est un type d'attaque XSS où la vulnérabilité réside dans le code côté client plutôt que dans le code côté serveur. Cela se produit lorsqu'une application Web utilise des données provenant d'une source non fiable, telle qu'une entrée utilisateur, et les écrit dans le DOM sans validation ni échappement appropriés. Cela peut conduire à l'exécution de scripts malveillants dans le contexte de la page Web, permettant aux attaquants de voler des données, de détourner des sessions, etc.

Comment fonctionne XSS basé sur DOM

Décomposons un scénario simple pour comprendre comment un attaquant pourrait exploiter le XSS basé sur DOM :

Exemple d'application Web vulnérable
Prenons l'exemple d'une simple page Web qui affiche un message de bienvenue à l'aide de la saisie utilisateur à partir du hachage de l'URL.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM-based XSS Example</title>
</head>
<body>
    <div id="message"></div>
    <script>
        // Assume user input is taken from the URL hash
        var userInput = window.location.hash.substring(1);
        // Directly inserting user input into the DOM
        document.getElementById('message').innerHTML = "Hello, " + userInput + "!";
    </script>
</body>
</html>

Comment un attaquant exploite la vulnérabilité

1. Création d'une URL malveillante : Un attaquant peut créer une URL qui inclut du code JavaScript malveillant dans le hachage de l'URL. Par exemple :

https://xyz.com/#<script>alert('XSS');</script>

2. Partage de l'URL malveillante : L'attaquant partage cette URL avec des victimes potentielles, qui pourraient cliquer dessus sans soupçon. L'attaquant peut diffuser ce lien par e-mail, sur les réseaux sociaux ou par tout autre moyen.

3. Exploiter la vulnérabilité : Lorsqu'une victime visite l'URL malveillante, l'application Web extrait la valeur du hachage de l'URL et l'insère dans le DOM. Le script malveillant s'exécute dans le contexte de la page Web.

Résultat : La victime voit une boîte d'alerte avec le message 'XSS', indiquant que le script a été exécuté. Lors d'une attaque réelle, le script malveillant pourrait effectuer des actions telles que voler des cookies, capturer des frappes au clavier ou rediriger l'utilisateur vers un site de phishing.

<script>
    // User visits: https://xyz.com/#&lt;script&gt;alert('XSS');&lt;/script&gt;
    var userInput = window.location.hash.substring(1);
    document.getElementById('message').innerHTML = "Hello, " + userInput + "!";
    // This results in: Hello, <script>alert('XSS');</script>!
    // The alert will pop up

Prévenir le XSS basé sur DOM

Pour vous protéger contre les XSS basés sur DOM, suivez ces bonnes pratiques :

1. Désinfecter et échapper aux entrées utilisateur : Désinfectez et échappez toujours à toute entrée utilisateur avant de l'insérer dans le DOM. Utilisez des bibliothèques comme DOMPurify pour nettoyer le HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.8/purify.min.js"></script>
<script>
    var userInput = window.location.hash.substring(1);
    // Sanitize the user input
    var sanitizedInput = DOMPurify.sanitize(userInput);
    // Insert sanitized input into the DOM
    document.getElementById('message').innerHTML = "Hello, " + sanitizedInput + "!";
</script>

2. Utilisez des méthodes de manipulation DOM sécurisées : Au lieu d'utiliser innerHTML, utilisez des méthodes plus sûres telles que textContent ou createElement et appendChild.

<script>
    var userInput = window.location.hash.substring(1);
    var messageDiv = document.getElementById('message');
    // Create a text node with the user input
    var textNode = document.createTextNode("Hello, " + userInput + "!");
    // Append the text node to the message div
    messageDiv.appendChild(textNode);
</script>

3. Politique de sécurité du contenu (CSP) : Implémentez un CSP solide pour restreindre les sources à partir desquelles les scripts peuvent être chargés et exécutés.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';">

Le XSS basé sur DOM constitue un risque de sécurité critique qui peut compromettre votre application Web et vos données utilisateur. En suivant les meilleures pratiques telles que la désinfection et l'échappement des entrées de l'utilisateur, l'utilisation de méthodes sécurisées de manipulation du DOM et la mise en œuvre d'une politique de sécurité du contenu robuste, vous pouvez réduire considérablement le risque d'attaques XSS basées sur le DOM.

Restez vigilant et assurez-vous que vos applications JavaScript sont sécurisées contre ces vulnérabilités et d'autres. Si vous avez des questions ou avez besoin d'aide supplémentaire, n'hésitez pas à nous contacter dans les commentaires ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html xss Object if for Sanitizing break restrict using dom this innerHTML alert input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Les différences entre &#Object&#, &#{}&# et &#object&# dans TypeScriptArticle suivant：Les différences entre &#Object&#, &#{}&# et &#object&# dans TypeScript

Articles Liés

Voir plus