Front-End Geliştirmede Cookie ve Local Storage'da Token Saklamak

Bildiğiniz gibi yazılım geliştirme dünyasında, JSON Web Token'lar (JWT) client&server arasında güvenli şekilde iletişim kurabilmek için zaman içerisinde endüstri standardı haline geldiler (RFC 7519 ve günümüzde oldukça yaygın olarak kullanılıyorlar.

Ancak temel bir soru(n) pek çok geliştirici için hala geçerliliğini koruyor:

Tokenları(jetonları) ön yüzde nerede/nasıl saklamalıyız?

Bu nedenle bu yazıda token saklamak için en yaygın diyebileceğimiz iki seçeneğe: Çerezlere (Cookie'lere) ve Yerel Depolamaya (Local Storage'a) değinip kısaca karşılaştıracağız.

Karşılaştırmalı Analiz

Local Storage

Local Storage kullanmak için yalnızca localStorage nesnesini kullanmamız yeterli:

localStorage.setItem("yourTokenName", yourToken);
localStorage.getItem("yourTokenName", yourToken);

Artılar:

Kolaylık: Back-end kurulumu vs gerektirmez; sadece düz JavaScript kullanarak halledebilirsiniz.
Fazla Depolama Kapasitesi: Yaklaşık 5 MB kapasiteye sahip, büyük verileri barındırabilir.

Eksiler:

Cross-Site Scripting (XSS) saldırılarına karşı savunmasızdır. Kötü niyetli aktörler, JavaScript zafiyetlerinden faydalanarak Local Storage'da saklanan token'lara (jetonlara) erişebilir; çünkü sitenizde JavaScript çalıştırabilirler.

Cookies(Çerezler)

Çerez yönetimini, kod aracılığıyla veya HTTP istekleri ile gerçekleştirebiliriz:

document.cookie = "cookieName=value";
// veya HTTP header ile
Set-Cookie: <cookie-name>=<cookie-value>

Artılar:

Gelişmiş Güvenlik: httpOnly ve secure(güvenli) çerezler kullanmak, JavaScript tarafından erişim sağlanmasını engeller. Bu, saldırganlar sitenizde Javascript çalıştırabilse dahi çerezlerden token okuma girişimlerine karşı ek bir güvenlik katmanı sağlamış olur.
Expiration Date: Çerezler, belirli bir süre için yapılandırılabilirler.

Eksiler:

Sınırlı Depolama: Çerezler yalnızca 4 KB depolama alanı sunar.

Güvenlik

XSS Saldırıları

Dediğimiz gibi, Yerel Depolama'nın XSS saldırılarına karşı hassas olması aslen ciddi bir endişedir. Çünkü JavaScript zafiyetlerinden faydalanan saldırganlar, Yerel Depolama'da saklanan token'ları ele geçirebilirler. Fakat httpOnly çerezler doğrudan JavaScript tarafından erişilemese de, XSS saldırılarına konu olan token hırsızlığına karşı tamamen dayanıklıdır diyemeyiz.

Saldırganlar Javascript ile sunucuya hala HTTP istekleri gönderebilir ve mevcut çerezlerin bu HTTP Request'e otomatik olarak dahil edilmesini sağlayabilir. Bu yaklaşım kulağa biraz daha karmaşık gelse ve tam olarak token içeriğini okuyamasa da çerezlerin de tamamen güvenli olmadığını gösterir diyebiliriz.

CSRF Saldırıları

Siteler arası istek sahteciliği olarak çevirebileceğimiz CSRF, bir saldırganın kullanıcıları gerçekleştirmek istemedikleri eylemleri gerçekleştirmeye yönlendirmesine olanak tanıyan bir web güvenlik açığıdır.

Fakat bu risk, çerezlere sameSite flag eklenmesi ve anti-CSRF token gibi çözümler ile hafifletilebilir.

Sonuç & Özet

Çerezler ve Yerel Depolama arasındaki jeton saklama tartışmasında, kendine ait eksikleri olsa dahi daha tercih edilebilir bir seçenek olarak ortaya çıkan şu an için çerezler.

• Hem localStorage hem de çerezler XSS saldırılarına karşı savunmasız, ancak httpOnly çerezleri kullandığınızda saldırganın saldırıyı gerçekleştirmesi daha zordur.

• Çerezler CSRF saldırılarına karşı savunmasızdır, ancak sameSite bayrağı ve anti-CSRF kullanılarak hafifletilebilir.

• Authorization: Bearer header'ı kullanmanız gerekse veya JWT'niz 4KB'den büyük olsa bile çalışmasını sağlayabilirsiniz.