Security Headers 101: X-Frame-Options Bukan Sekadar Tampilan
Kalau kamu pernah dengar istilah security headers, pasti tahu itu bagian penting dari keamanan website. Salah satu header yang sering diabaikan tapi sangat berguna adalah X-Frame-Options.
Meski namanya terdengar teknis dan “cuma tampilan”, header ini sebenarnya bisa menyelamatkan website kamu dari serangan berbahaya. Yuk, kita pelajari apa itu X-Frame-Options dengan bahasa sederhana!
🤔 Apa Itu X-Frame-Options?
X-Frame-Options adalah header HTTP yang memberitahu browser apakah sebuah halaman boleh dimuat di dalam frame atau iframe pada halaman lain.
Kenapa penting?
Karena banyak serangan, seperti clickjacking, memanfaatkan teknik menyembunyikan halaman asli di dalam iframe dan membuat pengguna melakukan klik tanpa sadar.
🕵️♂️ Contoh Serangan Clickjacking
Bayangkan kamu sedang membuka website bank. Tapi sebenarnya halaman bank itu dipasang di iframe tersembunyi di situs jahat.
Situs jahat menipu kamu untuk klik tombol yang sebenarnya adalah perintah transfer uang di halaman bank yang tersembunyi.
Hasilnya, kamu melakukan aksi berbahaya tanpa sadar!
🔧 Cara Kerja X-Frame-Options
Header ini memberi tahu browser apakah mengizinkan halaman web dimasukkan dalam iframe atau tidak.
Ada tiga opsi utama:
Nilai Header | Artinya |
---|---|
DENY | Tidak boleh dimuat di iframe sama sekali |
SAMEORIGIN | Boleh dimuat dalam iframe asal domain sama |
ALLOW-FROM URL | Boleh dimuat dalam iframe di URL tertentu saja |
🛡️ Contoh Penggunaan X-Frame-Options
1. Header HTTP
Kalau kamu punya server Apache, bisa tambahkan di .htaccess
:
2. PHP
Di PHP, bisa set header sebelum output:
3. Nginx
Di konfigurasi Nginx:
💡 Kenapa X-Frame-Options Penting?
-
Mencegah clickjacking
Browser yang mematuhi header ini akan menolak menampilkan halaman di iframe yang tidak diizinkan. -
Meningkatkan kepercayaan pengguna
Pengguna jadi lebih aman karena tidak mudah ditipu klik tersembunyi. -
Mudah diterapkan
Cukup pasang satu baris header di server kamu.
⚠️ Catatan Penting
-
Tidak semua browser lama mendukung X-Frame-Options dengan sempurna.
-
Untuk proteksi lebih lengkap, bisa gunakan header baru Content-Security-Policy (CSP) dengan directive
frame-ancestors
.
🧾 Kesimpulan
Meskipun namanya terdengar “cuma tampilan”, X-Frame-Options adalah pertahanan nyata untuk website kamu dari serangan clickjacking.
Dengan mengaktifkan header ini, kamu membantu melindungi pengguna dari trik jahat yang bisa merugikan.
Jadi, jangan lupa pasang X-Frame-Options di server kamu—karena keamanan website bukan soal tampilan, tapi perlindungan nyata!
Penulias : Muhammad Aditya Alkhawarizmi
Nim : 23156201023
jurusan : Sistem Komputer