Bir Kimlik Doğrulama Hikayesi
Sistem tasarımını seviyorum. Yazılımı kullanıcılar için harika kılan küçük kararlar üzerine düşünmeyi seviyorum.
Bir mühendis olarak güvenliğe önem veririm. Yazılım, güvensizse veya saldırılar nedeniyle para kaybına yol açıyorsa işe yaramazdır. Her seferinde sorunsuz çalışan ürünler inşa etmek istiyorum.
Geçenlerde bir yapay zeka girişimi için kimlik doğrulama üzerine çalıştım. Frontend için Next.js kullandım. Next.js, frontend ve backend'i tek bir kod tabanında birleştirdiği için küçük ekipler için harikadır.
Bu proje sırasında, kimlik doğrulama token'larının tarayıcıda nasıl saklanacağı ve korunacağı üzerine odaklandım. Çözüm çerezler (cookies), özellikle de HttpOnly çerezleridir.
Neden Local Storage yerine çerezleri kullanmalıyız?
Local Storage kullanımı kolaydır ancak bir riski vardır. JavaScript tarafından okunabilir. Bu da onu Cross-Site Scripting (XSS) saldırılarına karşı savunmasız hale getirir. Sitenizde kötü niyetli bir script çalışırsa, kullanıcınızın token'ını çalabilir.
Çerezler bu sorunu çözer. Bir çereze HttpOnly bayrağı (flag) ekleyebilirsiniz. Bu, tarayıcıya şunu söyler: "Bu çerezi yalnızca HTTP istekleri aracılığıyla gönder. JavaScript'in ona dokunmasına izin verme."
Bir saldırgan JavaScript kullanarak çerezi okumaya çalışırsa hiçbir şey göremez. Çerez onlar için görünmez kalır ancak tarayıcı onu sunucunuza otomatik olarak göndermeye devam eder.
Çerezleri daha da güvenli hale getirmek için iki başka bayrak daha kullanıyorum:
• Secure: Çerezin yalnızca HTTPS üzerinden iletilmesini sağlar. • SameSite=Lax: Cross-Site Request Forgery (CSRF) saldırılarını önlemeye yardımcı olur.
Bunu Next.js ile nasıl uyguladım:
Backend'imi (FastAPI) tarayıcıdan gizli tutmak istedim. Sunucudan sunucuya (server-to-server) bir kurulum oluşturmak için Next.js'i bir proxy olarak kullandım.
- Kullanıcı bir Next.js Server Action aracılığıyla giriş yapar.
- Server Action, kimlik bilgilerini FastAPI'ye gönderir.
- FastAPI, Next.js sunucusuna bir token döndürür.
- Next.js sunucusu bu token'ı bir HttpOnly çerezine yazar.
- Tarayıcı çerezi saklar ancak okuyamaz.
Kullanıcının veriye ihtiyacı olduğunda, Next.js sunucusu çerezi okur ve kullanıcı adına backend ile konuşur. Hassas token, tarayıcının JavaScript ortamına asla temas etmez.
Bu kurulum backend'imi izole tutar ve kullanıcılarımı daha güvenli kılar.
Siz Next.js projelerinizde kimlik doğrulamayı nasıl yönetiyorsunuz? Yaklaşımınızı duymayı çok isterim.