JavaScript ve Çerezler

Articles

Bu makale, JavaScript ve çerezleri açıklar.

Çerezlerin temellerinden, okuma ve yazmadan, güvenliğe ve pratik örneklere kadar her şeyi adım adım dikkatlice açıklayacağız.

YouTube Video

javascript-cookie.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-cookie.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-cookie.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-cookie.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

JavaScript ve Çerezler

Çerez, kullanıcının tarayıcısında saklanan küçük veri parçalarını ifade eder. Bunlar, esas olarak aşağıdaki amaçlar için kullanılır:.

Kullanıcı kimlik doğrulaması (giriş durumunun korunması)
Kullanıcı ayarlarının kaydedilmesi (dil, tema vb.)
Takip (tarama geçmişi vb.)

JavaScript'te, çerezleri document.cookie kullanarak okuyabilir ve yazabilirsiniz.

Çerez oluşturma (yazma)

Çerezler aşağıdaki sözdizimi ile oluşturulur:.

1document.cookie = "username=JohnDoe";

Bu kod, tarayıcıda "username=JohnDoe" adlı bir çerezi kaydeder.

Son kullanma tarihine sahip çerezler oluşturma

Çerezlere bir son kullanma tarihi ayarlanabilir. Eğer bir son kullanma tarihi ayarlanmazsa, bu oturum çerezi olarak kabul edilir ve tarayıcı kapatıldığında silinir.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3const cookieText = "username=JohnDoe; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4document.cookie = cookieText;
5console.log(`Cookie Text  : ${cookieText}`);
6console.log(`Cookie Value : ${document.cookie}`);

expires niteliği, çerezin son kullanma tarihini UTC formatında belirtir.
path niteliği, çerezin gönderileceği yolu belirtir. / tüm siteyi ifade eder.
SameSite=None belirtirseniz, Cookie çapraz site isteklerinde bile gönderilir. Ancak bu durumda, her zaman Secure niteliğini eklemeniz gerekir.
Secure belirtmek, Cookienin yalnızca HTTPS iletişimine kısıtlanmasını sağlar ve güvenliği artırır.
document.cookie başvurusu ile mevcut sayfadaki tüm Cookieleri bir dize olarak alabilirsiniz.
console.log kullanarak tarayıcıda ayarlanmış gerçek Cookie değerleri ile alınabilen değerler arasındaki farkı kontrol edebilirsiniz.

Çerezleri alma (okuma)

Tüm çerezleri document.cookie ile bir dize olarak alabilirsiniz.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3document.cookie = "theme=dark; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4
5console.log(document.cookie);
6// Output: "username=JohnDoe; theme=dark"

document.cookie'nin dönüş değeri, tüm Cookielerin 'anahtar=değer;' formatında birleştirildiği tek bir dizedir.
Bu dizeyi ayrıştırmak ve istenilen değeri çıkartmak için bir fonksiyon kullanmak faydalıdır.

Bir çerezin değerini almak için fonksiyon

 1function getCookie(name) {
 2    const cookies = document.cookie.split('; ');
 3    for (const cookie of cookies) {
 4        const [key, value] = cookie.split('=');
 5        if (key === name) {
 6            return decodeURIComponent(value);
 7        }
 8    }
 9    return null;
10}
11
12console.log(getCookie("username")); // "JohnDoe"

Bu fonksiyon, split() kullanarak anahtar ve değerleri böler ve belirtilen anahtarla eşleşirse değeri döndürür.
decodeURIComponent kullanarak kodlanmış karakterleri doğru şekilde alabilirsiniz.
Eğer ilgili anahtar yoksa null döner.

Çerezleri silme

Bir çerezi silmek için, son kullanma tarihini geçmiş bir zamana ayarlayabilirsiniz.

1document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=None; Secure";
2
3console.log(document.cookie);
4// Output: "theme=dark"

username'e boş bir değer atayıp son kullanma tarihini geçmişe ayarlayarak silmiş olursunuz.
Bir Cookieyi silerken, oluşturulurken kullanılan path, SameSite ve Secure niteliklerini de eşleştirmeniz gerekir.
Bu örnekte username silinir ve theme=dark gibi diğer Cookieler kalır.

Çerez seçenekleri

Bir çerezin davranışını kontrol etmek için çeşitli seçenekler belirleyebilirsiniz. Başlıca olanlar şunlardır:.

Çerezin son kullanma tarihini UTC formatında belirtir. Belirtilmezse, çerez bir oturum çerezi olur ve tarayıcı kapatıldığında silinir.

Çerezin son kullanma tarihini saniye cinsinden belirtir. Bu, `expires` üzerinde önceliğe sahiptir.

Çerezin gönderileceği yolu belirtir. Örneğin, `/admin` belirtirseniz, çerez yalnızca o yol altındaki sayfalara gönderilir.

Çerezin geçerli olduğu alan adını belirtir. Genellikle mevcut alan adı için ayarlanır, fakat `.example.com` gibi tüm alt alan adlarına da uygulayabilirsiniz.

Bu özellik belirtildiğinde, çerez yalnızca HTTPS üzerinden gönderilir. Daha fazla güvenlik için, hassas bilgilerde bu özelliği mutlaka ayarlayın.

Çerezlerin siteler arası isteklerde gönderilip gönderilmeyeceğini kontrol eder. Aşağıdaki üç değerden birini belirtebilirsiniz:.

- `Strict`
    Çerezler yalnızca aynı siteden gelen isteklerde gönderilir.

- `Lax`
    Çerezler normal gezinmelerde gönderilir fakat bazı kısıtlamalar vardır.

- `None`
    Çerezler, siteler arası isteklerde bile gönderilebilir. Ancak, `Secure` niteliği de gereklidir.

Örnek: Güvenli çerez

1document.cookie = "sessionId=abc123; secure; SameSite=Strict";

secure belirtirseniz, Cookie yalnızca HTTPS iletişiminde gönderilir.
SameSite=Strict belirtirseniz, Cookie çapraz site isteklerinde gönderilmez ve bu, CSRF önlemi olarak etkilidir.
Kimlik doğrulama veya oturum yönetimi için kullanılan önemli Cookieler için bu tür güvenli nitelikler gereklidir.

Kodlama ve kod çözme

Çerez değerleri özel karakterler içerebileceğinden, encodeURIComponent kullanmak daha güvenlidir.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3
4const username = "JohnDoe";
5document.cookie =
6    "username=" + encodeURIComponent(username) +
7    "; max-age=604800; path=/; SameSite=None; Secure";
8
9console.log(decodeURIComponent(getCookie("username"))); // "JohnDoe"

encodeURIComponent kullanarak bir Cookiede boşluk, sembol gibi karakterleri güvenli şekilde depolayabilirsiniz.
Okurken, orijinal dizeyi geri elde etmek için decodeURIComponent kullanın.
Bu örnekte, son kullanma süresini 7 gün (604.800 saniye) olarak ayarlamak için max-age=604800 kullanılmıştır. Bu, son kullanma tarihini belirtmek için expirese benzer bir yöntemdir. max-age saniye cinsinden belirtilebilir ve genellikle kullanımı daha kolaydır.

Pratik örnek: Bir temanın kaydedilmesi ve yüklenmesi

Aşağıda, kullanıcının seçtiği temanın bir çereze kaydedilip bir sonraki ziyarette otomatik olarak uygulanmasının örneği yer almaktadır.

 1function setTheme(theme) {
 2    document.cookie =
 3        "theme=" + encodeURIComponent(theme) +
 4        "; max-age=604800; path=/; SameSite=None; Secure"; // 1 week
 5    applyTheme(theme);
 6}
 7
 8function applyTheme(theme) {
 9    document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";
10    document.body.style.color = theme === "dark" ? "#fff" : "#000";
11}
12
13function getCookie(name) {
14    const cookies = document.cookie.split('; ');
15    for (const cookie of cookies) {
16        const [key, value] = cookie.split('=');
17        if (key === name) {
18            return decodeURIComponent(value);
19        }
20    }
21    return null;
22}
23
24const savedTheme = getCookie("theme");
25if (savedTheme) {
26    applyTheme(savedTheme);
27}

1<button onclick="setTheme('light')">Light</button>
2<button onclick="setTheme('dark')">Dark</button>

setTheme fonksiyonu seçili temayı bir Cookieye kaydeder ve hemen ekranı güncellemek için applyTheme'i çağırır.
applyTheme fonksiyonu, bodynin arka plan ve metin renklerini temaya göre değiştirir.
Bu örnekte, max-age=604800 ayarlandığı için tema ayarı bir hafta boyunca korunur.
Kullanıcının seçimi sayfa tekrar ziyaret edildiğinde korunabildiği için, kullanıcı deneyimi (UX) geliştirilir.

Çerez sınırlamaları ve dikkat edilmesi gerekenler

Çerez kullanırken aşağıdaki noktalara dikkat edin:.

Boyut Sınırlamaları Tek bir çerezin boyutu yaklaşık 4KB ile sınırlıdır.
Kaydedilebilecek çerez sayısı sınırı Tarayıcıya bağlı olarak, bir alan adı başına yalnızca yaklaşık 20 ila 50 adet kaydedebilirsiniz.
Güvenlik Önlemleri Cookie içeriği temel olarak düz metin olarak saklandığından, şifre gibi gizli bilgilerin depolanması için uygun değildir.
JavaScript'ten erişilemeyen Çerezler HttpOnly özelliğine sahip çerezler, güvenlik nedeniyle JavaScript tarafından okunamaz.

Sunucu ve `Cookie`ler

1Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

HttpOnly gibi bazı Cookie öznitelikleri JavaScript üzerinden ayarlanamaz. Bunlar sunucu tarafında ayarlanmalıdır.

Özet

JavaScript ile Cookieleri yönetmek, kullanıcı deneyimini artırabilir ve durumu koruyabilir. Ancak, onları güvenli ve uygun şekilde ele almak için lütfen aşağıdaki noktalara dikkat edin.

Yalnızca gerekli minimum bilgiyi saklayın Gizlilik ve güvenlik açısından, kişisel veya hassas bilgilerden kaçının ve yalnızca gerekli verileri kaydedin.
Güvenlik özniteliklerini doğru şekilde ayarlayın XSS ve CSRF gibi siteler arası saldırıları önlemek için Secure ve SameSite gibi öznitelikleri ayarlayın.
Veri Kodlama ve Çözme Cookie değerlerini güvenli bir şekilde saklayıp okumak ve özel karakterler ile Japonca gibi dilleri doğru bir şekilde işlemek için encodeURIComponent ve decodeURIComponent kullanın.

Cookieleri doğru bir şekilde kullanmayı öğrenerek, daha gelişmiş ve güvenli web uygulamaları oluşturabilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

JavaScript'te Paylaşılan İşçi (Shared Worker)

JavaScript ve Çerezler

YouTube Video

JavaScript ve Çerezler

Çerez oluşturma (yazma)

Son kullanma tarihine sahip çerezler oluşturma

Çerezleri alma (okuma)

Bir çerezin değerini almak için fonksiyon

Çerezleri silme

Çerez seçenekleri

Örnek: Güvenli çerez

Kodlama ve kod çözme

Pratik örnek: Bir temanın kaydedilmesi ve yüklenmesi

Çerez sınırlamaları ve dikkat edilmesi gerekenler

Sunucu ve Cookieler

Özet

YouTube Video

Sunucu ve `Cookie`ler