Pertanyaan wawancara front-end 50 (Langkah-langkah keamanan front-end umum apa yang dapat mencegah serangan CSRF?)

2024-07-12

Masukkan deskripsi gambar di sini
Untuk mencegah serangan Pemalsuan Permintaan Lintas Situs (CSRF), langkah-langkah keamanan umum berikut dapat diambil dalam pengembangan front-end:

1. Gunakan Token CSRF

Ini adalah salah satu mekanisme pertahanan yang paling umum digunakan.

Hasilkan Token: Setelah pengguna masuk, server menghasilkan Token CSRF yang acak dan tidak dapat diprediksi dan menyimpannya di sisi server. Pada saat yang sama, token tersebut dikirim ke klien melalui header Set-Cookie dan disimpan di Cookie pengguna.
Bentuk Token yang tertanam: Di setiap formulir HTML yang memerlukan perlindungan, tambahkan bidang tersembunyi (<input type="hidden">), nilainya diatur ke Token CSRF yang dibaca dari cookie.
VerifikasiToken : Saat formulir dikirimkan, backend akan menerima data formulir dan Token dalam cookie (karena kebijakan asal yang sama, browser akan secara otomatis mengirimkan cookie). Sisi server memverifikasi apakah Token dalam bentuk konsisten dengan Token yang disimpan di sisi server atau di Sesi. Jika tidak konsisten, permintaan ditolak.

2. Verifikasi Referer HTTP dan Header Asal

Meskipun tidak sepenuhnya dapat diandalkan karena Referer dan Asal mungkin dirusak atau hilang, ini masih dapat digunakan sebagai alat bantu dalam beberapa skenario.

Periksa Referensi : Verifikasi bidang Referer di header permintaan HTTP untuk memastikan bahwa permintaan dimulai dari nama domain yang diharapkan. Namun perlu diperhatikan bahwa cara ini memiliki keterbatasan. Misalnya pada permintaan downgrade dari HTTPS ke HTTP, Referer tidak akan dikirimkan.
Periksa Header Asal: Mirip dengan Referer, header Asal memberikan informasi tentang sumber permintaan, tetapi hanya dikirim saat menggunakan XMLHttpRequest atau Fetch API.

3. Gunakan atribut Cookie SameSite

Untuk cookie yang tidak memerlukan akses lintas situs, atribut SameSite dapat diatur untuk meningkatkan keamanan.

SameSite=Lax: Cookie hanya dikirim dalam permintaan situs yang sama, sebagian melindungi dari CSRF.
SameSite=Ketat: Cookie hanya dikirim dalam situs yang sama dan dalam navigasi halaman yang sama, memberikan perlindungan yang lebih kuat, namun dapat memengaruhi beberapa fungsi lintas subdomain yang diharapkan.
SameSite=Tidak Ada: Perlu digunakan dengan atribut Aman untuk cookie yang harus bersifat lintas situs agar dapat beradaptasi dengan persyaratan browser modern.

4. Verifikasi header permintaan khusus

Tambahkan header HTTP khusus ke permintaan AJAX (sepertiX-Requested-With: XMLHttpRequest ), lalu verifikasi keberadaan dan nilai header ini di sisi server. Karena JavaScript dapat dengan bebas mengatur header XMLHttpRequest, tetapi pengiriman formulir biasa tidak bisa, hal ini dapat membedakan permintaan yang dimulai oleh skrip.

Contoh kode (implementasi Token CSRF):

Sisi server (kodesemu):

// 生成并设置Token
function generateCsrfToken() {
    return crypto.randomBytes(32).toString('hex');
}

app.post('/login', (req, res) => {
    const token = generateCsrfToken();
    res.cookie('csrfToken', token, { httpOnly: true, secure: true, sameSite: 'strict' });
    // 存储token到session或其他存储机制
});

app.post('/submitForm', (req, res) => {
    if (req.body.csrfToken === req.cookies.csrfToken) {
        // 请求合法，处理逻辑...
    } else {
        // CSRF攻击检测，拒绝请求
        res.status(403).send('Forbidden');
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

HTML ujung depan:

<form action="/submitForm" method="POST">
    <!-- 其他表单字段... -->
    <input type="hidden" name="csrfToken" value="{{csrfToken}}">
    <button type="submit">Submit</button>
</form>
1
2
3
4
5

Harap diperhatikan bahwa kode di atas hanyalah contoh, dan aplikasi sebenarnya perlu disesuaikan dengan kerangka backend dan bahasa yang digunakan.

Berbagi teknologi