Semua panduan
Tingkat SedangHeader Keamanan

Clickjacking dan X-Frame-Options: jauhkan halamanmu dari iframe

Clickjacking menipu pengguna agar mengklik kontrol tersembunyi di halamanmu dengan memuatnya di dalam iframe transparan pada situs yang dikendalikan penyerang. X-Frame-Options — atau directive CSP frame-ancestors yang modern — memberi tahu browser untuk menolak menyematkan halamanmu, sehingga menutup serangan itu sepenuhnya.

Apa itu

Serangan clickjacking bekerja dengan membingkai situsmu di dalam iframe yang tidak terlihat atau tembus pandang pada halaman penyerang. Korban melihat konten umpan dan mengklik sesuatu yang tampak seperti tombol tak berbahaya; iframe tersembunyi menangkap klik sebenarnya di halamanmu — transfer bank, perubahan pengaturan, pemberian OAuth — tanpa disadari pengguna.

X-Frame-Options adalah header respons HTTP dengan dua nilai yang berguna: DENY (tolak framing oleh siapa pun) dan SAMEORIGIN (hanya izinkan framing oleh halaman di origin-mu sendiri). Directive frame-ancestors milik CSP melakukan tugas yang sama dengan kontrol lebih halus — kamu bisa mendaftar origin tepercaya tertentu, dan ia menggantikan X-Frame-Options di browser yang mendukung CSP.

Kenapa penting

Halaman apa pun dengan aksi yang berarti — pengaturan akun, konfirmasi pembayaran, preferensi email, atau toggle admin — adalah target clickjacking. Pengguna yang sedang login yang mendarat di halaman jahat bisa ditipu untuk melakukan aksi nyata yang tidak pernah mereka niatkan, tanpa tanda kasat mata bahwa ada yang salah.

X-Frame-Options tidak memakan biaya untuk ditambahkan dan didukung setiap browser modern. Menghilangkannya di halaman yang menjalankan aksi sensitif adalah kesalahan konfigurasi yang gamblang, bukan fitur yang belum ada.

Cara memperbaiki

Tambahkan X-Frame-Options secara global di Next.js

Set header di next.config.js agar berlaku untuk setiap route. DENY adalah default aman untuk aplikasi yang tidak perlu disematkan.

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [{ key: "X-Frame-Options", value: "DENY" }],
      },
    ];
  },
};
Tambahkan frame-ancestors ke CSP-mu

Directive frame-ancestors milik CSP menggantikan X-Frame-Options di browser modern dan memberimu kontrol per-origin. Tambahkan ke header Content-Security-Policy yang sudah kamu setel.

// extend your existing CSP string
const csp = [
  // ... your other directives ...
  "frame-ancestors 'none'",
].join("; ");
Gunakan SAMEORIGIN kalau kamu menyematkan di dalam domainmu sendiri

Kalau kamu memang secara sah menyematkan halaman di situsmu sendiri — iframe pratinjau atau widget tersemat di origin yang sama — pakai X-Frame-Options: SAMEORIGIN alih-alih DENY, atau frame-ancestors 'self'.

Konfigurasikan nginx

Kalau kamu menyajikan respons lewat proxy nginx, tambahkan header di server block-mu.

add_header X-Frame-Options "DENY" always;

FAQ

X-Frame-Options atau CSP frame-ancestors — mana yang harus kupakai?

Pakai keduanya. X-Frame-Options mencakup browser lama; frame-ancestors di CSP memberimu granularitas per-origin dan merupakan standar modern. Keduanya berdampingan dengan aman — browser yang mendukung CSP memakai frame-ancestors dan mengabaikan X-Frame-Options.

Apakah DENY merusak penyematan widget atau dashboard analitikku sendiri?

Ya — DENY memblokir semua framing, termasuk origin-mu sendiri. Kalau kamu perlu menyematkan halaman tertentu dalam iframe di domainmu sendiri, pakai SAMEORIGIN atau frame-ancestors 'self'. Longgarkan hanya untuk halaman yang benar-benar butuh penyematan.

Severity apa yang dilaporkan AppSafe untuk X-Frame-Options yang hilang?

Medium. Ini bukan vektor pencurian data langsung dengan sendirinya, tapi halaman apa pun yang menjalankan aksi akun adalah risiko clickjacking nyata tanpanya.

Apakah aplikasimu terpengaruh?

AppSafe memeriksa ini dan puluhan masalah lain dalam satu pemindaian gratis.

Pindai aplikasiku gratis

Panduan terkait

Content-Security-Policy (CSP): apa itu dan cara menambahkannya

Header yang mencegah script sisipan berjalan.

Flag cookie Secure, HttpOnly, dan SameSite

Tiga flag yang mencegah cookie sesi dicuri.

Kesalahan konfigurasi CORS: jebakan wildcard dan reflection

Izinkan setiap origin dan situs mana pun bisa membaca API-mu.