Content-Security-Policy (CSP): apa itu dan cara menambahkannya
Content-Security-Policy (CSP) adalah header respons HTTP yang memberi tahu browser sumber script, style, dan konten lain mana yang boleh dimuat dan dijalankan. CSP yang baik adalah salah satu pertahanan terkuat terhadap cross-site scripting (XSS).
Apa itu
CSP adalah allowlist yang ditegakkan oleh browser. Saat servermu mengirim header Content-Security-Policy, browser menolak memuat atau menjalankan apa pun yang tidak diizinkan policy secara eksplisit — inline script, domain pihak ketiga, eval(), dan seterusnya.
Sebuah policy adalah daftar directive. Contohnya, script-src 'self' berarti "hanya jalankan JavaScript yang disajikan dari origin-ku sendiri", sementara object-src 'none' memblokir plugin lama sepenuhnya.
Kenapa penting
Tanpa CSP, bug HTML-injection atau XSS apa pun memungkinkan penyerang menjalankan JavaScript sembarang di browser penggunamu — mencuri sesi, menulis ulang halaman, atau mengekstrak data.
CSP yang lemah hampir sama buruknya dengan tidak ada sama sekali. 'unsafe-inline' kembali mengizinkan inline script yang diandalkan penyerang, dan sumber wildcard seperti script-src * membuat script bisa dimuat dari mana saja, sehingga tujuannya jadi sia-sia.
Cara memperbaiki
Set header di next.config.js agar berlaku untuk setiap respons. Mulai dari yang ketat dan longgarkan hanya di tempat yang diperlukan.
// next.config.js
const csp = [
"default-src 'self'",
"script-src 'self'",
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data:",
"base-uri 'none'",
"frame-ancestors 'none'",
"object-src 'none'",
].join("; ");
module.exports = {
async headers() {
return [{ source: "/:path*", headers: [{ key: "Content-Security-Policy", value: csp }] }];
},
};Kalau kamu butuh inline script, buat nonce per-request dan tambahkan ke tag script sekaligus ke policy (script-src 'self' 'nonce-<value>') alih-alih memakai 'unsafe-inline'.
base-uri 'none', frame-ancestors 'none', dan object-src 'none' menutup celah bypass umum (injeksi tag base, clickjacking, dan penyematan plugin) dan merupakan default aman untuk kebanyakan aplikasi.
FAQ
Apakah CSP memperlambat situsku?
Tidak. CSP hanyalah header yang dievaluasi browser; tidak menambah latensi yang terukur. Biaya sebenarnya adalah pekerjaan teknis untuk menghapus inline script.
Apa bedanya Content-Security-Policy dan X-Frame-Options?
X-Frame-Options hanya mengatur framing (clickjacking). Directive frame-ancestors milik CSP menggantikannya, dan CSP juga mengatur script, style, gambar, dan lainnya.
Apakah aplikasimu terpengaruh?
AppSafe memeriksa ini dan puluhan masalah lain dalam satu pemindaian gratis.
Pindai aplikasiku gratis