Clickjacking ve X-Frame-Options: sayfalarını iframe'lerden uzak tut
Clickjacking, sayfanı saldırgan kontrolündeki bir sitede şeffaf bir iframe içinde yükleyerek kullanıcıları gizli kontrollere tıklamaya kandırır. X-Frame-Options — ya da modern CSP frame-ancestors direktifi — tarayıcılara sayfanı gömmeyi reddetmelerini söyler ve saldırıyı tamamen kapatır.
Nedir
Bir clickjacking saldırısı, siteni saldırganın sayfasındaki görünmez veya yarı saydam bir iframe içine alarak çalışır. Kurban tuzak içeriği görür ve masum görünen bir düğmeye tıklar; gizli iframe, sayfandaki gerçek tıklamayı — bir banka transferi, bir ayar değişikliği, bir OAuth yetkisi — kullanıcı fark etmeden yakalar.
X-Frame-Options, iki kullanışlı değeri olan bir HTTP yanıt header'ıdır: DENY (herkes tarafından iframe'e almayı reddet) ve SAMEORIGIN (yalnızca kendi origin'indeki sayfaların iframe'e almasına izin ver). CSP'nin frame-ancestors direktifi aynı işi daha ince bir kontrolle yapar — belirli güvenilir origin'leri listeleyebilirsin — ve CSP'yi destekleyen tarayıcılarda X-Frame-Options'ın yerini alır.
Neden önemli
Anlamlı bir eylemi olan herhangi bir sayfa — hesap ayarları, ödeme onayı, e-posta tercihleri veya bir yönetici anahtarı — bir clickjacking hedefidir. Kötü niyetli bir sayfaya düşen oturum açmış bir kullanıcı, hiçbir şeyin yanlış gittiğine dair görünür bir işaret olmadan asla niyet etmediği gerçek eylemleri yapmaya kandırılabilir.
X-Frame-Options eklemenin hiçbir maliyeti yoktur ve her modern tarayıcı tarafından desteklenir. Hassas eylemler gerçekleştiren sayfalarda onu atlamak, eksik bir özellik değil, düpedüz bir yanlış yapılandırmadır.
Nasıl düzeltilir
Header'ı next.config.js içinde ayarla ki her route'a uygulansın. DENY, gömülmesi gerekmeyen uygulamalar için güvenli varsayılandır.
// next.config.js
module.exports = {
async headers() {
return [
{
source: "/:path*",
headers: [{ key: "X-Frame-Options", value: "DENY" }],
},
];
},
};CSP'nin frame-ancestors direktifi, modern tarayıcılarda X-Frame-Options'ın yerini alır ve sana origin başına kontrol verir. Onu zaten ayarladığın Content-Security-Policy header'ına ekle.
// extend your existing CSP string
const csp = [
// ... your other directives ...
"frame-ancestors 'none'",
].join("; ");Sayfaları kendi sitende meşru biçimde gömüyorsan — bir önizleme iframe'i ya da aynı origin'de gömülü bir widget — DENY yerine X-Frame-Options: SAMEORIGIN veya frame-ancestors 'self' kullan.
Yanıtları bir nginx proxy üzerinden sunuyorsan, header'ı server bloğuna ekle.
add_header X-Frame-Options "DENY" always;SSS
X-Frame-Options mı yoksa CSP frame-ancestors mı — hangisini kullanmalıyım?
İkisini de kullan. X-Frame-Options eski tarayıcıları kapsar; CSP'deki frame-ancestors sana origin başına ayrıntı verir ve modern standarttır. Sorunsuz bir arada bulunurlar — CSP'yi destekleyen tarayıcılar frame-ancestors kullanır ve X-Frame-Options'ı yok sayar.
DENY, kendi widget'larımı veya analitik dashboard'larımı gömmeyi bozar mı?
Evet — DENY, kendi origin'in dâhil tüm iframe'e almayı engeller. Belirli bir sayfayı kendi alan adında bir iframe'e gömmen gerekiyorsa, SAMEORIGIN veya frame-ancestors 'self' kullan. Yalnızca gerçekten gömülmesi gereken sayfalar için gevşet.
AppSafe, eksik bir X-Frame-Options için hangi önem derecesini bildirir?
Orta. Tek başına anlık bir veri hırsızlığı vektörü değildir, ama hesap eylemleri gerçekleştiren herhangi bir sayfa onsuz gerçek bir clickjacking riski taşır.
Uygulaman etkileniyor mu?
AppSafe, bunu ve onlarca başka sorunu tek bir ücretsiz taramada kontrol eder.
Uygulamamı ücretsiz taraİlgili rehberler
Content-Security-Policy (CSP): nedir ve nasıl eklenir
Enjekte edilen script'lerin çalışmasını durduran header.
Secure, HttpOnly ve SameSite cookie flag'leri
Oturum cookie'lerinin çalınmasını önleyen üç flag.
CORS yanlış yapılandırması: joker ve yansıtma tuzakları
Her origin'e izin ver, her site API'ni okuyabilir.