Cookie Yönetimi JavaScript ile

jul 12, 2026 OP · editado jul 12

Autor del tema #0

Cookie Yönetimi JavaScript ile

Web uygulamaları geliştirirken kullanıcı deneyimini kişiselleştirmek, oturum bilgilerini tutmak veya basit durum yönetimi yapmak için sıklıkla çerezlere (cookie) başvururuz. Tarayıcı tarafında çalışan bu küçük bilgi parçacıkları, istemci ile sunucu arasında adeta bir hafıza görevi görüyor; ancak onları doğru ve güvenli bir şekilde yönetmek, özellikle de JavaScript ile, bazen detaylı bir dikkat gerektirebiliyor. Gelin, bu konuya biraz daha yakından bakalım, nelere dikkat etmemiz gerekiyor, hangi yöntemleri kullanmalıyız...

Çerezler, aslında HTTP protokolünün "durumsuz" (stateless) yapısını aşmak için tasarlanmış basit metin dosyalarıdır. Bir kullanıcı bir web sitesini ziyaret ettiğinde, sunucu bu kullanıcıya özel bazı bilgileri (örneğin, oturum ID'si, dil tercihi, sepet içeriği) çerez olarak tarayıcıya gönderir. Tarayıcı da bu çerezleri saklar ve aynı sunucuya yapılan sonraki her istekte otomatik olarak geri gönderir. Bu sayede sunucu, aynı kullanıcıyı tanıyabilir ve ona özel bir deneyim sunabilir. JavaScript tarafında çerezlerle çalışmak, bu bilgileri dinamik olarak okuma, yazma ve silme yeteneği kazandırır ki bu da modern web uygulamaları için vazgeçilmez bir yetenek, değil mi? Ancak, GDPR, KVKK gibi veri gizliliği düzenlemeleriyle birlikte çerez yönetimi sadece teknik bir konu olmaktan çıkıp, yasal bir zorunluluk haline de geldi. Kullanıcı rızası olmadan çerez yerleştirmek artık ciddi yaptırımlarla karşılaşılabilecek bir durum. İşte tam da bu noktada, JavaScript ile çerezleri nasıl doğru ve bilinçli bir şekilde yöneteceğimizi bilmek hayati önem taşıyor.

Temel Çerez İşlemleri: Oluşturma, Okuma ve Silme

JavaScript'in çerezlerle etkileşim kurmasını sağlayan temel mekanizma

CODE

1document.cookie

özelliğidir. Bu özellik biraz garip bir davranışa sahip; hem okuma hem de yazma için kullanılıyor ama her iki durumda da farklı kurallara tabi. Hadi tek tek inceleyelim.

Çerez Oluşturma/Ayarlama:

Bir çerez oluşturmak veya mevcut bir çerezi güncellemek için

CODE

1document.cookie

özelliğine bir string atarız. Bu string'in formatı oldukça spesifiktir:

CODE

1"key=value; attribute1=value1; attribute2=value2"

şeklinde olmalıdır. Buradaki en kritik nokta, her atama işleminde yalnızca bir çerezin ayarlanabilmesidir. Eğer birden fazla çerez ayarlamak istiyorsanız, her biri için ayrı ayrı atama yapmanız gerekir.

key=value: Çerezin adı ve değeri. Değer URL-encoded olmalıdır, özellikle özel karakterler içeriyorsa.
expires=date veya max-age=seconds: Çerezin ne zaman sona ereceğini belirler.
CODE
```
1expires
```
için GMT formatında bir tarih string'i (örneğin,
CODE
```
1new Date().toUTCString()
```
ile elde edilebilir) kullanılırken,
CODE
```
1max-age
```
için saniye cinsinden bir ömür süresi belirtilir. Eğer ikisi de belirtilmezse, çerez oturum çerezi olur ve tarayıcı kapatıldığında silinir.
path=path: Çerezin hangi URL yolu altında geçerli olacağını belirler. Varsayılan olarak, çerezin ayarlandığı sayfanın yolu kullanılır. Eğer
CODE
```
1path=/ 
```
olarak ayarlanırsa, çerez tüm domain için geçerli olur.
domain=domain: Çerezin hangi domain için geçerli olacağını belirler. Güvenlik nedeniyle, yalnızca mevcut domain veya onun bir üst domain'i için ayarlanabilir. Alt domain'ler için çerez ayarlayamazsınız.
secure: Bu bayrak ayarlanırsa, çerez sadece HTTPS bağlantıları üzerinden gönderilir. Güvenlik için şiddetle tavsiye edilir.
samesite=Lax|Strict|None: Modern tarayıcılar için önemli bir güvenlik özelliği. CSRF (Cross-Site Request Forgery) saldırılarına karşı koruma sağlar.
- Lax (Varsayılan): Çerezler sadece aynı site kaynaklı isteklerde veya kullanıcı üst düzey navigasyon (linke tıklama, URL çubuğuna yazma) ile siteye yönlendirildiğinde gönderilir.
- Strict: Çerezler sadece istek aynı site kaynaklı olduğunda gönderilir. Daha katıdır.
- None: Çerezler, siteler arası isteklerde de gönderilir. Ancak bu durumda
  CODE
```
1Secure
```
  bayrağı da ayarlanmak zorundadır.
httponly: Bu bayrak JavaScript ile ayarlanamaz, sunucu tarafında ayarlanır. Eğer
CODE
```
1HttpOnly
```
ayarlanmışsa, çerez
CODE
```
1document.cookie
```
üzerinden JavaScript ile erişilemez hale gelir. Bu, XSS (Cross-Site Scripting) saldırılarında çerez hırsızlığını önlemek için kritik bir güvenlik önlemidir.

İşte basit bir çerez ayarlama örneği:

CODE

1234567891011121314151617
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    // Path ve SameSite güvenliği için önemli
    document.cookie = name + "=" + (value || "")  + expires + "; path=/; SameSite=Lax";
}

// Örnek kullanım: 'username' adında, 'John Doe' değerinde, 7 gün süreli bir çerez
setCookie("username", "John Doe", 7);

// Sadece oturum süresince geçerli olacak bir çerez (expires veya max-age yok)
setCookie("lastVisit", new Date().toISOString(), null);

Çerez Okuma:

CODE

1document.cookie

özelliğini okuduğunuzda, mevcut domain ve path için erişilebilir olan tüm çerezleri

CODE

1"key1=value1; key2=value2; key3=value3"

formatında tek bir string olarak döner. Bu string'i doğrudan kullanamayız; istediğimiz çerezi bulmak için ayrıştırmamız gerekir.

CODE

123456789101112131415161718192021
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';'); // Tüm çerezleri ayır
    for(let i=0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length); // Baştaki boşlukları temizle
        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length, c.length); // İstenen çerezin değerini döndür
        }
    }
    return null; // Çerez bulunamazsa null döndür
}

// Örnek kullanım: 'username' çerezini oku
const username = getCookie("username");
if (username) {
    console.log("Hoş geldiniz, " + username);
} else {
    console.log("Henüz giriş yapmadınız.");
}

Çerez Silme:

Bir çerezi silmenin aslında doğrudan bir "deleteCookie" metodu yoktur. Bunun yerine, çerezin

CODE

1expires

değerini geçmiş bir tarihe ayarlayarak veya

CODE

1max-age

değerini

CODE

olarak belirterek tarayıcıya bu çerezi silmesini söyleriz. Buradaki önemli bir detay, çerezi ayarlarken kullandığınız

CODE

1path

CODE

1domain

değerlerinin, silme işlemi sırasında da aynı olması gerektiğidir. Aksi takdirde, tarayıcı silmek istediğiniz çerezi bulamaz ve işlem başarısız olur.

CODE

123456789
function eraseCookie(name) {
    // Geçmiş bir tarih belirterek çerezi sil
    // Path'in doğru ayarlanması kritik!
    document.cookie = name + "=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
}

// Örnek kullanım: 'username' çerezini sil
eraseCookie("username");

Gelişmiş Yaklaşımlar ve Güvenlik Endişeleri

Çerez Kütüphaneleri:

Yukarıdaki manuel çerez yönetimi fonksiyonları, temel işlemler için yeterli olsa da, özellikle büyük ve karmaşık uygulamalarda bu tarz bir yönetimi sürdürmek hem hata yapmaya açıktır hem de zaman alıcı olabilir. İşte bu noktada, popüler çerez yönetim kütüphaneleri devreye giriyor. Örneğin, js-cookie gibi kütüphaneler, çerez işlemlerini çok daha basit ve okunabilir bir hale getirir.

CODE

123456789
// js-cookie ile çerez ayarlama
Cookies.set('myCookie', 'myValue', { expires: 7, path: '/', sameSite: 'Lax', secure: true });

// js-cookie ile çerez okuma
const myCookieValue = Cookies.get('myCookie');

// js-cookie ile çerez silme
Cookies.remove('myCookie', { path: '/' }); // Silme işlemi için de path'in belirtilmesi gerekebilir

Bu kütüphaneler, çerez değerlerini otomatik olarak URL-encode/decode eder, tarih formatlama gibi detaylarla uğraşmanıza gerek kalmaz ve daha güvenli varsayılan değerler sunar. Projelerinizde bu tür araçları kullanmak, hem geliştirme hızınızı artırır hem de potansiyel hataları minimize eder.

Güvenlik Endişeleri:

Temas similares

Reportar contenido