Apa itu Content-Security-Policy?

Content-Security-Policy (CSP) adalah header respons HTTP yang membantu mencegah cross-site scripting (XSS), clickjacking, dan serangan injeksi kode lainnya. Cara kerjanya dengan menentukan sumber konten mana yang diizinkan untuk dimuat di halaman web Anda.

Tanpa CSP

Status Rentan

Browser memuat sumber daya dari asal mana pun
Situs terekspos terhadap injeksi skrip berbahaya
Tidak ada kontrol atas sumber konten
Risiko serangan XSS lebih tinggi

Dengan CSP

Status Terlindungi

Kontrol ketat atas domain yang diizinkan
Memblokir skrip tidak sah secara otomatis
Izin sumber daya granular
Lapisan keamanan pertahanan berlapis

Mengapa Menggunakan Header CSP?

Perlindungan XSS

Blokir skrip tidak sah agar tidak dijalankan di halaman Anda, mencegah penyerang menyuntikkan kode berbahaya melalui kerentanan.

Pencegahan Pencurian Data

Kontrol ke mana halaman Anda dapat mengirim data melalui koneksi fetch, XHR, atau WebSocket, mencegah eksfiltrasi data.

Pertahanan Clickjacking

Gunakan direktif frame-ancestors untuk mencegah situs Anda disematkan dalam iframe berbahaya untuk serangan clickjacking.

Pencegahan Konten Campuran

Paksa HTTPS untuk semua sumber daya dengan upgrade-insecure-requests, menghilangkan kerentanan konten campuran.

Bagaimana Alat Ini Membantu

Menulis header CSP secara manual rentan terhadap kesalahan dan memerlukan menghafal nama direktif dan sintaks sumber. Pembangun visual ini memungkinkan Anda mengalihkan direktif, mengklik nilai sumber, dan langsung melihat header yang dihasilkan dalam format yang Anda butuhkan — baik itu HTTP mentah, Apache, Nginx, atau PHP.

Manfaat penghematan waktu: Konfigurasikan kebijakan keamanan kompleks dalam hitungan menit bukan jam, dengan validasi real-time dan konversi format bawaan.

Table of Contents

1. Apa itu Content-Security-Policy?
2. Cara Menggunakan Generator Header CSP
3. Fitur
4. Pertanyaan yang Sering Diajukan

Cara Menggunakan Generator Header CSP

Pilih Titik Awal

Pilih template preset untuk memulai dengan konfigurasi umum, atau mulai dengan Kosong untuk membangun dari awal. Template preset yang tersedia mencakup Ketat, Situs Dasar, SPA + API, WordPress, E-commerce, dan konfigurasi berat CDN.

Konfigurasikan Direktif

Alihkan direktif aktif atau nonaktif dengan mengklik kotak centang atau baris header. Ketika direktif diaktifkan, Anda dapat:

Klik tombol sumber cepat ('self', 'none', 'unsafe-inline', dll.) untuk menambahkan nilai umum
Ketik domain kustom (misalnya cdn.example.com, *.googleapis.com) dan klik Tambah
Klik tombol sumber lagi untuk menghapusnya
Klik tombol × pada tag domain kustom untuk menghapusnya

Tinjau Peringatan

Alat secara otomatis menganalisis kebijakan Anda dan menampilkan peringatan keamanan. Peringatan merah menunjukkan risiko keamanan signifikan, peringatan kuning menyarankan perbaikan, dan pemberitahuan biru memberikan informasi berguna.

Pilih Format Output

Pilih format output yang sesuai dengan server web Anda:

Raw - Nilai header HTTP biasa
Apache - Untuk file .htaccess atau konfigurasi Apache
Nginx - Untuk blok server nginx.conf
Meta Tag - Untuk tag HTML <meta> (catatan: Report-Only tidak didukung)
PHP - Untuk panggilan fungsi PHP header()

Salin dan Terapkan

Klik tombol Salin untuk menyalin header yang dihasilkan ke clipboard Anda. Pertimbangkan untuk mengaktifkan mode Report-Only terlebih dahulu untuk menguji kebijakan Anda tanpa memblokir sumber daya apa pun.

Praktik terbaik: Selalu uji dengan mode Report-Only dalam produksi sebelum memberlakukan kebijakan untuk mengidentifikasi masalah potensial tanpa merusak fungsionalitas.

Fitur

Pembangun Direktif Visual

Setiap direktif CSP ditampilkan sebagai baris interaktif dengan tombol toggle. Aktifkan direktif untuk mengungkapkan panel konfigurasi sumbernya dengan tombol penambahan cepat dan input domain kustom. Direktif diorganisir ke dalam empat kategori: Fetch, Dokumen, Navigasi, dan Lainnya.

Pembangun direktif interaktif dengan tombol toggle dan tombol penambahan sumber cepat

16 Direktif yang Didukung

Direktif Fetch

Kontrol dari mana berbagai jenis sumber daya dapat dimuat:

default-src - Fallback untuk semua direktif fetch
script-src - Sumber JavaScript
style-src - Stylesheet CSS
img-src - Gambar dan favicon
connect-src - Koneksi Fetch, XHR, WebSocket
font-src - Font web
object-src - Plugin (Flash, applet Java)
media-src - Audio dan video
frame-src - Konteks browsing bersarang (iframe)
worker-src - Web Workers dan Service Workers
manifest-src - Manifes aplikasi web

Direktif Dokumen & Navigasi

Kontrol perilaku dokumen dan navigasi:

base-uri - Membatasi URL yang dapat muncul di elemen <base>
form-action - Endpoint valid untuk pengiriman formulir
frame-ancestors - Induk valid yang dapat menyematkan halaman ini (perlindungan clickjacking)

Penting: frame-ancestors tidak dapat diatur melalui meta tag — memerlukan header HTTP.

Direktif Lainnya

Peningkatan keamanan tambahan:

upgrade-insecure-requests - Secara otomatis tingkatkan HTTP ke HTTPS
block-all-mixed-content - Blokir semua konten campuran (usang, gunakan upgrade-insecure-requests)
report-uri - Endpoint untuk mengirim laporan pelanggaran (usang, gunakan report-to)

Template Preset

Ketat

Konfigurasi keamanan maksimal dengan sumber yang diizinkan minimal. Terbaik untuk aplikasi keamanan tinggi.

Situs Dasar

Kebijakan seimbang untuk situs web standar dengan sumber yang di-host sendiri dan CDN umum.

SPA + API

Dioptimalkan untuk Aplikasi Halaman Tunggal dengan backend API dan pemuatan modul dinamis.

WordPress

Dikonfigurasi sebelumnya untuk situs WordPress dengan persyaratan plugin dan tema umum.

E-commerce

Mencakup integrasi Stripe, PayPal, dan gateway pembayaran untuk toko online.

Berat CDN

Dikonfigurasi untuk situs yang menggunakan Google Analytics, font, dan berbagai penyedia CDN.

Manajemen Sumber Cerdas

Alat menangani logika nilai sumber secara otomatis untuk mencegah kesalahan konfigurasi:

Pengecualian Bersama

Memilih 'none' secara otomatis menghapus semua sumber lain karena saling eksklusif.

Penggantian Otomatis

Menambahkan sumber apa pun ketika 'none' aktif secara otomatis menghapus 'none' terlebih dahulu.

Pencegahan Duplikat

Sumber duplikat secara otomatis terdeteksi dan dicegah dari penambahan.

Analisis Keamanan

Peringatan real-time memperingatkan Anda tentang masalah keamanan potensial dalam konfigurasi CSP Anda:

Peringatan kritis: Menggunakan 'unsafe-inline' atau 'unsafe-eval' dalam script-src secara signifikan melemahkan perlindungan XSS.

Rekomendasi keamanan: Direktif object-src atau base-uri yang hilang dapat meninggalkan kerentanan terbuka.

Catatan praktik terbaik: Penggunaan wildcard (misalnya https://*) mengalahkan perlindungan CSP dengan memungkinkan semua domain.

Format Output Ganda

Format	Kasus Penggunaan	Dukungan Report-Only
HTTP Mentah	Nilai header biasa untuk server apa pun	Ya
Apache	File .htaccess atau httpd.conf	Ya
Nginx	Blok server nginx.conf	Ya
Meta Tag	Elemen HTML <meta>	Tidak
PHP	Fungsi PHP header()	Ya

Batasan meta tag: Saat menggunakan format Meta Tag dengan mode Report-Only aktif, catatan ditampilkan karena meta tag tidak dapat menggunakan Content-Security-Policy-Report-Only.

Data Anda Tetap Pribadi

Semua pemrosesan terjadi di browser Anda tanpa komunikasi server:

Tidak Ada Permintaan Server

Konfigurasi kebijakan Anda tidak pernah meninggalkan perangkat Anda. Semua pembuatan dan validasi terjadi secara lokal menggunakan JavaScript.

Tidak Ada Pelacakan

Kami tidak mengumpulkan atau menyimpan data penggunaan, detail konfigurasi, atau analitik tentang kebijakan CSP Anda.

Pertanyaan yang Sering Diajukan

Apa perbedaan antara Content-Security-Policy dan Content-Security-Policy-Report-Only?

Content-Security-Policy memberlakukan kebijakan dan memblokir sumber daya yang melanggarnya. Content-Security-Policy-Report-Only hanya melaporkan pelanggaran tanpa memblokir apa pun.

Alur kerja yang direkomendasikan: Gunakan mode Report-Only terlebih dahulu untuk menguji kebijakan Anda dan mengidentifikasi masalah sebelum memberlakukannya dalam produksi.

Pendekatan dua fase ini mencegah kerusakan fungsionalitas secara tidak sengaja sambil memungkinkan Anda memantau laporan pelanggaran dan menyempurnakan kebijakan Anda dengan aman.

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

Direktif object-src mengontrol plugin seperti Flash dan applet Java. Plugin ini dapat menjalankan kode arbitrer dan melewati perlindungan CSP lainnya.

Menetapkan object-src ke 'none' memblokir semua konten plugin, yang direkomendasikan karena:

Situs web modern jarang memerlukan plugin
Flash dan applet Java sudah usang dan tidak aman
Plugin dapat melewati pembatasan script-src CSP
Sebagian besar browser sedang menghentikan dukungan plugin

Apakah 'unsafe-inline' benar-benar berbahaya?

Ya. Ketika Anda mengizinkan 'unsafe-inline' dalam script-src, skrip inline apa pun di halaman Anda dapat dijalankan — termasuk skrip yang disuntikkan oleh penyerang melalui kerentanan XSS. Ini secara signifikan melemahkan perlindungan CSP.

Dengan 'unsafe-inline'

Rentan

Semua skrip inline dijalankan
Skrip yang disuntikkan berjalan bebas
Perlindungan XSS melemah

Dengan nonce/hash

Terlindungi

Hanya skrip yang diizinkan berjalan
Skrip yang disuntikkan diblokir
Perlindungan XSS kuat

Alternatif yang lebih baik: Gunakan nonce atau hash sebagai gantinya, yang memungkinkan skrip inline spesifik sambil memblokir yang disuntikkan.

Apa yang dilakukan default-src?

default-src bertindak sebagai fallback untuk semua direktif fetch yang tidak secara eksplisit diatur. Misalnya, jika Anda menetapkan default-src 'self' tetapi tidak menetapkan img-src, gambar hanya akan dimuat dari domain Anda sendiri.

Prinsip kunci: Direktif apa pun yang Anda atur secara eksplisit menggantikan default-src untuk jenis sumber daya itu.

Contoh:

CSP dengan fallback default-src

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' cdn.example.com;
  img-src *;

/* Result:
 * - Scripts: 'self' + cdn.example.com (explicit)
 * - Images: * (explicit)
 * - Styles: 'self' (falls back to default-src)
 * - Fonts: 'self' (falls back to default-src)
 */

Bisakah saya menggunakan format meta tag untuk semua fitur CSP?

Tidak. Pendekatan meta tag HTML memiliki keterbatasan signifikan:

Tidak dapat menggunakan mode Report-Only
Tidak dapat menetapkan direktif frame-ancestors
Tidak dapat menggunakan report-uri atau report-to
Tidak dapat menggunakan direktif sandbox

Rekomendasi: Untuk fungsionalitas CSP lengkap, gunakan header HTTP yang dikonfigurasi di server web Anda (Apache, Nginx, dll.).

Meta tag berguna untuk pengujian cepat atau ketika Anda tidak memiliki akses konfigurasi server, tetapi header HTTP menyediakan kemampuan CSP lengkap.

Apa itu 'strict-dynamic' dan kapan saya harus menggunakannya?

'strict-dynamic' memberi tahu browser untuk mempercayai skrip yang dimuat oleh skrip yang sudah dipercaya. Ini berguna untuk aplikasi modern yang secara dinamis memuat modul JavaScript.

Manfaat

Menyederhanakan CSP untuk aplikasi dinamis

Bekerja dengan bundler modul
Mendukung impor dinamis
Mengurangi kompleksitas kebijakan

Cara Kerjanya

Model propagasi kepercayaan

Daftar putih berbasis host diabaikan
Bekerja dengan kebijakan berbasis nonce
Skrip memuat skrip terpercaya lainnya

Terbaik untuk: Aplikasi Halaman Tunggal (SPA), aplikasi React/Vue/Angular, dan situs yang menggunakan Webpack atau bundler serupa.