淘寶如何跨域獲取Cookie分析

 

 

 淘寶如何跨域獲取Cookie分析

---

　　最近在發現使用Taobao的時候的一個小細節，於是便萌發起了寫這篇文章。

當我們在 www.taobao.com 中進行登錄之后，然后直接切換到 www.tmall.com 域名下，發現www.tmall.com首頁的最頂部馬上顯示成了”您好, andyfaces“，於是便對此處的實現機制進行分析。

首先，用戶名應該是存儲在cookie中的，於是在taobao.com的域名中用 firefox看到用戶名確實是存儲在 cookie, 而tmall.com中沒有存儲該cookie:

可以確定的是對於cookie來說肯定是不允許垮域訪問的。無論是通過JS還是Server端程序來說都是如此，那么tmall.com是如何訪問到taobao.com下的cookie的呢?

於是打開 tmall.com，然后使用firebug來進行調試，發現了一條這樣的請求語句

其頁面的JS代碼為：

 

 
           
            
             
             <script>    
        KISSY.getScript("http://www.taobao.com/go/app/tmall/login-api.php?"+Math.random()) 3         </script>
 
             
             <script>    
        KISSY.getScript("http://www.taobao.com/go/app/tmall/login-api.php?"+Math.random()) 3         </script>

看到這里之后於是也大概知道他如何處理了的，為了確認一下，於是搜索一下 KISSY.getScript 函數代碼，確實采用了JS跨域的 JSONP 解決方案：

 

 
           
            
             
             getScript: function(url, success, charset) {  2             var isCSS = RE_CSS.test(url),  3                 node = doc.createElement(isCSS ? 'link' : 'script'),  4                 config = success, error, timeout, timer;  5     
                node.src = url;  7                 node.async = true;  8     
            scriptOnload(node, function() { 10                     if (timer) { 11  timer.cancel(); 12                         timer = undef; 13  } 14     
                    S.isFunction(success) && success.call(node); 16     
                    // remove script 
                    if (head && node.parentNode) { 19  head.removeChild(node); 20  } 21  }); 22  head.insertBefore(node, head.firstChild); 23       }
 
             
             getScript: function(url, success, charset) {  2             var isCSS = RE_CSS.test(url),  3                 node = doc.createElement(isCSS ? 'link' : 'script'),  4                 config = success, error, timeout, timer;  5     
                node.src = url;  7                 node.async = true;  8     
            scriptOnload(node, function() { 10                     if (timer) { 11  timer.cancel(); 12                         timer = undef; 13  } 14     
                    S.isFunction(success) && success.call(node); 16     
                    // remove script 
                    if (head && node.parentNode) { 19  head.removeChild(node); 20  } 21  }); 22  head.insertBefore(node, head.firstChild); 23       }

其原理是通過動態create js include 動態加載js，然后為該script節點bind onload事件或判斷onreadystatechange，其具體細節可以參考以上 scriptOnload 的函數的處理。 當js加載完成之后 采用回調方式來執行 success 函數。

為了進一步確實，於是使用 Jquery的 $.getScript 來測試一把，首先在 taobao.com下進行登錄成功，然后隨便在本地寫了一個測試頁，通過以下語句:

 
           
            
             
             $.getScript('http://www.taobao.com/go/app/tmall/login-api.php?0.6783450077710154', function(){ console.log("the taobao.com cookie object:" + userCookie + " username:" + userCookie._nk_); });
 
             
             $.getScript('http://www.taobao.com/go/app/tmall/login-api.php?0.6783450077710154', function(){ console.log("the taobao.com cookie object:" + userCookie + " username:" + userCookie._nk_); });

Firbug結果：

 

其實大致原理如此，通過在www.taobao.com 的server端提供一個獲取當前域下所有cookie的 php的請求地址，然后該php獲取到cookie之后將期並成 js 代碼，也就是以上第二個截圖所看到的。然后再在 tmall 采用 jsonp 的方式跨域加載該 js 代碼，從而實現 cookie 的跨域訪問。