Ana Karargâh Neler Yapıyoruz?
Hikayemizin Perde Arkası Beyin Kıvılcımları Bağlantıya Geçin

Web Storage (LocalStorage ve SessionStorage) Güvenliği

Merhaba değerli okuyucular! Bugün, modern web uygulamalarında yaygın olarak kullanılan Web Storage (LocalStorage ve SessionStorage) teknolojilerinin güvenlik yönlerini derinlemesine inceleyeceğiz. Bu depolama mekanizmalarının nasıl güvenli bir şekilde kullanılabileceğini, potansiyel riskleri ve en iyi güvenlik uygulamalarını ele alacağız. Hazırsanız, web uygulamalarınızı daha güvenli hale getirmenin yollarını keşfetmeye başlayalım!

Web Storage Nedir?

Web Storage, web tarayıcılarında veri depolamak için kullanılan bir API'dir. İki ana türü vardır:

  • LocalStorage: Kalıcı depolama sağlar, tarayıcı kapatılsa bile veriler saklanır.
  • SessionStorage: Oturum bazlı depolama sağlar, tarayıcı sekmesi kapatıldığında veriler silinir.

Web Storage'ın Temel Kullanımı


// LocalStorage kullanımı
localStorage.setItem('username', 'JohnDoe');
const username = localStorage.getItem('username');

// SessionStorage kullanımı
sessionStorage.setItem('token', 'abc123');
const token = sessionStorage.getItem('token');

Web Storage Güvenlik Riskleri

1. XSS (Cross-Site Scripting) Saldırıları

Web Storage, JavaScript ile erişilebilir olduğundan XSS saldırılarına karşı savunmasızdır.

2. Veri Sızıntısı

Hassas bilgiler Web Storage'da saklanırsa, kötü niyetli scriptler bu bilgilere erişebilir.

3. CSRF (Cross-Site Request Forgery)

Web Storage'daki veriler, CSRF saldırılarında kullanılabilir.

4. Fiziksel Erişim

Özellikle LocalStorage'da saklanan veriler, cihaza fiziksel erişimi olan kişiler tarafından görüntülenebilir.

Güvenlik Best Practices

1. Hassas Bilgileri Saklamaktan Kaçının

Asla şifreler, kredi kartı bilgileri veya diğer hassas verileri Web Storage'da saklamayın.


// Yanlış kullanım
localStorage.setItem('password', 'secretPass123'); // Asla yapmayın!

// Doğru kullanım
localStorage.setItem('userPreferences', JSON.stringify({theme: 'dark', fontSize: 'large'}));

2. Veriyi Şifreleyin

Eğer hassas olmayan ancak yine de korunması gereken veriler saklıyorsanız, bunları şifreleyerek saklayın.


// Şifreleme fonksiyonu (örnek amaçlıdır, prodüksiyon için daha güvenli bir yöntem kullanın)
function encrypt(text, key) {
    const textToChars = text => text.split('').map(c => c.charCodeAt(0));
    const byteHex = n => ("0" + Number(n).toString(16)).substr(-2);
    const applySaltToChar = code => textToChars(key).reduce((a,b) => a ^ b, code);

    return text.split('')
        .map(textToChars)
        .map(applySaltToChar)
        .map(byteHex)
        .join('');
}

// Şifrelenmiş veriyi saklama
const sensitiveData = 'Önemli bilgi';
const encryptionKey = 'gizliAnahtar';
localStorage.setItem('protectedData', encrypt(sensitiveData, encryptionKey));

3. Content Security Policy (CSP) Kullanın

CSP, XSS saldırılarını önlemeye yardımcı olur ve Web Storage'ın güvenliğini artırır.


// Sunucu tarafında CSP başlığı ayarlama
Content-Security-Policy: script-src 'self' https://trusted-cdn.com;

4. HTTPS Kullanın

HTTPS, ağ üzerindeki veri transferini şifreler ve man-in-the-middle saldırılarını önler.

5. Düzenli Temizlik Yapın

Artık gerekli olmayan verileri düzenli olarak temizleyin.


function cleanUpStorage() {
    const oneWeekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
    for(let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        const item = JSON.parse(localStorage.getItem(key));
        if(item.timestamp < oneWeekAgo) {
            localStorage.removeItem(key);
        }
    }
}

6. Veri Doğrulama Yapın

Web Storage'dan alınan verileri her zaman doğrulayın ve temizleyin.


function getSafeItem(key) {
    const item = localStorage.getItem(key);
    return item ? DOMPurify.sanitize(item) : null;
}

7. Oturum Yönetimi İçin Dikkatli Olun

Oturum tokenlarını Web Storage'da saklamak yerine, HttpOnly çerezleri kullanmayı tercih edin.

Web Storage Alternatifleri

Bazı durumlarda, Web Storage yerine daha güvenli alternatifler kullanmak daha uygun olabilir:

  • HttpOnly Çerezleri: JavaScript erişimine kapalı, sadece sunucu tarafından erişilebilen çerezler.
  • IndexedDB: Daha karmaşık veri yapıları için, şifreleme ile birlikte kullanılabilir.
  • Web Crypto API: Tarayıcıda kriptografik işlemler yapmak için kullanılabilir.

Web Storage Güvenliğini Test Etme

Web uygulamanızın Web Storage güvenliğini test etmek için şu adımları izleyebilirsiniz:

  1. Tarayıcı geliştirici araçlarını kullanarak Web Storage içeriğini inceleyin.
  2. XSS zafiyetleri için uygulamanızı test edin.
  3. Web Storage'da saklanan verilerin şifrelenip şifrelenmediğini kontrol edin.
  4. CSP kurallarınızın etkin olduğundan emin olun.

Güvenli Web Storage Kullanımı

Web Storage, web uygulamalarında kullanışlı bir veri depolama mekanizması sunar, ancak güvenlik riskleri göz ardı edilmemelidir. Doğru güvenlik önlemleri alındığında, Web Storage güvenli bir şekilde kullanılabilir.

İşte güvenli Web Storage kullanımı için bir özet:


class SecureStorage {
    constructor(storage = localStorage) {
        this.storage = storage;
    }

    setItem(key, value, expirationInMinutes = 0) {
        const item = {
            value: this.encrypt(JSON.stringify(value)),
            expiry: expirationInMinutes ? new Date().getTime() + expirationInMinutes * 60000 : null
        };
        this.storage.setItem(key, JSON.stringify(item));
    }

    getItem(key) {
        const item = JSON.parse(this.storage.getItem(key));
        if (!item) return null;

        if (item.expiry && new Date().getTime() > item.expiry) {
            this.storage.removeItem(key);
            return null;
        }

        return JSON.parse(this.decrypt(item.value));
    }

    removeItem(key) {
        this.storage.removeItem(key);
    }

    clear() {
        this.storage.clear();
    }

    encrypt(text) {
        // Gerçek bir uygulamada güçlü bir şifreleme algoritması kullanın
        return btoa(text);
    }

    decrypt(text) {
        // Gerçek bir uygulamada güçlü bir şifre çözme algoritması kullanın
        return atob(text);
    }
}

// Kullanım
const secureStorage = new SecureStorage();
secureStorage.setItem('user', { name: 'John', role: 'admin' }, 60); // 60 dakika geçerli
const user = secureStorage.getItem('user');
console.log(user); // { name: 'John', role: 'admin' }

Bu sınıf, verileri şifreleyerek saklar, süresi dolmuş verileri otomatik olarak temizler ve genel olarak daha güvenli bir Web Storage kullanımı sağlar.

Siz Web Storage kullanırken hangi güvenlik önlemlerini alıyorsunuz? Karşılaştığınız zorluklar veya paylaşmak istediğiniz best practice'ler var mı? Yorumlarınızı bekliyoruz!

Güvenli kodlamalar ve her zaman temiz depolama alanları!