--- title: "Cara Memasang Security Headers seperti CSP dan HSTS" description: "Pasang header keamanan HTTP penting (HSTS, CSP, X-Frame-Options, Referrer-Policy, Permissions-Policy) di Nginx dan Apache, lalu uji hasilnya." url: "https://nivelva.com/insight/security-headers-csp-hsts" category: "Keamanan/Cyber Security" tags: ["security headers","csp","hsts","nginx","apache","keamanan website"] author: "Theresia Candiawan" published: "2026-11-07T05:43:00+07:00" updated: "2026-11-07T05:43:00+07:00" language: "id" publisher: "Nivelva (https://nivelva.com)" --- # Cara Memasang Security Headers seperti CSP dan HSTS > **Jawaban singkat:** Security headers adalah instruksi dari server ke browser untuk membatasi perilaku berbahaya. Pasang berurutan: HSTS untuk memaksa HTTPS, X-Content-Type-Options, Referrer-Policy, perlindungan framing, Permissions-Policy, lalu CSP yang diuji dulu dalam mode Report-Only. Pernah mengecek websitemu di alat pemindai header dan mendapat nilai merah, padahal sertifikat SSL sudah terpasang? Itu wajar. SSL mengenkripsi koneksi, tapi tidak memberi tahu browser apa yang boleh dan tidak boleh dilakukan halamanmu. Tugas itu dipegang **security headers**, yaitu baris tambahan di respons HTTP yang dibaca browser. Sebagian besar header cukup ditambahkan satu baris di konfigurasi Nginx atau Apache. Yang butuh kesabaran hanya Content-Security-Policy (CSP), karena header ini bisa memblokir skrip milikmu sendiri bila disusun terburu-buru. Panduan ini mengurutkan pemasangannya dari yang paling aman sampai yang paling perlu diuji. ## Sebelum mulai: cek kondisi sekarang Lihat header yang sudah dikirim server dengan perintah: ```bash curl -sI https://domainmu.com ``` Catat header apa yang sudah ada. Panel hosting, CDN, atau plugin CMS kadang sudah menambahkan sebagian, dan header ganda dengan nilai berbeda bisa membingungkan browser. Satu catatan untuk Nginx: perintah `add_header` di blok `location` membatalkan semua `add_header` yang diwarisi dari blok `server`. Kalau kamu menambah header di `location`, ulangi semua header keamanan di sana, atau taruh di file terpisah lalu `include` di setiap blok. Tambahkan juga parameter `always` agar header ikut terkirim pada respons error. Di Apache, pastikan modul `mod_headers` aktif. ## Langkah pemasangan ### Langkah 1: HSTS untuk memaksa HTTPS `Strict-Transport-Security` memberi tahu browser agar selalu memakai HTTPS untuk domainmu selama waktu tertentu, bahkan bila pengguna mengetik `http://`. Pasang hanya setelah HTTPS berjalan baik di semua halaman dan subdomain yang akan dicakup. Mulailah dengan durasi pendek, misalnya satu hari, lalu naikkan bertahap. ```nginx add_header Strict-Transport-Security "max-age=86400" always; ``` ```apache Header always set Strict-Transport-Security "max-age=86400" ``` Setelah yakin, naikkan ke satu tahun (`max-age=31536000`) dan tambahkan `includeSubDomains` bila semua subdomain sudah HTTPS. Opsi `preload` dan pendaftaran ke daftar preload browser bersifat sulit ditarik kembali, jadi pertimbangkan matang-matang. Pilihan sertifikatnya dibahas di [jenis sertifikat SSL](https://nivelva.com/insight/jenis-sertifikat-ssl). ### Langkah 2: X-Content-Type-Options Header ini mencegah browser "menebak" jenis file. Tanpa header ini, file yang diunggah pengguna bisa saja diperlakukan sebagai skrip. ```nginx add_header X-Content-Type-Options "nosniff" always; ``` Header ini jarang menimbulkan masalah, asalkan server mengirim `Content-Type` yang benar untuk file JavaScript dan CSS. Pasang di semua website. ### Langkah 3: Referrer-Policy Mengatur seberapa banyak alamat halaman asal dikirim saat pengunjung mengklik tautan ke situs lain. Nilai `strict-origin-when-cross-origin` mengirim alamat lengkap untuk tautan internal, tapi hanya domain untuk tautan keluar, dan tidak mengirim apa pun dari HTTPS ke HTTP. ```nginx add_header Referrer-Policy "strict-origin-when-cross-origin" always; ``` Ini penting bila URL-mu memuat informasi seperti token reset password atau nomor pesanan. ### Langkah 4: perlindungan dari framing (clickjacking) Clickjacking terjadi ketika halamanmu dimuat diam-diam di dalam frame situs lain, lalu pengguna ditipu untuk mengklik tombol. Ada dua cara mencegahnya: header lama `X-Frame-Options` dan direktif CSP `frame-ancestors` yang lebih baru. Pasang keduanya untuk browser lama dan baru. ```nginx add_header X-Frame-Options "SAMEORIGIN" always; ``` Pakai `DENY` bila halamanmu tidak pernah perlu dimuat dalam frame, termasuk oleh situsmu sendiri. ### Langkah 5: Permissions-Policy Membatasi fitur browser yang boleh dipakai halaman, seperti kamera, mikrofon, dan lokasi. Kalau websitemu tidak memakainya, matikan. ```nginx add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always; ``` Bila ada fitur yang memang dipakai, misalnya peta toko yang meminta lokasi, izinkan untuk situsmu sendiri dengan `geolocation=(self)`. ### Langkah 6: CSP, mulai dari mode Report-Only CSP menentukan dari mana skrip, gaya, gambar, font, dan frame boleh dimuat. Ini pertahanan kuat terhadap XSS, tapi juga header yang paling sering membuat website rusak. Kirim dulu dalam mode laporan, yang tidak memblokir apa pun, hanya mencatat pelanggaran di konsol browser: ```nginx add_header Content-Security-Policy-Report-Only "default-src 'self'; img-src 'self' data: https:; script-src 'self'; style-src 'self' 'unsafe-inline'; frame-ancestors 'self'; base-uri 'self'; form-action 'self'" always; ``` Buka halaman-halaman penting, termasuk checkout, formulir, dan halaman dengan video atau peta. Catat sumber yang diblokir di konsol, misalnya domain analitik, CDN font, atau widget chat. Tambahkan sumber yang memang kamu pakai ke direktif yang sesuai. Setelah beberapa hari tanpa laporan yang tidak terduga, ganti nama header menjadi `Content-Security-Policy`. Hindari `'unsafe-inline'` dan `'unsafe-eval'` di `script-src` bila memungkinkan, karena keduanya melemahkan perlindungan XSS. Untuk skrip inline yang tidak bisa dipindah, pertimbangkan nonce atau hash. ## Bagaimana menguji hasilnya? Muat ulang konfigurasi (`nginx -t && systemctl reload nginx`, atau `apachectl configtest` lalu reload Apache), lalu cek lagi dengan `curl -sI`. Untuk penilaian yang lebih lengkap, gunakan alat pemindai header publik seperti securityheaders.com atau Mozilla HTTP Observatory. Keduanya memberi nilai dan saran per header. Uji juga dari sisi pengguna: login, checkout, unggah file, dan fitur pihak ketiga. Header keamanan yang membuat pelanggan gagal membayar bukan kemenangan. ## Ringkasan header | Header | Fungsi | Nilai awal yang aman | Risiko merusak | |:--|:--|:--|:--| | Strict-Transport-Security | Paksa HTTPS | `max-age=86400`, naikkan bertahap | Sedang, bila ada subdomain tanpa HTTPS | | X-Content-Type-Options | Cegah tebak jenis file | `nosniff` | Sangat rendah | | Referrer-Policy | Batasi informasi asal tautan | `strict-origin-when-cross-origin` | Rendah | | X-Frame-Options | Cegah clickjacking (browser lama) | `SAMEORIGIN` atau `DENY` | Rendah, kecuali halaman di-embed | | Permissions-Policy | Batasi kamera, mikrofon, lokasi | `camera=(), microphone=(), geolocation=()` | Rendah | | Content-Security-Policy | Batasi sumber skrip dan konten | Mulai dari Report-Only | Tinggi bila tidak diuji | Header keamanan melengkapi, bukan menggantikan, perlindungan lain. WAF menyaring permintaan berbahaya sebelum sampai ke aplikasi, seperti dibahas di [apa itu WAF](https://nivelva.com/insight/apa-itu-waf), sedangkan pengamanan server Nginx yang lebih luas ada di [hardening Nginx untuk server produksi](https://nivelva.com/insight/hardening-nginx-server-produksi). ## Pertanyaan yang sering diajukan ### Apakah header X-XSS-Protection masih perlu? Menurut MDN, header ini sudah tidak standar dan fitur penyaring XSS lama yang dikendalikannya tidak lagi dipakai browser modern. Perlindungan XSS sekarang bertumpu pada CSP dan kode yang aman. ### Apakah security headers memengaruhi SEO? Header ini tidak dikenal sebagai faktor peringkat langsung. Manfaatnya pada keamanan pengunjung, dan HSTS membantu memastikan semua akses lewat HTTPS. ### Saya memakai CDN, di mana header sebaiknya dipasang? Bisa di server asal atau di CDN. Pilih satu tempat agar tidak terjadi header ganda dengan nilai berbeda. ### Kenapa header tidak muncul padahal sudah ditambahkan di Nginx? Biasanya karena add_header di blok location menimpa header dari blok server, atau konfigurasi belum di-reload. Cek dengan nginx -t lalu reload. Checklist sebelum selesai: - HTTPS berjalan di semua halaman sebelum HSTS dipasang. - `nosniff`, Referrer-Policy, X-Frame-Options, dan Permissions-Policy aktif. - CSP sudah diuji dalam mode Report-Only di halaman penting. - Header dicek ulang dengan `curl -sI` dan alat pemindai. - Login, checkout, dan formulir diuji setelah perubahan. ## Sumber - - - --- Diterbitkan oleh Nivelva Insight (https://nivelva.com/insight/). Artikel ini: https://nivelva.com/insight/security-headers-csp-hsts Kontak Nivelva: WhatsApp https://wa.me/6285111245007, email hello@nivelva.com