Header Keamanan HTTP: HSTS, CSP, X-Frame-Options, dan Lainnya

Q: Kenapa gambar dari situs lain tidak muncul setelah memasang CSP?

Kemungkinan domain gambar itu tidak tercantum di img-src. Tambahkan domainnya secara spesifik, misalnya img-src 'self' https://cdn.contoh.com, lalu periksa kembali Console browser.

Diperbarui 16 Oktober 2026 · ±6 menit baca

Header keamanan HTTP adalah instruksi yang dikirim server bersama setiap halaman untuk memberi tahu browser cara melindungi pengunjung. Header ini tidak terlihat di tampilan website dan tidak memengaruhi kecepatan, tetapi bisa mencegah beberapa jenis serangan umum. webmaster.my.id memeriksa header-header ini setiap kali Anda menguji website.

Strict-Transport-Security (HSTS)

HSTS memerintahkan browser untuk selalu memakai HTTPS saat mengakses domain Anda, bahkan jika pengguna mengetik http://. Ini mencegah serangan yang mencoba menurunkan koneksi ke HTTP tanpa enkripsi.

Strict-Transport-Security: max-age=31536000; includeSubDomains

max-age – berapa detik browser mengingat aturan ini (31536000 = satu tahun).
includeSubDomains – berlaku juga untuk semua subdomain.
preload – opsional, untuk mendaftarkan domain ke daftar preload yang dibawa browser.

Perhatian: pasang HSTS hanya jika HTTPS sudah berjalan sempurna di domain, dan di semua subdomain jika memakai includeSubDomains. Mulailah dengan max-age pendek, misalnya 300 detik, lalu naikkan setelah yakin. Lihat HTTPS dan SSL.

Content-Security-Policy (CSP)

CSP menentukan sumber mana saja yang boleh dimuat halaman: skrip, gaya, gambar, font, iframe, dan sebagainya. Jika penyerang berhasil menyisipkan skrip berbahaya (serangan XSS), CSP yang ketat dapat mencegah browser menjalankannya.

Contoh sederhana:

Content-Security-Policy: default-src 'self'; img-src 'self' data:; script-src 'self' https://www.googletagmanager.com; frame-ancestors 'self'

Artinya: secara umum hanya sumber dari domain sendiri yang diizinkan, gambar boleh dari domain sendiri dan data URI, skrip boleh dari domain sendiri dan Google Tag Manager, dan halaman hanya boleh dibingkai oleh domain sendiri.

CSP adalah header paling kuat sekaligus paling mudah merusak website jika salah. Tips:

Mulai dengan Content-Security-Policy-Report-Only agar pelanggaran hanya dilaporkan di konsol browser tanpa memblokir apa pun.
Daftarkan semua domain pihak ketiga yang benar-benar dipakai: analytics, CDN, font, chat, pembayaran.
Hindari 'unsafe-inline' dan 'unsafe-eval' untuk skrip jika memungkinkan; gunakan nonce atau hash.
Setelah tidak ada pelanggaran, ganti ke header Content-Security-Policy yang sebenarnya.

X-Frame-Options

Header ini mencegah halaman Anda ditampilkan di dalam iframe di situs lain, yang bisa dimanfaatkan untuk serangan clickjacking: pengguna mengira mengklik sesuatu di satu situs, padahal mengklik tombol di situs Anda yang disembunyikan.

X-Frame-Options: SAMEORIGIN

Nilai DENY melarang semua pembingkaian, sedangkan SAMEORIGIN hanya mengizinkan dari domain sendiri. Pengganti modernnya adalah direktif frame-ancestors di CSP; memasang keduanya aman untuk kompatibilitas browser lama.

X-Content-Type-Options

X-Content-Type-Options: nosniff

Header ini mencegah browser "menebak" jenis file. Tanpa header ini, file yang diunggah pengguna, misalnya teks yang sebenarnya berisi skrip, bisa diperlakukan sebagai JavaScript. Header ini hampir tidak pernah merusak website, jadi sebaiknya selalu dipasang. Pastikan server mengirim tipe MIME yang benar untuk setiap file.

Referrer-Policy

Saat pengunjung mengklik tautan ke situs lain, browser biasanya mengirim alamat halaman asal (referrer). Alamat ini kadang berisi informasi sensitif seperti token atau parameter pencarian.

Referrer-Policy: strict-origin-when-cross-origin

Nilai ini mengirim alamat lengkap untuk tautan di domain sendiri, tetapi hanya nama domain untuk tautan ke situs lain, dan tidak mengirim apa pun dari HTTPS ke HTTP. Ini juga nilai bawaan di browser modern, tetapi menuliskannya secara eksplisit memastikan perilaku yang konsisten.

Permissions-Policy

Header ini membatasi fitur browser yang boleh dipakai halaman, seperti kamera, mikrofon, dan lokasi:

Permissions-Policy: camera=(), microphone=(), geolocation=()

Jika website Anda tidak membutuhkan fitur tersebut, menonaktifkannya mengurangi risiko jika ada skrip pihak ketiga yang disusupi.

Cara memasang header

Nginx:

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;

Catatan: di Nginx, jika sebuah blok location memiliki add_header sendiri, header dari tingkat di atasnya tidak diwarisi. Ulangi header di blok tersebut atau gunakan file snippet yang di-include.

Apache (.htaccess):

<IfModule mod_headers.c>
  Header always set X-Frame-Options "SAMEORIGIN"
  Header always set X-Content-Type-Options "nosniff"
  Header always set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

WordPress: beberapa plugin keamanan menyediakan pengaturan header. Cloudflare: gunakan Transform Rules untuk menambah header respons, dan HSTS bisa diaktifkan di menu SSL/TLS > Edge Certificates.

Memeriksa hasilnya

Setelah memasang header, uji website di webmaster.my.id. Bagian keamanan akan menunjukkan header mana yang sudah terdeteksi. Anda juga bisa memeriksa manual dengan curl -I https://contoh.com. Selalu periksa juga bahwa website tetap berfungsi normal, terutama setelah memasang CSP.

Header keamanan adalah lapisan perlindungan tambahan, bukan pengganti pembaruan perangkat lunak, kata sandi yang kuat, dan backup rutin.

Contoh konfigurasi lengkap

Berikut contoh set header yang aman untuk banyak situs statis atau blog di Nginx. Sesuaikan terutama bagian CSP dengan sumber skrip, gambar, dan font yang benar-benar Anda pakai:

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" 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 "camera=(), microphone=(), geolocation=()" always;
add_header Content-Security-Policy "default-src 'self'; img-src 'self' data: https:; frame-ancestors 'self'" always;

Untuk Apache atau LiteSpeed di hosting shared, padanannya ditulis di .htaccess dengan perintah Header always set, misalnya Header always set X-Content-Type-Options "nosniff".

Cara aman memasang CSP

CSP adalah header yang paling mungkin merusak situs jika salah tulis, karena browser akan memblokir semua sumber yang tidak diizinkan. Langkah aman:

Mulai dengan header Content-Security-Policy-Report-Only berisi kebijakan yang Anda rencanakan. Browser hanya melaporkan pelanggaran di Console tanpa memblokir apa pun.
Buka halaman-halaman utama, termasuk formulir, peta, video, dan halaman pembayaran, lalu catat sumber yang dilaporkan.
Tambahkan sumber yang memang sah ke kebijakan.
Setelah tidak ada pelanggaran penting, ganti nama header menjadi Content-Security-Policy.
Ulangi pengecekan setiap kali menambah layanan pihak ketiga baru.

Checklist header keamanan

Situs sudah sepenuhnya HTTPS sebelum HSTS diaktifkan.
HSTS dimulai dengan max-age pendek, lalu dinaikkan setelah yakin.
X-Content-Type-Options: nosniff aktif.
Perlindungan clickjacking aktif lewat X-Frame-Options atau frame-ancestors.
Referrer-Policy diatur agar alamat lengkap tidak bocor ke situs lain.
CSP diuji dalam mode Report-Only terlebih dahulu.
Header juga dikirim pada halaman error dan file statis. Di Nginx, gunakan parameter always.

Kesalahan umum

Mengaktifkan HSTS dengan preload terlalu cepat. Jika ada subdomain yang belum mendukung HTTPS, subdomain itu tidak bisa dibuka. Menghapus domain dari daftar preload juga memakan waktu.
Menulis add_header di blok location lalu kehilangan header lain. Di Nginx, add_header di blok dalam menggantikan semua add_header dari blok luar. Ulangi header penting atau gunakan file snippet yang di-include.
Menyalin CSP dari situs lain. Setiap situs memakai sumber berbeda, jadi CSP salinan sering memblokir gambar, font, atau badge.
Mengira header keamanan mempercepat situs. Header ini meningkatkan perlindungan, bukan kecepatan.

Pertanyaan yang sering diajukan

Apakah header keamanan memengaruhi skor Performa?

Tidak. Header keamanan dinilai di bagian keamanan webmaster.my.id dan sebagian di kategori Best Practices Lighthouse, tetapi tidak memengaruhi skor Performa.

Apakah X-XSS-Protection masih perlu?

Tidak. Browser modern sudah tidak memakai filter tersebut. Perlindungan terhadap XSS sebaiknya diberikan lewat CSP dan penanganan input yang benar di aplikasi.

Bisakah memasang header lewat Cloudflare?

Bisa. Cloudflare menyediakan aturan Transform untuk mengubah header respons, dan HSTS bisa diaktifkan di pengaturan SSL/TLS. Pastikan tidak ada header ganda dengan nilai berbeda dari server asal.

Kenapa gambar dari situs lain tidak muncul setelah memasang CSP?

Kemungkinan domain gambar itu tidak tercantum di img-src. Tambahkan domainnya secara spesifik, misalnya img-src 'self' https://cdn.contoh.com, lalu periksa kembali Console browser.

Bagaimana cara memeriksa header keamanan situs saya?

Uji situs Anda di webmaster.my.id dan lihat bagian keamanan, yang menampilkan header yang sudah ada dan yang belum. Anda juga bisa menjalankan perintah curl -sI https://namadomain.com di terminal atau membuka tab Network di DevTools, lalu memeriksa bagian Response Headers pada permintaan halaman utama.

Apakah header keamanan cukup untuk melindungi situs?

Tidak. Header keamanan adalah lapisan tambahan. Pembaruan rutin CMS, tema, dan plugin, kata sandi yang kuat, cadangan berkala, dan hak akses yang dibatasi tetap menjadi dasar keamanan website.