Rumah >hujung hadapan web >tutorial js >Mencegah Serangan Clickjacking dalam JavaScript

Mencegah Serangan Clickjacking dalam JavaScript

WBOYasal: 2024-07-22 17:56:391073semak imbas

Preventing Clickjacking Attacks in JavaScript

Clickjacking, juga dikenali sebagai pembetulan UI, ialah sejenis serangan di mana pelakon berniat jahat menipu pengguna supaya mengklik sesuatu yang berbeza daripada apa yang mereka anggap dengan membenamkan halaman web dalam iframe. Ini boleh membawa kepada tindakan yang tidak dibenarkan dan menjejaskan keselamatan pengguna. Dalam blog ini, kami akan meneroka cara mencegah serangan clickjacking menggunakan JavaScript dan konfigurasi pelayan untuk Apache dan Nginx, bersama-sama dengan contoh yang mesra pengguna.

Memahami Clickjacking

Clickjacking melibatkan meletakkan iframe lutsinar atau legap pada elemen halaman web yang sah, menyebabkan pengguna melakukan tindakan secara tidak sedar seperti menukar tetapan atau memindahkan dana.

Contoh Dunia Nyata

Pertimbangkan senario di mana penyerang membenamkan iframe tersembunyi daripada tapak perbankan ke dalam halaman web yang dipercayai. Apabila pengguna mengklik butang yang kelihatan tidak berbahaya, mereka mungkin benar-benar membenarkan transaksi bank.

Berikut ialah contoh halaman yang terdedah:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clickjacking Example</title>
</head>
<body>
    <h1>Welcome to Our Site</h1>
    <button onclick="alert('Clicked!')">Click Me</button>
    <iframe src="https://example-bank.com/transfer" style="opacity:0; position:absolute; top:0; left:0; width:100%; height:100%;"></iframe>
</body>
</html>

Mencegah Clickjacking dengan JavaScript

Untuk mengelakkan serangan clickjacking, anda boleh menggunakan JavaScript untuk memastikan tapak web anda tidak dibingkaikan. Berikut ialah panduan langkah demi langkah tentang cara melaksanakan perlindungan ini:

1. Pemusnahan Bingkai JavaScript
Pemusnahan bingkai melibatkan penggunaan JavaScript untuk mengesan sama ada tapak web anda dimuatkan di dalam iframe dan keluar daripadanya.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame Busting Example</title>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.self.location;
        }
    </script>
</head>
<body>
    <h1>Secure Site</h1>
    <p>This site is protected from clickjacking attacks.</p>
</body>
</html>

Dalam contoh ini, JavaScript menyemak sama ada tetingkap semasa (window.self) bukan tetingkap paling atas (window.top). Jika tidak, ia mengubah hala tetingkap paling atas ke URL tetingkap semasa, dengan berkesan keluar daripada iframe.

2. Pembasmian Bingkai Dipertingkatkan dengan Pendengar Acara
Anda boleh mempertingkatkan lagi teknik penghapusan bingkai anda dengan menggunakan pendengar acara untuk terus menyemak sama ada halaman anda dibingkaikan.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Frame Busting</title>
    <script>
        function preventClickjacking() {
            if (window.top !== window.self) {
                window.top.location = window.self.location;
            }
        }

        window.addEventListener('DOMContentLoaded', preventClickjacking);
        window.addEventListener('load', preventClickjacking);
        window.addEventListener('resize', preventClickjacking);
    </script>
</head>
<body>
    <h1>Secure Site</h1>
    <p>This site is protected from clickjacking attacks.</p>
</body>
</html>

Dalam contoh ini, fungsi preventClickjacking dipanggil pada acara DOMContentLoaded, memuatkan dan mengubah saiz untuk memastikan perlindungan berterusan.

Perlindungan Bahagian Pelayan

Walaupun kaedah JavaScript berguna, melaksanakan perlindungan sisi pelayan menyediakan lapisan keselamatan tambahan. Begini cara untuk menyediakan pengepala HTTP dalam Apache dan Nginx untuk mengelakkan clickjacking:

1. Pengepala X-Frame-Options
Pengepala X-Frame-Options membolehkan anda menentukan sama ada tapak anda boleh dibenamkan dalam iframes. Terdapat tiga pilihan:

DAFTAR: Menghalang mana-mana domain daripada membenamkan halaman anda.
SAMEORIGIN: Membenarkan pembenaman hanya dari asal yang sama.
IZINKAN-DARI uri: Membenarkan pembenaman daripada URI yang ditentukan.
Contoh:

X-Frame-Options: DENY

Konfigurasi Apache
Tambahkan pengepala ini pada konfigurasi pelayan anda:

# Apache
Header always set X-Frame-Options "DENY"

Konfigurasi Nginx
Tambahkan pengepala ini pada konfigurasi pelayan anda:

2. Leluhur Bingkai Kandungan-Keselamatan-Dasar (CSP)
CSP menyediakan pendekatan yang lebih fleksibel melalui arahan frame-nenek moyang, yang menentukan ibu bapa yang sah yang mungkin membenamkan halaman menggunakan iframe.

Contoh:

Content-Security-Policy: frame-ancestors 'self'

Konfigurasi Apache
Tambahkan pengepala ini pada konfigurasi pelayan anda:

Contoh:

# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"

Konfigurasi Nginx
Tambahkan pengepala ini pada konfigurasi pelayan anda:

# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'";

Kesimpulan

Clickjacking ialah ancaman serius kepada keselamatan web, tetapi dengan melaksanakan teknik penghapusan bingkai JavaScript dan perlindungan sisi pelayan seperti pengepala X-Frame-Options dan Content-Security-Policy, anda boleh melindungi aplikasi web anda dengan berkesan. Gunakan contoh yang disediakan untuk meningkatkan keselamatan tapak anda dan memberikan pengalaman yang lebih selamat untuk pengguna anda.

Atas ialah kandungan terperinci Mencegah Serangan Clickjacking dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript nginx if for while using Event function this apache http ui embedding iframe

Kenyataan：

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

Artikel sebelumnya：Segiempat Terbesar dalam HistogramArtikel seterusnya：Segiempat Terbesar dalam Histogram

Artikel berkaitan

Lihat lagi