idwebhost
icon icon icon icon icon icon •

Apa Itu CSP Headers? Rahasia Website Aman dari Hacker!

Apa Itu CSP Headers? Rahasia Website Aman dari Hacker!
Ade Gusti's avatar
Ade Gusti

Waktu membaca menit

Kategori Website Development

Diposting pada 19 Mei 2026

Website bisa terlihat normal di permukaan, tapi diam-diam menyimpan celah keamanan yang mudah dimanfaatkan hacker. Salah satu perlindungan penting yang sering dilewatkan developer adalah Content Security Policy (CSP). Jadi, apa itu CSP headers, bagaimana cara kerjanya, dan kenapa penting untuk keamanan website modern? Artikel ini akan membahasnya dengan bahasa yang praktis dan mudah dipahami.

hosting murah 250 ribu

Apa Itu CSP Headers?

Kalau pernah mendengar istilah Content Security Policy atau CSP, sebenarnya ini adalah salah satu lapisan keamanan tambahan yang bekerja lewat browser. Fungsinya adalah memberi tahu browser resource mana saja yang boleh dimuat oleh website.

Jadi ketika sebuah halaman mencoba memanggil JavaScript, CSS, gambar, iframe, atau resource lain dari domain tertentu, browser akan mengecek aturan CSP terlebih dahulu. Kalau sumbernya tidak sesuai aturan, browser langsung memblokirnya.

Baca Juga: Cara Menambahkan Expires Headers di Website, Apa Manfaatnya?

Secara teknis, aturan ini dikirim melalui CSP HTTP header pada response server. Header tersebut biasanya bernama:

Content-Security-Policy

Konsepnya mirip seperti daftar tamu di acara private. Hanya domain atau sumber yang sudah diizinkan yang boleh masuk. Sisanya ditolak otomatis.

Di dunia cybersecurity website modern, pendekatan seperti ini sangat penting karena serangan website saat ini tidak selalu menyerang server secara langsung. Banyak hacker justru memanfaatkan script pihak ketiga, iklan, plugin, atau celah JavaScript untuk menyisipkan kode berbahaya.

cara kerja content security policy

Nah, di sinilah CSP bekerja.

Misalnya website hanya mengizinkan script dari:

script-src 'self' https://trustedcdn.com;

Artinya browser hanya boleh menjalankan script dari domain website sendiri dan CDN terpercaya tersebut. Kalau ada script asing dari domain mencurigakan, browser akan langsung menolaknya.

Baca Juga: Awas, 10 Celah Keamanan Website yang Rentan Diserang Hacker!

Yang menarik, CSP bukan cuma soal JavaScript. Header ini juga bisa mengontrol:

  • CSS
  • gambar
  • video
  • font
  • iframe
  • form submission
  • plugin browser

Dengan kata lain, Content Security Policy membantu developer mengontrol “siapa boleh memuat apa” di dalam website.

Kenapa CSP Headers Penting?

apa itu csp headers

Banyak developer baru sadar pentingnya CSP setelah website terkena serangan XSS atau injeksi script asing. Padahal kerusakan akibat serangan seperti ini bisa cukup serius, mulai dari pencurian cookie login sampai penyisipan malware.

Mitigasi Serangan XSS

Fungsi utama CSP adalah membantu mitigasi serangan XSS (Cross-Site Scripting).

Serangan XSS terjadi ketika hacker berhasil menyisipkan script berbahaya ke halaman website. Browser korban menganggap script tersebut aman karena berasal dari website terpercaya.

Contoh sederhananya seperti ini:

<script>alert('Hacked');</script>

Kalau website memiliki validasi lemah, script semacam ini bisa dijalankan di browser pengunjung.

Dampaknya?

  • pencurian session login,
  • redirect ke website phishing,
  • pengambilan data sensitif,
  • hingga penyebaran malware.

Dengan CSP, browser hanya akan menjalankan script dari sumber yang sudah di-whitelist. Jadi meskipun hacker berhasil menyisipkan script asing, browser tetap akan memblokirnya.

Inilah alasan kenapa CSP sering dianggap sebagai salah satu metode terbaik untuk pencegahan cross-site scripting.

Memaksa Koneksi HTTPS

Selain membatasi sumber konten, CSP juga bisa memaksa browser menggunakan HTTPS.

Ini penting karena masih banyak website yang tanpa sadar memuat asset dari HTTP biasa. Misalnya gambar atau JavaScript dari CDN lama yang belum terenkripsi.

Masalahnya, koneksi HTTP lebih rentan disadap lewat teknik packet sniffing.

Dengan CSP, kamu bisa memaksa browser hanya menerima resource HTTPS seperti:

default-src https:;

Jadi semua koneksi asset wajib terenkripsi.

Mengurangi Risiko Supply Chain Attack

Beberapa tahun terakhir, supply chain attack makin sering terjadi. Kasusnya biasanya berasal dari script pihak ketiga yang ternyata disusupi malware.

Contohnya:

Kalau website terlalu bebas memuat script dari berbagai domain, risiko komprominya jauh lebih tinggi.

CSP membantu membatasi domain mana saja yang dipercaya browser.

Contoh-contoh Headers CSP

Saat mulai menerapkan Content Security Policy, kamu akan menemukan beberapa directive penting.

Berikut beberapa yang paling sering digunakan.

default-src

Directive utama untuk menentukan sumber default semua resource.

default-src 'self';

Artinya browser hanya boleh memuat resource dari domain website sendiri.

script-src

Mengatur sumber JavaScript yang diizinkan.

script-src 'self' https://cdn.jsdelivr.net;

Kalau website tidak menggunakan JavaScript eksternal, bahkan bisa dibuat lebih ketat:

script-src 'none';

img-src

Mengatur sumber gambar.

img-src 'self' https://images.example.com;

style-src

Mengatur file CSS yang boleh digunakan.

style-src 'self' https://fonts.googleapis.com;

frame-ancestors

Mencegah website di-embed sembarangan lewat iframe.

frame-ancestors 'none';

Directive ini sangat membantu untuk mengurangi risiko clickjacking.

form-action

Mengontrol tujuan submit form.

form-action 'self';

Jadi data form tidak bisa dikirim ke domain asing.

object-src

Membatasi plugin seperti Flash atau embed object lain.

object-src 'none';

Saat ini directive ini hampir selalu direkomendasikan menggunakan none.

Kalau ingin melihat daftar lengkap directive CSP terbaru, developer biasanya merujuk dokumentasi resmi Mozilla Developer Network atau W3C.

Cara Memeriksa Langkah-Langkah Keamanan Ini

Setelah memahami cara kerja CSP, pertanyaan berikutnya biasanya:

  • Apakah website sudah punya CSP?
  • Apakah konfigurasi CSP sudah aman?
  • Bagaimana cara mengecek CSP HTTP header di website?

Kabar baiknya, CSP bukan konfigurasi tersembunyi. Semua bisa dicek langsung dari browser.

#1. Cek Lewat Developer Tools

Cara paling praktis adalah menggunakan DevTools di browser.

Langkahnya:

  1. Buka website.
  2. Klik kanan → Inspect.
  3. Masuk ke tab Network.
  4. Refresh halaman.
  5. Klik request utama website.
  6. Cari bagian Response Headers.

Kalau CSP aktif, biasanya akan muncul seperti ini:

content-security-policy:

default-src 'self';
script-src 'self' https://cdn.example.com;

Cara ini paling sering dipakai developer karena langsung terlihat detail konfigurasinya.

#2. Gunakan CSP Evaluator

Google juga punya tool bernama CSP Evaluator dalam bentuk extension Chrome.

Tool ini membantu:

  • membaca policy CSP,
  • mendeteksi konfigurasi lemah,
  • memberi rekomendasi keamanan.

Tapi tetap hati-hati menggunakan extension browser karena beberapa extension memiliki akses cukup luas terhadap data browsing.

#3. Cek Lewat View Page Source

Selain response header, CSP kadang dipasang lewat meta tag HTML.

Contohnya:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

Cara mengeceknya:

  1. Klik kanan halaman.
  2. Pilih View Page Source.
  3. Cari keyword:
Content-Security-Policy

Kalau ada, berarti website menggunakan CSP via meta tag.

Celah Keamanan Apa yang Bisa Dicegah CSP?

apa itu csp headers

Walaupun CSP bukan “obat segala penyakit”, perlindungan ini cukup efektif untuk banyak skenario serangan modern.

Beberapa celah keamanan yang bisa diminimalkan antara lain:

Cross-Site Scripting (XSS)

Ini adalah manfaat terbesar CSP.

Browser akan memblokir script asing yang tidak sesuai whitelist domain.

Inline Script Berbahaya

CSP dapat memblokir:

  • inline JavaScript,
  • inline CSS,
  • event handler HTML seperti onclick.

Misalnya:

<button onclick="stealCookie()">

Script seperti ini bisa diblokir CSP.

Penggunaan eval()

Fungsi JavaScript seperti eval() sering dianggap berbahaya karena dapat menjalankan kode dinamis.

CSP bisa membatasi penggunaan ini.

Mixed Content HTTP

Website HTTPS kadang masih memuat asset HTTP.

CSP membantu memblokir resource yang tidak terenkripsi.

Dynamic CSS Injection

Teknik injeksi CSS tertentu juga dapat dicegah lewat policy CSP yang ketat.

Kapan CSH Headers Sebaiknya Dipakai?

Perlu dicatat bahwa CSP tetap bukanlah pengganti secure coding.

Kalau aplikasi masih memiliki celah besar di sisi backend atau validasi input, CSP saja tidak cukup. Karena itu implementasi CSP idealnya menjadi bagian dari strategi keamanan menyeluruh.

Biasanya CSP paling direkomendasikan untuk:

  • dashboard admin,
  • aplikasi SaaS,
  • website membership,
  • website e-commerce,
  • platform upload file,
  • website dengan banyak JavaScript pihak ketiga.

Kesimpulan

Di era serangan digital yang makin kompleks, mengandalkan antivirus atau plugin keamanan saja sudah tidak cukup. Developer juga perlu membangun pertahanan langsung dari sisi browser, dan disinilah Content Security Policy punya peran besar.

Dengan memahami apa itu CSP headers, kamu bisa mengurangi risiko XSS, membatasi script asing, sekaligus meningkatkan keamanan website secara keseluruhan. Implementasinya memang perlu penyesuaian, tapi manfaat jangka panjangnya sangat terasa terutama untuk website yang menyimpan data penting pengguna.

Kalau kamu sedang membangun website personal brand berbasis WordPress, pastikan juga menggunakan layanan hosting yang stabil, cepat, dan mendukung konfigurasi keamanan modern. 

Layanan Hosting untuk WordPress dari IDwebhost bisa jadi pilihan untuk membantu website tetap optimal sekaligus lebih aman dalam jangka panjang.

Performa Ngebut, Security Mantap, Beli Sekarang!

Related Articles