Cara Mendapat Security Headers A+ — Panduan + Kisah Nyata CSP

Kamu baru scan situsmu di Security Headers Check dan dapat grade C, D, atau bahkan F. Jangan panik — kabar baiknya, lima dari enam header keamanan itu bisa kamu pasang dalam 10 menit hanya dengan menempel beberapa baris konfigurasi. Header keenam — Content-Security-Policy — memang lebih menantang, dan di situlah kebanyakan panduan berhenti dengan saran yang mustahil dijalankan di situs nyata. Artikel ini menuntaskan keduanya, plus membagikan cara kami sendiri menaklukkan CSP saat mengejar A+ untuk cekipsaya.com.

Sebelum & sesudah tiap perubahan, cek nilaimu di Security Headers Check — biar kamu lihat grade naik secara nyata, bukan menebak.

Security Headers Adalah…

Security headers adalah instruksi keamanan yang dikirim server lewat HTTP response header — pesan tak terlihat yang menyertai setiap halaman untuk memerintahkan browser cara melindungi pengunjung. Tanpa header ini, browser memakai perilaku default yang lebih longgar, sehingga celah kecil di kodemu bisa dimanfaatkan untuk menyisipkan skrip jahat (XSS), membajak lewat iframe (clickjacking), atau menurunkan koneksi ke HTTP tak aman. Enam header inti berikut menutup pintu-pintu itu di level browser — tanpa mengubah satu baris logika aplikasimu.

5 Header Mudah — Tempel Sekarang (10 Menit)

Lima header ini bekerja untuk hampir semua situs tanpa penyesuaian. Untuk Apache (.htaccess atau cPanel), tempel blok ini:

Apache — .htaccess

# ══════════════════════════════════════════
# cekipsaya.com — network intelligence tools
# gratis untuk Indonesia: cek IP, DNS, ping,
# security headers check & more.
# ══════════════════════════════════════════
<IfModule mod_headers.c>
    # Paksa HTTPS 1 tahun + subdomain + preload
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
    # Cegah MIME sniffing
    Header always set X-Content-Type-Options "nosniff"
    # Cegah clickjacking (embed iframe)
    Header always set X-Frame-Options "SAMEORIGIN"
    # Batasi kebocoran referrer
    Header always set Referrer-Policy "strict-origin-when-cross-origin"
    # Matikan fitur browser yang tak dipakai
    Header always set Permissions-Policy "geolocation=(), microphone=(), camera=(), payment=()"
</IfModule>

Untuk Nginx, letakkan di dalam blok server:

Nginx — server block

# ══════════════════════════════════════════
# cekipsaya.com — network intelligence tools
# ══════════════════════════════════════════
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "geolocation=(), microphone=(), camera=(), payment=()" always;

Pakai Cloudflare? Kamu bisa set kelima header ini via Transform Rules → Modify Response Header tanpa menyentuh server sama sekali. Cocok kalau kamu tak punya akses konfigurasi server.

Setelah menempel, scan lagi di Security Headers Check — grade-mu harusnya langsung lompat ke B atau A. Sisa satu header untuk mencapai A+: Content-Security-Policy.

Content-Security-Policy — Header yang Bikin Banyak Orang Menyerah

Content-Security-Policy (CSP) adalah header terkuat — ia memagari dari sumber mana browser boleh memuat script, style, gambar, dan font. Kalau ada penyerang berhasil menyisipkan <script> jahat ke halamanmu, CSP yang ketat akan menolak menjalankannya. Tapi kekuatan itu datang dengan harga: CSP harus disesuaikan dengan sumber script situsmu sendiri, dan kalau salah, fitur situsmu ikut mati.

CSP dasar terlihat seperti ini:

Contoh CSP dasar

Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self'"

Masalahnya muncul di kata script-src 'self'. Nilai ini memblokir semua script inline — termasuk atribut event seperti onclick="..." yang tersebar di ratusan tombol banyak situs. Di sinilah hampir semua panduan memberi saran yang sama, dan sama-sama tidak realistis.

Kisah Nyata: Bagaimana Kami Menaklukkan CSP Tanpa Menulis Ulang Kode

Saat mengejar A+ untuk cekipsaya.com, kami mentok persis di titik ini. Situs kami punya ratusan atribut onclick di tombol-tombol tool. Nasihat standar dari hampir semua panduan CSP: "refactor semua inline handler jadi addEventListener." Untuk situs nyata dengan ratusan tombol, itu berarti pekerjaan berminggu-minggu yang berisiko merusak banyak fitur — tidak realistis.

Jebakan umum: menambahkan 'unsafe-inline' ke script-src agar tombol tetap jalan. Ini "menang" secara fungsi tapi membatalkan sebagian besar proteksi CSP — dan securityheaders.com akan tetap memberi peringatan. Ini bukan jalan menuju A+.

Solusi yang kami temukan — dan yang jarang disebut panduan lain — adalah memisahkan izin ke direktif yang lebih spesifik:

1. script-src bersih (tanpa unsafe-inline)

Direktif utama script-src 'self' dibiarkan ketat — inilah yang membuat securityheaders.com puas dan grade naik ke A+.

2. script-src-attr untuk inline handler

Izin untuk atribut onclick dipindahkan ke direktif terpisah script-src-attr 'unsafe-inline'. Ratusan tombol tetap jalan, tanpa melonggarkan script-src utama.

3. script-src-elem + nonce untuk blok script

Blok <script> sungguhan diamankan dengan nonce acak per-request lewat script-src-elem — pertahanan berlapis untuk kode yang benar-benar dijalankan.

Catatan penting yang kami temukan: dulu script-src-attr tidak didukung Safari, sehingga pendekatan ini sempat gagal di iPhone. Tapi per pertengahan 2026, Safari sudah mendukungnya — jadi trik ini kini aman lintas-browser. Kalau kamu menemui tombol yang mati di Safari lama, itu petunjuk pertama yang harus dicek.

Cara Rollout CSP Tanpa Merusak Situs Live

Mengubah CSP di situs yang sudah ramai itu berisiko — salah sedikit, fungsi mati untuk semua pengunjung sekaligus. Pola aman yang kami pakai:

STEP 1

Uji lewat parameter tersembunyi dulu — Aktifkan CSP baru hanya jika ada query khusus (mis. ?csptest=1), sementara pengunjung normal tetap pakai versi lama. Dampak ke user = nol selama pengujian.

STEP 2

Tes di Chrome + Safari — Buka URL ?csptest=1, klik tombol-tombol inline, dan pastikan tak ada pelanggaran CSP di Console. Wajib cek Safari — itu titik paling rawan.

STEP 3

Cek tidak ada URI javascript: — Pastikan situs tak punya link href="javascript:..." — itu diblokir script-src, bukan script-src-attr, dan akan jebol saat flip.

STEP 4

Flip jadi default + verifikasi — Setelah aman, jadikan CSP baru default, lalu re-scan di Security Headers Check dan securityheaders.com. Rollback tinggal kembalikan satu file konfigurasi.

Verifikasi Grade Kamu

Setelah semua terpasang, verifikasi dua kali: cepat lewat Security Headers Check kami (langsung, berbahasa Indonesia, plus penjelasan tiap header), dan untuk audit resmi lewat securityheaders.com. Kalau keenam header hijau, kamu resmi A+. Ingat: security headers itu bukan sekali-set-lupakan — tiap kali kamu menambah layanan pihak ketiga (analytics, font, widget), cek ulang agar CSP-mu tidak memblokirnya atau malah terlalu longgar.

FAQ — Pertanyaan yang Sering Ditanyakan

Apa itu security headers?

Security headers adalah instruksi keamanan yang dikirim server lewat HTTP response header untuk memerintahkan browser cara melindungi pengunjung — misalnya membatasi sumber script (Content-Security-Policy), memaksa HTTPS (Strict-Transport-Security), atau mencegah situs di-embed di iframe orang lain (X-Frame-Options).

Berapa lama waktu untuk mendapat security headers A+?

Lima dari enam header inti bisa dipasang dalam sekitar 10 menit dengan menempel beberapa baris di .htaccess, Nginx, atau Cloudflare — dan itu biasanya sudah cukup untuk grade A. Header keenam, Content-Security-Policy, butuh waktu lebih karena harus disesuaikan dengan sumber script situsmu; ini bisa memakan beberapa jam hingga beberapa hari tergantung kompleksitas situs.

Apa itu Content-Security-Policy dan kenapa sulit?

Content-Security-Policy (CSP) adalah header yang memagari dari sumber mana browser boleh memuat script dan style — pertahanan terkuat lawan serangan XSS. Sulitnya karena CSP yang ketat memblokir script inline (termasuk atribut onclick), sehingga harus disesuaikan hati-hati agar fitur situs tidak ikut mati. Solusinya memisahkan izin ke direktif script-src-attr, bukan melonggarkan script-src utama.

Apakah menambahkan unsafe-inline aman untuk dapat A+?

Tidak. Menambahkan unsafe-inline ke script-src memang membuat tombol inline tetap jalan, tapi membatalkan sebagian besar proteksi CSP terhadap XSS, dan securityheaders.com tetap memberi peringatan sehingga grade tidak mencapai A+. Cara yang benar adalah memindahkan izin inline handler ke direktif script-src-attr yang terpisah.

Bagaimana cara set security headers kalau saya pakai Cloudflare?

Lewat Cloudflare Transform Rules → Modify Response Header, kamu bisa menambahkan kelima header mudah (HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy) tanpa menyentuh server sama sekali. Content-Security-Policy juga bisa di sini, tapi tetap perlu disesuaikan dengan sumber script situsmu.

Apakah security headers memperlambat website?

Tidak. Security headers hanya menambah beberapa baris teks kecil ke setiap response — dampaknya ke kecepatan praktis nol. Sebaliknya, HSTS justru bisa mempercepat kunjungan berikutnya karena browser langsung memakai HTTPS tanpa redirect.

Kesimpulan

Grade A+ Security Headers bukan sihir — ia lima header yang tinggal ditempel plus satu header (CSP) yang butuh kesabaran. Yang membedakan panduan ini dari ribuan tutorial lain: kami benar-benar melewatinya sampai cekipsaya.com meraih A+, termasuk menemukan cara menangani CSP tanpa harus menulis ulang seluruh kode. Mulai dari lima header mudah hari ini, lalu tackle CSP secara bertahap — dan verifikasi tiap langkah di tool Security Headers Check.