Generator CSP Header

Generator CSP header ini membangun header Content-Security-Policy secara visual, sehingga Anda bisa mengunci script, style, gambar, dan resource lain mana saja yang boleh dimuat oleh browser. Aktifkan directive yang Anda perlukan, klik sumber yang Anda percayai, dan header siap pakai langsung muncul — tinggal tempel ke web server Anda.

Content-Security-Policy adalah pertahanan terdepan Anda terhadap cross-site scripting (XSS), clickjacking, dan serangan injeksi lainnya. Tanpa CSP, browser memuat resource dari origin mana pun; dengan policy yang tepat, hanya domain yang Anda izinkan yang boleh menyajikan konten. Pembangun ini mengubah policy itu menjadi header siap salin dalam format persis yang dibutuhkan stack Anda — HTTP mentah, Apache, Nginx, tag meta HTML, atau panggilan header() PHP.

Privat sejak awal: seluruh policy disusun di browser Anda. Directive, domain kustom, dan header yang dihasilkan tidak pernah diunggah ke server mana pun.

Cara Memakai Generator CSP Header

Pilih titik awal

Pilih preset untuk memuat konfigurasi umum — Ketat, Website Dasar, SPA + API, WordPress, E-commerce, atau CDN — atau mulai dari Kosong untuk membangun dari nol.

Atur directive

Aktifkan sebuah directive dengan mengklik sakelarnya atau baris judulnya. Lalu klik tombol sumber cepat seperti 'self', 'none', atau 'unsafe-inline', atau ketik domain kustom seperti cdn.example.com dan klik Tambah. Klik lagi sebuah sumber untuk menghapusnya.

Tinjau peringatan

Saat Anda membangun, alat ini menganalisis policy Anda dan menandai masalah — error merah untuk risiko nyata seperti object-src yang hilang atau sumber wildcard, peringatan kuning untuk titik lemah, dan catatan biru berisi konteks yang berguna.

Pilih format lalu salin

Ganti tab output ke Raw, Apache, Nginx, Meta Tag, atau PHP agar sesuai server Anda, lalu klik Salin. Aktifkan Report-Only dulu untuk menguji policy tanpa memblokir apa pun.

Fitur

Pembangun Directive Visual

Setiap directive adalah baris interaktif dengan sebuah sakelar. Aktifkan satu untuk membuka panel sumbernya berisi tombol tambah cepat dan input domain kustom.

17 Directive CSP

Mencakup semua directive umum di kategori Fetch, Document, Navigasi, dan Lainnya — dari default-src dan script-src hingga frame-ancestors dan report-uri.

Tombol Sumber Cepat

Satu klik menambahkan nilai umum: 'self', 'none', 'unsafe-inline', 'unsafe-eval', 'strict-dynamic', data:, blob:, dan https:.

7 Template Preset

Mulai cepat dengan konfigurasi Kosong, Ketat, Website Dasar, SPA + API, WordPress, E-commerce, dan CDN yang dibuat untuk stack nyata.

Analisis Keamanan Langsung

Peringatan langsung menandai 'unsafe-inline' dan 'unsafe-eval' pada script, object-src atau base-uri yang hilang, dan sumber wildcard yang melemahkan policy Anda.

5 Format Output

Ekspor sebagai header HTTP mentah, directive Apache, add_header Nginx, tag meta HTML, atau panggilan header() PHP — sesuai kebutuhan server Anda.

Mode Report-Only

Ganti header menjadi Content-Security-Policy-Report-Only untuk memantau pelanggaran tanpa memblokir resource selama Anda menyetel policy.

Logika Sumber Cerdas

Memilih 'none' menghapus sumber lain karena keduanya saling eksklusif, menambahkan sumber apa pun akan membuang 'none', dan duplikat dicegah secara otomatis.

Salin Sekali Klik

Salin header yang dihasilkan ke clipboard Anda dalam satu klik, lalu tempel langsung ke konfigurasi server Anda.

Sepenuhnya di Sisi Klien

Semuanya berjalan di browser Anda tanpa panggilan server dan tanpa pelacakan, sehingga policy Anda tetap berada di perangkat Anda.

Pertanyaan yang Sering Diajukan

Apa itu header Content-Security-Policy (CSP)?

Content-Security-Policy adalah header HTTP response yang memberi tahu browser sumber mana yang diizinkan memuat script, style, gambar, font, dan resource lain pada halaman Anda. Ini salah satu pertahanan paling efektif terhadap cross-site scripting (XSS) dan serangan injeksi lainnya, karena apa pun dari sumber yang tidak Anda izinkan akan diblokir.

Bagaimana cara membuat header CSP untuk situs saya?

Mulai dari preset seperti Ketat atau Website Dasar, atau mulai dari Kosong. Aktifkan directive yang Anda perlukan, klik atau ketik sumber yang Anda percayai, dan header dihasilkan seiring proses. Lalu pilih format output untuk server Anda dan klik Salin — tanpa perlu menghafal sintaks directive.

Sebaiknya pakai tag meta CSP atau header response?

Header response adalah pilihan yang lebih mumpuni. Tag <meta> HTML tidak bisa memakai mode Report-Only, tidak bisa mengatur frame-ancestors, dan tidak bisa memakai report-uri. Pakai tag meta hanya saat Anda tidak bisa mengatur header server; selain itu, utamakan output Apache, Nginx, atau PHP untuk fungsi CSP penuh.

Apa arti default-src dan script-src?

default-src adalah cadangan untuk setiap directive fetch yang tidak Anda atur secara eksplisit — jadi default-src 'self' membatasi tipe resource yang tidak ditentukan ke domain Anda sendiri. script-src mengatur dari mana JavaScript boleh dimuat, dan directive apa pun yang Anda atur eksplisit akan menggantikan default-src untuk tipe resource itu.

Bagaimana menguji CSP tanpa merusak situs saya?

Aktifkan mode Report-Only. Alat ini lalu mengeluarkan header Content-Security-Policy-Report-Only, yang mencatat pelanggaran tanpa memblokir resource apa pun. Pantau laporannya, perbaiki sumber Anda, dan baru beralih ke header Content-Security-Policy yang menegakkan policy setelah policy bersih.

Apakah 'unsafe-inline' benar-benar berbahaya?

Ya. Mengizinkan 'unsafe-inline' pada script-src membuat script inline mana pun bisa berjalan — termasuk script yang disuntikkan penyerang lewat celah XSS — yang sebagian besar melumpuhkan perlindungan dari CSP. Pembangun ini menandainya untuk Anda. Utamakan nonce atau hash, yang mengizinkan script inline tertentu sambil tetap memblokir yang disuntikkan.

Kenapa saya harus selalu menyertakan object-src 'none'?

Directive object-src mengatur plugin seperti Flash dan applet Java, yang bisa menjalankan kode sembarang dan melewati perlindungan CSP lainnya. Mengatur object-src 'none' memblokir semua konten plugin, dan karena situs modern jarang butuh plugin, ini adalah default yang aman dan direkomendasikan — alat ini memperingatkan saat directive ini hilang.