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:

pgsql
Header always set X-Frame-Options "SAMEORIGIN"

2. PHP

Di PHP, bisa set header sebelum output:

php
header('X-Frame-Options: DENY');

3. Nginx

Di konfigurasi Nginx:

mathematica
add_header X-Frame-Options "DENY";

💡 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