社区编辑申请
注册/登录
淘宝如何跨域获取Cookie分析
开发 前端
可以确定的是对于cookie来说肯定是不允许垮域访问的。无论是通过JS还是Server端程序来说都是如此,那么tmall.com是如何访问到taobao.com下的cookie的呢?

最近在发现使用Taobao的时候的一个小细节,于是便萌发起了写这篇文章。

当我们在 www.taobao.com 中进行登录之后,然后直接切换到 www.tmall.com 域名下,发现www.tmall.com首页的最顶部马上显示成了”您好, andyfaces“,于是便对此处的实现机制进行分析。

首先,用户名应该是存储在cookie中的,于是在taobao.com的域名中用 firefox看到用户名确实是存储在 cookie, 而tmall.com中没有存储该cookie:

淘宝如何跨域获取Cookie分析

可以确定的是对于cookie来说肯定是不允许垮域访问的。无论是通过JS还是Server端程序来说都是如此,那么tmall.com是如何访问到taobao.com下的cookie的呢?

于是打开 tmall.com,然后使用firebug来进行调试,发现了一条这样的请求语句

淘宝如何跨域获取Cookie分析

其页面的JS代码为:

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

看到这里之后于是也大概知道他如何处理了的,为了确认一下,于是搜索一下 KISSY.getScript 函数代码,确实采用了JS跨域的 JSONP 解决方案:

  1. 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.     
  6.                 node.src = url;    
  7.                 node.async = true;    
  8.     
  9.             scriptOnload(node, function() {    
  10.                     if (timer) {    
  11.                         timer.cancel();    
  12.                         timer = undef;    
  13.                     }    
  14.     
  15.                     S.isFunction(success) && success.call(node);    
  16.     
  17.                     // remove script    
  18.                     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下进行登录成功,然后随便在本地写了一个测试页,通过以下语句:

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

Firbug结果:

淘宝如何跨域获取Cookie分析

其实大致原理如此,通过在www.taobao.com 的server端提供一个获取当前域下所有cookie的 php的请求地址,然后该php获取到cookie之后将期并成 js 代码,也就是以上第二个截图所看到的。然后再在 tmall 采用 jsonp 的方式跨域加载该 js 代码,从而实现 cookie 的跨域访问。

原文链接:http://www.iteye.com/topic/1000776

【编辑推荐】

  1. 开发者最容易犯的13个JavaScript错误
  2. 分享7款超棒的JavaScript网格插件
  3. 对JavaScript中call和apply的理解
  4. 8个令人惊叹的JavaScript效果的网站
  5. 再谈JavaScript图片预加载技术
责任编辑:陈贻新 来源: denger博客
相关推荐

2022-06-05 21:09:47

Python办公自动化

2022-04-01 12:38:32

cookie代码面试

2022-06-15 08:25:07

Python天气数据可视化分析

2021-06-15 07:32:59

2022-06-28 13:41:07

浏览网页互联网交互Python

2022-06-15 16:16:21

分布式数据库鸿蒙

2022-06-22 09:19:55

HDC鸿蒙ADB命令

2022-06-07 17:08:51

WizTreewindows工具

2022-06-17 09:21:53

Pandas代码透视表

2022-06-28 05:35:46

勒索软件网络安全网络攻击

2022-06-10 09:04:24

Python读取文件代码

2022-04-18 10:37:01

鸿蒙操作系统开发工具

2022-05-11 09:02:27

Python数据库Excel

2022-06-20 15:19:51

前端监控方案

2022-06-19 14:40:05

密码iCloudApple

2022-06-17 20:42:49

物联网智能建筑

2022-03-11 10:01:47

开发跨域技术

2022-02-22 11:54:05

跨域项目前后端

2022-05-19 14:14:26

go语言限流算法

2022-05-05 09:02:24

Go函数调用栈

同话题下的热门内容

手把手教你用装饰器扩展 Python 计时器哪个版本的JVM最快?IOC-Golang 的 AOP 原理与应用分析了 700 万份工作需求,市场需求最高的八种编程语言是这些Vue 里,多级菜单要如何设计才显得专业?Vue 2.7 正式发布,代号为 Naruto手把手教你实现一个 Python 计时器2022 年编程语言趋势:Swift、Kotlin 热度持续增长,收入最高的五种语言竟是它们

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号