İçeriğe geç

Javascript ile Browser Cookie Kontrolü ve cookieEnabled

Bu yazımda tarayıcı Cookie‘sinin açık olup olmadığını javascript ile nasıl kontrol edebileceğimizi öğreneceğiz. Ayrıca  HTML DOM Navigator nesnesinin cookieEnabled özelliğinin Internet Explorer / Microsoft Edge ve diğer tarayıcılar arasındaki davranışına açıklamaları ile çözüm üretmeye çalışacağız.

Sorunun Açıklaması:

Buradaki asıl sorun tarayıcıların cookie özelliğinin açık olup olmadığı konusunda tarayıcılar arası kararsızlık ve bununla beraber development / production ortamlarındaki farklı davranış diyebiliriz.

SENARYO 1 -> Projenin production ortamı, yani “*.com, *.net, *.org.tr” gibi uzantıya sahip bir alan adı üzerinden testi:

Bu senaryoda javascript ile cookie kontrolü yaptığımızda Navigator cookieEnabled özelliği Chrome, Firefox, Opera, Safari, Microsoft Edge tarayıcılarında doğru sonuç üretiyor. Ancak Internet Explorer 11 tarayıcısında hatalı sonuç üretiyor.

Internet Explorer 11, tarayıcıdaki Cookie açık da olsa kapalı da olsa açıkmış gibi davranıyor.
Diğer tarayıcılarda ise Cookie‘nin açık yada kapalı olduğunu algılayabiliyoruz.

SENARYO 2 -> Projenin development ortamı, yani “http://localhost/” gibi bir ortam üzerinden testi:

Bu senaryoda javascript ile cookie kontrolü yaptığımızda Navigator cookieEnabled özelliği Chrome, Firefox, Opera, Safari tarayıcılarında doğru sonuç üretiyor. Ancak Microsoft Edge ve Internet Explorer 11 tarayıcılarında hatalı sonuç üretiyor.

Internet Explorer 11 ve Microsoft Edge, tarayıcıdaki Cookie açık da olsa kapalı da olsa açıkmış gibi davranıyor. Bunun nedeni ise Cookie standartlarına katı bir şekilde bağlı olduğu için ve bu standartları MS Standardı ile kontrol ettiği için adres satırında “*.com, *.net, *.org.tr” gibi bir uzantı arıyor ve metodu döndüremeden direkt varsayılan değerini yolluyor.

Cookie listesinde geçerli cookie’ler aranırken, ana bilgisayarın example.com gibi etki alanı adı kullanılır. Alan adı eşleşmesi varsa cookie göderilip gönderilmemesi bu alan adının eşleştirmesi ile olur. Bu eşleştirmesi example.com gibi alan adının salt yapısı üzerinden kontrol edilir. Cookie standartlarında alan adı eşleştirmesi yapılabilmesi için salt yapının uzantısının en az 2 ya da 3 karakterden oluşması beklenir (domain parametresinin çerezleri ayarlayabilmesi için en az bir adet noktaya (*.*) ihtiyacı vardır). Microsoft tarayıcıları da bu kurala takıldığı için http://localhost/ gibi bir adresi cookie eşleştirmesinde alan adı gibi görmüyor.

Diğer tarayıcılarda ise Cookie‘nin açık yada kapalı olduğunu ekstra bir işlem yapmadan algılayabiliyoruz.

Sorunun Çözüm Yolları:

Buradaki her iki senaryoya göre Cookie tarayıcı izinlerinin kontrol edilmesinde HTML DOM Navigator nesnesinin cookieEnabled özelliğinin hiçbir şekilde IE11’de işlememesi nedeni ile IE11 devre dışı kalıyor, dolayısı ile de “navigator.cookieEnabled” devre dışı kalıyor.

Bu nedenle özelleştirilmiş bir çözüme gitmemiz, cookie‘yi oluşturmaya çalışmamız eğer oluşuyorsa aktif olduğunu algılamamız, oluşmuyorsa da tarayıcıda kapalı olduğunu algılamamız gerekiyor.

javascript ile cookie kontrolü nü yapan kodu ve açıklamalarını aşağıda paylaşıyorum:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p id="cookieResult"></p>
    <script>
        function getCookieStatus() {
            //Cookie ismini ve değerini belirliyoruz
            var cookieTest = 'CookieControlTest=' + Math.floor(Math.random() * 99999999);
            //Cookie'yi oluşturuyoruz, expires süresini belirliyoruz.
            document.cookie = cookieTest + ';expires=Mon, 01-Jan-2100 00:00:00 GMT';
            //Cookie oluşmuşsa siliyoruz
            if (document.cookie.indexOf(cookieTest) !== -1) {
                document.cookie = cookieTest + ';expires=Sat, 01-Jan-2000 00:00:00 GMT';
                //Cookie açık olduğunda yapılmasını istediğiniz bir iş varsa onu gösterebilirsiniz..
                return '<h3>Cookies are enabled </h3> <p>you can login</p>';
                ////sonucu true göndererek tarayıcının Cookie desteğinin açık olduğunu söylüyoruz.
                //return true;
            }
            //Cookie oluşturulamazsa sonucu false göndererek tarayıcının Cookie desteğinin kapalı olduğunu söylüyoruz.
            //return false;
            // Eğer ekrana bir uyarı metni basacaksanız aşağıdaki gibi de düzenleyebilirsiniz.
            return '<h3>Cookies are disabled </h3> <p>Please enable cookies and refresh the page</p>';
        }
        //oluşan sonucu istersek ekrana basabiliriz.
        document.getElementById("cookieResult").innerHTML = getCookieStatus();
    </script>
</body>
</html>

Aslında bu script ile development ortamında Cookie testlerini Microsoft tarayıcıları haricinde bir tarayıcı ile yapıp geçebilirsiniz. Ancak bazı durumlarda Microsoft tarayıcılarının da Cookie davranışlarını test etmeniz gerekecektir. Özellikle developer testinde.

Bu durumda development ortamındaki Hosts.txt dosyasına aşağıdaki gibi bir kaç ekleme yaparak uygulamalarınızın cookie testini tüm tarayıcılar üzerinden yerel makinenizde gerçekleştirebilirsiniz:

Hosts.txt içine aşağıdaki kodu ekleyerek test ettiğinizde Internet Explorer 11 ve Microsoft Edge’in local ortamında da çalıştırabildiğinizi görüyorsunuz.

Hosts.txt’nin bulunduğu klasör: C:\Windows\System32\drivers\etc

127.0.0.1 www.local-test.com
127.0.0.1 tr.local-test.com:3000
127.0.0.1 app.localhost:3001
127.0.0.1 app2.localhost:3002

Bu web geliştirici ve tasarımcılar Internet Explorer’dan çetiği kadar başka bir şeyden çekmemiştir eminim. Aslında Microsoft Edge ile birlikte Internet Explorer’ı yavaş yavaş bitirmeye başladı. Yavaş yaşaş diyorum zira baya bir yavaş olacak bu ayrılık. 2016 yılında IE11 hariç tüm sürümlerin desteğini bitirdi, 2018’de de IE11’den sonra için artık geliştirme yapmayacağını ve bunun son sürüm olduğunu duyurdu. Fakat halen Microsoft’un bazı ürünleri ile direkt uyumluluğu olduğu için güvenlik ve ufak tefek hata sorunları için 2023’e kadar bu sürümü destekleyecekler. Yani anlayacağınız 4 yıl daha bu sürümdeki hataları da test etmemiz gerekecek, ya da radikal bir karar alıp IE11’i desteklemediğinizi açıkça belirteceksiniz. Bana kalırsa en kesin çözüm 🙂

Faydası olması dileği ile…

Tarih:Javascript (Nasıl Yaparım)

Kimler Neler Demiş?

avatar
  Subscribe  
Bildir