Tarayıcınızın Gizlice Koruduğu 5 Önemli Ön Yüz Güvenlik Riski

Web uygulamalarının güvenliği yalnızca arka uç geliştiricilerinin sorumluluğu değildir. Tarayıcılar, kullanıcıları birçok saldırıdan otomatik olarak koruyan özelliklerle donatılmıştır. Ancak modern uygulama geliştirme süreçlerinde dikkate alınmayan bu korumalar, farkında olmadan devre dışı bırakılabiliyor. Örneğin, yüz milyonlarca kullanıcıya hizmet veren platformlarda karşılaşılan güvenlik açıklarının %90’ından fazlası, geliştiricilerin tarayıcının sunduğu korumaları bilmemesinden kaynaklanıyor.

Peki tarayıcı hangi tehditlere karşı sizi koruyor ve bu korumaları nasıl etkili bir şekilde kullanabilirsiniz? İşte yaygın ama çoğunlukla gözden kaçan beş ön yüz güvenlik riski ve bunlara karşı alınabilecek basit önlemler.

XSS Saldırıları: Kötü Niyetli Kodunuzdaki Tehlike

Cross-Site Scripting (XSS), en sık karşılaşılan ön yüz güvenlik açığıdır. Temel prensibi basittir: saldırgan, kullanıcının tarayıcısında kendi JavaScript kodunu çalıştırmasına olanak tanıyan bir yol bulur. Bu kod, sayfanın erişebildiği tüm kaynaklara — çerezlere, localStorage’a, DOM’a ve API token’larına — erişebilir.

XSS saldırılarının çoğu, geliştiricilerin kullanıcıdan gelen içeriği güvenli bir şekilde işlememesinden kaynaklanır. Örneğin:

document.getElementById('username').innerHTML = userInput;

Eğer userInput değişkeni alert(document.cookie) gibi bir komut içeriyorsa, bu kod doğrudan çalıştırılır. Saldırı tamamlanmış olur.

Modern framework’ler bu riski büyük ölçüde azaltır. React, Vue ve Angular gibi araçlar varsayılan olarak kullanıcı girişini otomatik olarak kaçırır. JSX içerisinde {userInput} şeklinde kullanılan veriler, otomatik olarak HTML yerine metin olarak işlenir. Ancak bazı durumlarda bu koruma devre dışı bırakılır:

<div dangerouslySetInnerHTML={{ __html: userContent }} />

dangerouslySetInnerHTML özelliği, zengin metin ya da CMS içeriği gibi HTML’in gerekli olduğu durumlar için tasarlanmıştır. Ancak her kullanımında, içerik temizliğinden siz sorumlu olursunuz. Eğer güvenilir olmayan bir kaynaktan HTML içeriği render etmek zorundaysanız, mutlaka önceden temizleyin:

import DOMPurify from 'dompurify';
const cleanContent = DOMPurify.sanitize(userContent);
// Artık güvenli şekilde render edilebilir

Üçüncü parti komut dosyaları da sıkça gözden kaçan bir XSS kaynağıdır. Analytics kitleri, sohbet pencereleri ve reklam script’leri, sayfanıza kendi JavaScript’lerini yükler. Bu script’lerden herhangi biri saldırıya uğrarsa, kullanıcı verileri tehlikeye girer. Bu riski azaltmak için İçerik Güvenlik Politikası (CSP) kullanmak kritik önem taşır.

CSRF: Tarayıcının Varsayılan Koruması ve Sınırları

Cross-Site Request Forgery (CSRF), kullanıcının bilgi sahibi olmadan gerçekleştirilen bir saldırı türüdür. Örneğin, kullanıcı platformunuza giriş yaptıktan sonra kötü niyetli bir siteye yönlendirilir. Bu site, arka planda platformunuzun API’sına istek gönderir — kullanıcının çerezleri otomatik olarak bu isteğe eklenir, çünkü tarayıcılar bunu varsayılan olarak yapar.

Eğer API’nız, gelen istekleri kaynağına göre doğrulamıyorsa, saldırgan kullanıcı adına işlemler gerçekleştirebilir. Neyse ki tarayıcılar bu tehdidi yıllardır azaltıyor. SameSite çerez özelliği, bu saldırıya karşı etkili bir koruma sağlar:

Set-Cookie: session=abc123; SameSite=Lax; Secure; HttpOnly

• SameSite=Lax: Çerezleri yalnızca aynı site ya da üst düzey gezinme sırasında gönderir. Çapraz site isteklerinde çerezler eklenmez.
• SameSite=Strict: Çapraz site tüm isteklerde çerezlerin gönderilmesini engeller — bu özellikle hassas işlemler için idealdir.

Modern tarayıcılar çoğunlukla SameSite=Lax değerini varsayılan olarak uygular. Bu, geliştiricilerin ekstra adım atmadan aldıkları bir korumadır.

Ancak bu koruma, ön yüz ve arka uç hizmetlerinin farklı alan adlarında çalıştığı durumlarda sınırlı kalır. Örneğin, app.orneksite.com ve api.orneksite.com gibi alt alan adları genellikle aynı site olarak kabul edilirken, tamamen farklı alan adları aynı site olarak görülmez. Token tabanlı kimlik doğrulama kullanıyorsanız, CSRF riski büyük ölçüde ortadan kalkar, çünkü tarayıcılar Authorization başlığını otomatik olarak çapraz site isteklerine eklemez.

Clickjacking: Gizli İframe Tuzağı

Clickjacking, saldırganın hedef sayfayı görünmez bir iframe içerisinde gizleyerek kullanıcıları istemedikleri eylemleri gerçekleştirmeye yönlendirdiği bir saldırı türüdür. Örneğin, ödeme akışına sahip bir platformda saldırgan, kullanıcının gerçekleştireceği bir tıklamanın aslında platformda kritik bir işlemi tetiklemesini sağlayabilir.

Bu saldırıyı engellemenin en basit yolu, şu HTTP başlığını kullanmaktır:

X-Frame-Options: DENY

Ya da daha modern bir yaklaşımla, İçerik Güvenlik Politikası (CSP) üzerinden:

Content-Security-Policy: frame-ancestors 'none'

• DENY: Sayfanızın hiçbir iframe içerisinde yerleştirilmesini engeller.
• `frame-ancestors 'self' Sadece belirli alan adlarının iframe içinde yer almasına izin verir.

Bu koruma, yalnızca 30 saniye içinde uygulanabilen ve saldırı yüzeyini tamamen ortadan kaldıran basit bir adımdır. Clickjacking saldırılarına karşı alınabilecek en etkili önlemlerden biridir.

İçerik Güvenlik Politikası: Tüm Riskleri Yöneten Anahtar

İçerik Güvenlik Politikası (CSP), XSS, clickjacking ve veri hırsızlığı gibi birçok saldırı türüne karşı çok katmanlı bir koruma sağlar. CSP, hangi kaynakların sayfanıza yüklenmesine izin verileceğini belirleyen bir dizi yönerge sunar.

Temel bir CSP yapılandırması şu şekilde olabilir:

Content-Security-Policy: default-src 'self'; script-src 'self'  img-src 'self' data:; style-src 'self' 'unsafe-inline'; frame-ancestors 'none'

• default-src 'self': Varsayılan olarak yalnızca aynı kaynaklardan yüklenmelere izin verir.
• script-src: JavaScript dosyalarının yalnızca belirtilen kaynaklardan yüklenmesini sağlar.
• frame-ancestors 'none': Sayfanın hiçbir iframe içerisinde yerleştirilmesini engeller.

CSP, saldırıları tespit etmek ve engellemek için de kullanılabilir. Örneğin, report-uri yönergesi, politika ihlallerini belirli bir URL’ye rapor eder. Bu sayede saldırı girişimleri erken aşamada tespit edilebilir.

CSP uygularken dikkat edilmesi gereken en önemli nokta, politika kurallarını uygulamadan önce uygulamanızın tüm bağımlılıklarını test etmektir. Yanlış yapılandırılmış bir CSP, sayfanızın düzgün çalışmamasına neden olabilir.

Sonuç: Güvenliği Geliştirici Sorumluluğunda Tutun

Ön yüz güvenliği, yalnızca arka uç ekiplerinin ya da güvenlik uzmanlarının sorumluluğu değildir. Tarayıcıların sunduğu korumaları anlamak ve bunları uygulamak, modern web uygulamalarının güvenliğini sağlamanın temel taşlarından biri haline geldi. XSS, CSRF ve clickjacking gibi saldırılar, doğru önlemler alındığında büyük ölçüde azaltılabilir ya da tamamen engellenebilir.

Geliştiriciler olarak sorumluluğumuz, tarayıcıların varsayılan korumalarını devre dışı bırakmamak ve uygulama mimarisine güvenlik ilkelerini entegre etmektir. Bu sayede hem kullanıcı verilerini korur hem de güvenilir bir uygulama deneyimi sunarız. Unutmayın: güvenlik, bir eklenti ya da modül değildir — geliştirme sürecinin ayrılmaz bir parçasıdır.