Kebijakan Keamanan Konten untuk Aplikasi React

Kebijakan Keamanan Konten (CSP) adalah header respons HTTP yang memberi tahu peramban sumber konten mana yang tepercaya. Dengan menyatakan secara tepat skrip, gaya, gambar, dan fon mana yang boleh dimuat, CSP mencegah konten berbahaya yang disisipkan agar tidak dieksekusi—bahkan jika kerentanan XSS memungkinkan penyerang menyisipkan HTML ke halaman.

default-src 'self' menetapkan dasar: semua jenis sumber daya (skrip, gaya, gambar, fon, bingkai) hanya boleh dimuat dari asal yang sama. script-src 'self' mempersempit pemuatan skrip agar hanya berasal dari asal yang sama, sehingga skrip dari CDN eksternal diblokir kecuali dicantumkan secara eksplisit. Kedua direktif ini bersama-sama menjadi dasar CSP yang ketat.

eval() mengubah string menjadi kode yang dapat dieksekusi saat program berjalan—tepat seperti yang dibutuhkan muatan XSS. CSP dengan script-src 'self' (tanpa 'unsafe-eval') memblokir eval() dan fungsi terkait seperti new Function() dan setTimeout(string). Hal ini menghilangkan kelas utama eksekusi muatan XSS.

'strict-dynamic' dalam script-src memberikan kepercayaan kepada skrip yang dimuat oleh skrip yang sudah tepercaya. Hal ini memungkinkan pola pemuatan skrip dinamis yang digunakan alat pembundel tanpa mengharuskan Anda memasukkan setiap URL CDN ke daftar izin. Skrip tepercaya dapat memuat skrip tambahan, dan skrip tersebut mewarisi kepercayaan.

Jika aplikasi Anda memerlukan skrip sebaris tertentu (seperti potongan inisialisasi analitik), Anda dapat menghitung ringkasan SHA-256-nya dan menambahkan 'sha256-base64hash' ke script-src. Hanya skrip yang cocok dengan ringkasan tersebut yang diizinkan untuk dieksekusi secara sebaris. Skrip apa pun yang disisipkan penyerang akan memiliki ringkasan berbeda dan diblokir.

Nilai sekali pakai adalah nilai acak yang dihasilkan server secara kriptografis untuk setiap permintaan. Server menambahkan nilai tersebut ke tag skrip (<script nonce="abc123">) dan header CSP (script-src 'nonce-abc123'). Hanya skrip yang memuat nilai sekali pakai yang benar yang akan dieksekusi. Penyerang tidak dapat memprediksi nilai tersebut, sehingga skrip yang disisipkan tidak dapat menggunakannya.

CSP mendukung pelaporan pelanggaran melalui report-uri /csp-violation-endpoint atau direktif report-to yang lebih baru. Saat peramban memblokir sumber daya karena CSP, peramban mengirimkan laporan JSON ke titik akhir tersebut. Memantau laporan ini membantu Anda mengidentifikasi masalah konfigurasi yang sah maupun upaya serangan yang sedang berlangsung.

Di Next.js, tambahkan header CSP di lapisan perantara: buat middleware.ts, hasilkan nilai sekali pakai, tetapkan header Content-Security-Policy, lalu teruskan nilai tersebut ke halaman melalui header respons. Tata letak halaman membaca nilai tersebut dari header dan menerapkannya ke semua skrip sebaris serta tag gaya.

Content-Security-Policy-Report-Only adalah mode pengujian: peramban tidak menegakkan apa pun, tetapi mengirimkan laporan pelanggaran untuk semua hal yang seharusnya diblokir. Terapkan mode Hanya Laporan terlebih dahulu, perbaiki semua pelanggaran, lalu beralih ke header Content-Security-Policy yang menegakkan aturan agar aplikasi tidak rusak.

Saat CSP memblokir sumber daya, konsol Chrome DevTools menampilkan pesan kesalahan berwarna merah yang mengidentifikasi URL yang diblokir dan direktif yang dilanggar. Pesan-pesan ini sangat berguna selama pengembangan dan pengujian. Setiap pelanggaran harus diselesaikan dengan memperbaiki kebijakan, memindahkan sumber daya ke sumber yang diizinkan, atau menggunakan nilai sekali pakai atau ringkasan.

CSP praktis untuk SPA React: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. frame-ancestors 'none' juga mencegah pembajakan klik dengan memblokir penyematan aplikasi Anda dalam iframe.

Apa yang dicegah oleh script-src 'self' dalam Kebijakan Keamanan Konten?

CSP adalah header HTTP yang menyatakan sumber konten tepercaya. default-src 'self' dan script-src 'self' memblokir skrip eksternal dan eval. Skrip sebaris diizinkan melalui ringkasan atau nilai sekali pakai. 'strict-dynamic' mendukung pemuatan skrip dinamis. Gunakan Content-Security-Policy-Report-Only untuk menguji sebelum menegakkan aturan. Next.js menerapkan CSP melalui perantara. Konsol DevTools menampilkan pelanggaran secara waktu nyata.