Melindungi Aplikasi JavaScript Anda daripada Serangan XSS berasaskan DOM-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Melindungi Aplikasi JavaScript Anda daripada Serangan XSS berasaskan DOM

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 24, 2024 pm 04:00 PM

Protecting Your JavaScript Applications from DOM-based XSS Attacks

Serangan skrip merentas tapak (XSS) ialah kerentanan biasa dalam aplikasi web, dan salah satu jenis yang paling berbahaya ialah XSS berasaskan DOM. Bentuk XSS ini berlaku apabila Model Objek Dokumen (DOM) halaman web dimanipulasi untuk melaksanakan skrip berniat jahat. Dalam blog ini, kami akan meneroka XSS berasaskan DOM, cara ia berfungsi dan cara anda boleh melindungi aplikasi anda daripada serangan ini dengan kod contoh dunia sebenar.

Apakah XSS berasaskan DOM?

XSS berasaskan DOM ialah sejenis serangan XSS di mana kelemahan terletak pada kod sebelah klien dan bukannya kod sebelah pelayan. Ia berlaku apabila aplikasi web menggunakan data daripada sumber yang tidak dipercayai, seperti input pengguna, dan menulisnya ke DOM tanpa pengesahan yang betul atau melarikan diri. Ini boleh membawa kepada pelaksanaan skrip berniat jahat dalam konteks halaman web, membenarkan penyerang mencuri data, merampas sesi dan banyak lagi.

Cara XSS berasaskan DOM Berfungsi

Mari kita pecahkan senario mudah untuk memahami cara penyerang boleh mengeksploitasi XSS berasaskan DOM:

Contoh Aplikasi Web Rentan
Pertimbangkan halaman web ringkas yang memaparkan mesej ucapan menggunakan input pengguna daripada cincang 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>

Salin selepas log masuk

Bagaimana Penyerang Memanfaatkan Kerentanan

1. Membuat URL Berniat Hasad: Penyerang boleh mencipta URL yang menyertakan kod JavaScript hasad dalam cincang URL. Contohnya:

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

Salin selepas log masuk

2. Berkongsi URL Hasad: Penyerang berkongsi URL ini dengan bakal mangsa, yang mungkin mengklik padanya tanpa syak wasangka. Penyerang boleh mengedarkan pautan ini melalui e-mel, media sosial atau sebarang cara lain.

3. Memanfaatkan Kerentanan: Apabila mangsa melawati URL hasad, aplikasi web mengekstrak nilai daripada cincang URL dan memasukkannya ke dalam DOM. Skrip berniat jahat dilaksanakan dalam konteks halaman web.

Keputusan: Mangsa melihat kotak amaran dengan mesej 'XSS', menunjukkan bahawa skrip telah dilaksanakan. Dalam serangan sebenar, skrip berniat jahat boleh melakukan tindakan seperti mencuri kuki, menangkap ketukan kekunci atau mengubah hala pengguna ke tapak pancingan data.

<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

Salin selepas log masuk

Menghalang XSS berasaskan DOM

Untuk melindungi daripada XSS berasaskan DOM, ikuti amalan terbaik ini:

1. Bersihkan dan Keluarkan Input Pengguna: Sentiasa bersihkan dan elakkan sebarang input pengguna sebelum memasukkannya ke dalam DOM. Gunakan perpustakaan seperti DOMPurify untuk membersihkan 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>

Salin selepas log masuk

2. Gunakan Kaedah Manipulasi DOM Selamat: Daripada menggunakan innerHTML, gunakan kaedah yang lebih selamat seperti textContent atau createElement dan 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>

Salin selepas log masuk

3. Dasar Keselamatan Kandungan (CSP): Laksanakan CSP yang kukuh untuk menyekat sumber dari mana skrip boleh dimuatkan dan dilaksanakan.

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

Salin selepas log masuk

XSS berasaskan DOM ialah risiko keselamatan kritikal yang boleh menjejaskan aplikasi web dan data pengguna anda. Dengan mengikuti amalan terbaik seperti membersihkan dan melepaskan input pengguna, menggunakan kaedah manipulasi DOM yang selamat dan melaksanakan Dasar Keselamatan Kandungan yang teguh, anda boleh mengurangkan risiko serangan XSS berasaskan DOM dengan ketara.

Kekal berwaspada dan pastikan aplikasi JavaScript anda selamat daripada ini dan kelemahan lain. Jika anda mempunyai sebarang soalan atau memerlukan bantuan lanjut, sila hubungi dalam ulasan di bawah.

Atas ialah kandungan terperinci Melindungi Aplikasi JavaScript Anda daripada Serangan XSS berasaskan DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn