İç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,  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 lokal 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

Web geliştirici ve tasarımcıları, eminim ki Internet Explorer’dan çektiği kadar başka hiçbir şeyden çekmemiştir. Özellikle IE6 zamanlarını yaşamış developerlar hayatlarının kabusunu bu sürümle görmüştü. Hatta o dönemlerde bununla ilgili internet ortamında “IE destekleme, kullanma, kullandırma” tadında bir hareket bile vardı.

Microsoft, Edge ile birlikte Internet Explorer’ı yavaş yavaş bitirmeye başladı. Yavaş yavaş 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 sonrası 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, güvenlik ve ufak tefek hata sorunları için 2023’e kadar bu sürümü destekleyeceklerini duyurdular. Anlayacağınız üzere 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 ki bana kalırsa en kesin çözüm 😉

Faydası olması dileği ile…

0 0 vote
Article Rating
Tarih:Javascript (Nasıl Yaparım)
Subscribe
Bildir
guest
0 Yorum
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x