Security Headers Stack untuk Website Bisnis Indonesia: Checklist 7 Header Wajib di 2026

TL;DR: Tujuh header keamanan HTTP (HSTS, CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy, COOP) menutup mayoritas serangan client-side tanpa perlu produk berbayar. Per 2026, Google PageSpeed Insights dan SecurityHeaders.com sudah menjadikan trio HSTS-CSP-COOP sebagai indikator kepercayaan. Memasangnya di Next.js 15 cukup lewat next.config.ts dengan satu blok headers(). Hasilnya: skor SecurityHeaders A+ dan trust signal yang lebih kuat untuk SEO dan konversi.

Saya sering ditanya pemilik bisnis: "Vito, kenapa toko online saya kelihatan tidak aman di browser pengunjung padahal sudah pakai SSL?" Jawaban paling sering bukan SSL-nya, tapi tidak adanya header keamanan tambahan. SSL hanya mengenkripsi jalur, sementara header HTTP yang lain mengatur apa yang boleh terjadi setelah halaman sampai di browser pengguna.

Dalam tiga bulan terakhir, saya membantu audit sembilan website bisnis Indonesia, dari LMS sampai marketplace parfum. Hasilnya konsisten: rata-rata hanya memasang dua header dari tujuh yang seharusnya. Padahal ongkos memasang tujuh-tujuhnya sama dengan dua: nol rupiah, tinggal satu file konfigurasi.

Kenapa Security Headers Mempengaruhi Bisnis, Bukan Cuma Engineering

Header keamanan bukan urusan IT semata. Saat browser memberi tanda peringatan keamanan ke pengunjung, dampaknya terasa di tingkat konversi dan trust. Studi Google Chrome Security Team menunjukkan halaman yang menampilkan warning "Not Secure" mengalami penurunan engagement signifikan, walau angka pastinya bervariasi tergantung industri dan ukuran sample. Dari sisi SEO, dokumentasi Google Search Central sudah lama menyebut keamanan sebagai bagian dari trust signal, salah satu pilar [[E-E-A-T](/glosarium/eeat)](/glosarium/e-e-a-t).

Selain itu, penyedia payment gateway lokal seperti Midtrans dan Xendit semakin sering meminta hasil scan SecurityHeaders.com sebagai prasyarat onboarding merchant baru di 2026. Skor C atau lebih rendah bisa memperlambat verifikasi.

Tujuh Header Wajib dan Fungsinya

Tiga lapisan tambahan (Subresource Integrity, Cross-Origin-Embedder-Policy, dan Cross-Origin-Resource-Policy) berguna untuk kasus spesifik seperti embed widget eksternal. Lihat Subresource Integrity untuk konteks pemasangan CDN pihak ketiga.

Pasang di Next.js 15 dalam 5 Menit

Buka next.config.ts dan tambahkan blok berikut:

const securityHeaders = [
  { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
  { key: 'X-Frame-Options', value: 'DENY' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
  { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
  { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },
];

Lalu daftarkan di fungsi headers(). Untuk Nginx, blok serupa masuk ke server { add_header ... }. CSP butuh perlakuan terpisah karena harus disesuaikan dengan dependency analytics dan font.

Studi Kasus: Vetmo dan Atmo

Saat membangun Vetmo (pet care, 2025) dan Atmo (LMS, 2026), saya memasang ketujuh header sejak awal. Hasilnya: skor SecurityHeaders A+ dan tidak ada keluhan compatibility selama enam bulan operasi. Untuk Nalesha (e-commerce parfum), kami menambahkan CSP dengan mode Report-Only selama tiga minggu sebelum enforce, untuk memastikan integrasi Midtrans dan analitik tidak patah. Pendekatan staging ini saya rekomendasikan untuk semua website yang sudah running.

Pertanyaan Umum

Apakah memasang header ini memperlambat website?

Tidak. Header HTTP berukuran beberapa byte saja per response. Dampak ke Core Web Vitals tidak signifikan.

Bagaimana mengukur efektivitasnya?

Gunakan securityheaders.com dan Mozilla Observatory untuk skor sintetis. Untuk monitoring produksi, aktifkan Content-Security-Policy-Report-Only dengan endpoint laporan.

Apakah cukup pasang di CDN saja?

Cukup, asalkan CDN benar-benar di depan semua origin. Tapi untuk redundansi, pasang juga di server origin agar header tetap aktif jika lalu lintas pernah bypass CDN.

Apakah cocok untuk WordPress dan website non-Next.js?

Cocok. Pasang di level web server (Nginx, Apache, atau .htaccess). Untuk hosting shared, plugin seperti Really Simple Security bisa menjadi alternatif.

Insight Aplikatif

Security headers adalah salah satu pekerjaan dengan rasio effort-to-impact terbaik di engineering web modern. Satu jam konfigurasi menutup tujuh kelas serangan dan menaikkan trust signal yang dibaca pengguna, audit payment gateway, dan algoritma Google. Untuk pemilik bisnis, ini bukan opsional 2026. Mulai dari HSTS dan X-Content-Type-Options jika belum ada, lalu tingkatkan ke CSP dan COOP setelah baseline stabil.