Cara menggunakan Nginx untuk mengkonfigurasi dasar asal yang sama untuk melindungi keselamatan bahagian hadapan

Memandangkan kerumitan aplikasi bahagian hadapan terus meningkat, isu keselamatan aplikasi web menjadi semakin penting. Dasar asal yang sama ialah langkah keselamatan yang penting untuk mengelakkan isu keselamatan seperti serangan skrip merentas tapak. Nginx ialah perisian pelayan web yang berkuasa Artikel ini akan memperkenalkan cara menggunakan Nginx untuk mengkonfigurasi dasar asal yang sama untuk melindungi keselamatan bahagian hadapan.

1. Dasar asal sama

Dasar asal sama ialah prinsip keselamatan dalam pembangunan web, yang digunakan untuk menyekat cara dokumen atau skrip di bawah satu nama domain berinteraksi dengan sumber di bawah domain lain nama. Homologi bermaksud bahawa protokol, nama domain dan port adalah sama, yang dipanggil "konsisten sepenuhnya".

Dasar asal yang sama boleh menghalang serangan berniat jahat antara tapak web. Contohnya, penggodam boleh menulis program JavaScript yang berniat jahat dan membenamkannya ke dalam beberapa halaman web Apabila pengguna melawat halaman web ini, program JavaScript akan mencuri maklumat sensitif daripada komputer pengguna.

2. Konfigurasi asal yang sama bagi Nginx

Salah satu cara untuk mengkonfigurasi dasar asal yang sama ialah menggunakan fungsi proksi terbalik Nginx. Proksi terbalik ialah pelayan proksi yang terletak di bahagian pelayan yang proksi sambungan antara klien dan pelayan dan mengasingkan permintaan daripada sumber yang berbeza.

Berikut akan memperkenalkan cara menggunakan Nginx untuk mengkonfigurasi dasar asal yang sama untuk melindungi keselamatan bahagian hadapan:

1. Mengkonfigurasi Nginx
   Pertama, anda perlu menambah yang berikut kandungan pada fail konfigurasi Nginx:

lokasi / {

add_header 'Access-Control-Allow-Origin' 'http://localhost:8080'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

}

Coretan fail konfigurasi ini memberi kami maklumat berikut:

Akses -Control-Allow-Origin: Menentukan akses yang dibenarkan URI domain luaran sumber ini boleh ditetapkan kepada *.

Access-Control-Allow-Credentials: Menentukan sama ada permintaan yang membenarkan akses merentas domain dibenarkan untuk membawa maklumat identiti.

Access-Control-Allow-Methods: Tentukan kaedah permintaan HTTP yang dibenarkan.

Access-Control-Allow-Headers: Tentukan medan pengepala permintaan yang dibenarkan.

2. Mengkonfigurasi aplikasi bahagian hadapan
   Seterusnya, tambahkan yang berikut pada kod JavaScript aplikasi bahagian hadapan:

var xhr = XMLHttpRequest() baharu ;
xhr .open('POST', 'http://localhost:8080/api/save', true);
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type' , 'application/json ');
xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); }

};
xhr.send(JSON.stringify({name: 'John', umur: 26} ));

Kod ini menggunakan objek XMLHttpRequest untuk memulakan permintaan POST URI permintaan ialah http://localhost:8080/api/save, di mana atribut withCredentials ditetapkan kepada benar, menunjukkan bahawa permintaan boleh membawa maklumat identiti.

3. Uji apl
   Akhir sekali, lancarkan apl dan lawati halaman apl bahagian hadapan. Dalam alat pembangun penyemak imbas, anda boleh melihat bahawa pengepala permintaan mengandungi maklumat seperti Access-Control-Allow-Origin dan Access-Control-Allow-Credentials, yang mengesahkan ketepatan konfigurasi Nginx.

Melalui langkah di atas, anda boleh menggunakan Nginx untuk mengkonfigurasi dasar asal yang sama untuk melindungi keselamatan bahagian hadapan.

3. Ringkasan

Dasar asal yang sama ialah langkah keselamatan yang penting dalam pembangunan web, dan Nginx boleh membantu kami mengkonfigurasi dasar asal yang sama. Dalam aplikasi sebenar, selain mengkonfigurasi dasar asal yang sama, kami juga perlu menggunakan langkah keselamatan lain, seperti daftar masuk tunggal SSO, pencegahan CSRF, pencegahan XSS, dll., untuk memastikan keselamatan aplikasi web.

Atas ialah kandungan terperinci Cara menggunakan Nginx untuk mengkonfigurasi dasar asal yang sama untuk melindungi keselamatan bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!