IceHoney IceHoney
IceHoney

cookies

跨域请求中的cookies处理

cors cookies

现在的前后端开发已经完全分离，后端服务器和前端服务器分别部署在不同的服务器。同时也对应不同的域名，所以跨域请求领域方面的知识也需要补充。

# 跨域请求添加 header

我们都知道，出于安全考虑，JS 是有同源策略限制。所以，我们在对其他域名发起请求的时候需要添加 http header。

Access-Control-Allow-Origin: *
1

这个参数的值只能为星号或者具体的网址，星号代表所有网站。

JS 跨域请求有两个 API 可以使用，XMLHttpRequest和fetch。XMLHttpRequest会默认带上 cookies，但是fetch默认不会带上。如果需要带上 cookies，需要把withCredentials设置为true。

我们都知道服务器设置 cookie 是通过set-cookie的 http header 来完成。浏览器会读取这个信息设置 cookie。但是对于跨与请求，默认是无效的。我们需要再添加一个 http header。

Access-Control-Allow-Credentials: true
1

当设置了这个 http header，Access-Control-Allow-Origin就不能设置为星号了，必须指定具体的网址。我们必须指定withCredentials为true并且Access-Control-Allow-Credentials为true的时候，服务器返回的set-cookie才会生效。

参考：

Access-Control-Allow-Credentials (opens new window)

CORS (opens new window)

关于微云下载的那点事

cookies

貌似腾讯公司出品了一个叫微云 (opens new window)的东东,说实话,要不是基家上某人告诉我我还真不知道== 然后就说说这个东西的事情了,貌似下载的时候只能给出下载页面的链接...故意把真实的下载地址隐藏了,而且分析到下载地址还不行 还得带 cookies 才行....咳咳,我就不说啥腾讯的坏话了,大家都懂的.然后就是下载页面上还有个举报按钮!我勒个去...分享河蟹的东西的时候就经常被爆菊了...

于是需求就来了,分析下载页面得出真正的下载地址和 cookies,让用户点击下载链接即可下载,既方便用户又免得被爆菊... 然后看了下页面的 JS... qqdisk_web_outlink.js qqdisk_web_wy.js qqviplib_2.0.0.js 三个主要的 JS 都压缩了 看着就想吐... 于是换了一个思路,F12 开启 chromium 的调试工具,在 Network 面板下查看网页到底和服务器发生了哪些交互 chromium 的开发工具非常明确的红色的标注了发生 POST 请求的链接.一眼就看到了. 测试用下载链接 (opens new window) 在这个页面载入的时候可以很清楚的看到网页对http://web.cgi.weiyun.com/wy_web.fcg (opens new window)这个网址进行 POST 请求,提交的表单是个 json 对象

{
  "req_header": {
    "proto_ver": 10006,
    "main_v": 12,
    "sub_v": 1,
    "encrypt": 0,
    "msg_seq": 1,
    "source": 30006,
    "token": "4d3754f563ad04a56fece81bbcc83302",
    "client_ip": "127.0.0.1",
    "cmd": "decode_url"
  },
  "req_body": {
    "url": "Q69+qVhF33RXX+jAvhRil4kmLW5GIZRW8Zd13MWsUyvzpcDLunyFPxcqaLdUNtq5FfLp9Oj65Xr2XxTn298qsOWHWHqVdGuP7q1xMT4Do/y34dP00q4H7gpr94udJr/d2H23l0QGIKteptOEY1bTYLwkc+BRRdYEFvNb36XnUMBrS8pMf8RqoLJiAPrbXgYeBFvAwJu13QPHiQOe2lxS2i+V7/UDRpJr2qz8FqnOTHSQhaNXD+8s7uZIyaWH8INMc1Ls9Ay1XOc="
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上面的 JSON 对象里面只有 token 和 url 是可变的,其它都是固定值,仔细分析页面上的那三个压缩过的 JS 便可以得到答案. url 明显就是网址上问号后面的参数,我就不赘述了.关于 token,仔细分析发现 var _token=QQVIP.security.getAntiCSRFToken(); 了这段代码,也就是说腾讯还专门防止 CSRF(跨站点请求伪造),可是... 这个 token 值我随便填写也能成功返回结果 == 看来腾讯的程序员偷工减料了(又是临时工的错!) 只能说这里预留了一个接口,但是没做,仔细查了一下腾讯的那个函数并自己修改了一下

var CONST_SALT = 5381;
var CONST_MD5_KEY = 'tencentQQVIP123443safde&!%^%1282';
function getAntiCSRFToken(objConfig) {
  objConfig = objConfig || {};
  var salt = objConfig.salt || CONST_SALT;
  var skey = objConfig.skey || '';
  //QZFL.cookie.get("skey")
  var md5key = objConfig.md5key || CONST_MD5_KEY;
  var hash = [],
    ASCIICode;
  hash.push(salt << 5);
  for (var i = 0, len = skey.length; i < len; ++i) {
    ASCIICode = skey.charAt(i).charCodeAt();
    hash.push((salt << 5) + ASCIICode);
    salt = ASCIICode;
  }
  var md5str = $.md5(hash.join('') + md5key);
  return md5str;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

看来做的还是不错的,用 cookies 生成 token,但是你的"skey"的 cookies 是空的要闹哪样 == 基本上 token 就是个定值

4d3754f563ad04a56fece81bbcc83302
1

接下来看返回回来的 json 对象

{
  "rsp_body": {
    "dk": "3540da0c9b7db5fb4f26f2baea50ef60",
    "dl_cookie_name": "FTN5K",
    "dl_cookie_value": "8eb5b2ee",
    "dl_encrypt_url": "da42a15644a68baa30e174d7ed580165176d66c912d9eb235bb4d01363a32e739fc68cab7402869010e99ab64d899c2dd537b2ffc39e3464732acc7ac1413ec4",
    "dl_remain": 99997,
    "dl_svr_host": "hz.yun.ftn.qq.com",
    "dl_svr_port": 80,
    "eptm": "1398678922",
    "fd": "6385d50b-1be5-436a-8430-43f53b583922",
    "nickname": "─╄OvЁ１颗心只为ㄚòu",
    "nm": "CC女王.ssf",
    "realnm": "CC女王.ssf",
    "sha": "f9800d2bd0fa71c2506c5c305c2b50988eb5b2ee",
    "shorturl": "http://url.cn/A8Clnw",
    "sz": "145195",
    "uin": 215629877
  },
  "rsp_header": {
    "cmd": "decode_url",
    "msg_seq": 1,
    "ret": 0,
    "uin": 215629877
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

这里我只关心下载有关的参数,其它参数大家可以自行猜测,dl_cookie_name 和 dl_cookie_value 是所需要的 cookies 的键值对.

'http://' +
  json.rsp_body.dl_svr_host +
  ':' +
  json.rsp_body.dl_svr_port +
  '/ftn_handler/' +
  json.rsp_body.dl_encrypt_url +
  '/' +
  json.rsp_body.realnm;
1
2
3
4
5
6
7
8

这就是根据 JSON 拼接出来的下载链接 接下来的问题就是 cookies 跨越问题了,点击页面上的下载按钮可以发现,页面与服务器又发生了交互. 页面向http://web.weiyun.qq.com/php/downloadCheck.php (opens new window)提交了 downloadn=FTN5K&downloadv=8eb5b2ee 这个正是 cookies 的键值对,后面的 callback 是 JQUery 回调的参数,无视就可以了,关键是服务器返回的 Respose Headers

Set-Cookie:FTN5K=8eb5b2ee; expires=Mon, 29-Apr-2013 11:51:48 GMT; path=/; domain=qq.com
1

这样就写入了 cookies,因为是 GET 方法提交的请求,这样就可以使用跨域请求.完成 cookies 的跨越注入.具体使用方法是

var downloadcookie =
  'http://web.weiyun.qq.com/php/downloadCheck.php?downloadn=' +
  json.rsp_body.dl_cookie_name +
  '&downloadv=' +
  json.rsp_body.dl_cookie_value;
var d = document;
var s = d.createElement('script');
s.src = downloadcookie;
d.body.appendChild(s);
1
2
3
4
5
6
7
8
9

通过 src 可以向http://web.weiyun.qq.com (opens new window)发送 GET 请求,就完成了跨越的 cookies 注入.注意跨越请求只能支持 GET 方法,POST 是绝对不可能实现跨越请求的. 但是调试的时候需要 POST 跨越请求怎么办,最简单的办法是在启动浏览器的时候添加启动方法 chromium --disable-web-security 这样浏览器就不会阻止 跨越的 POST 请求,否则就会 console 出现下面的红色错误提示.

XMLHttpRequest cannot load http://web.cgi.weiyun.com/wy_web.fcg. Origin null is not allowed by Access-Control-Allow-Origin.
1

这样就下载页面分析下载链接就完成了,然后基友说微云的下载链接有两种还有一中是这个 (opens new window) 不是 outlink 而是 sharekey 了,其实就是格式变了而已....腾讯也不想在写一套解析办法吧 == 提交的 JSON 对象变成

{
  "req_header": {
    "net_type": 3,
    "build_v": 123,
    "proto_ver": 10006,
    "main_v": 12,
    "sub_v": 1,
    "encrypt": 0,
    "msg_seq": 1,
    "source": 30006,
    "token": "4d3754f563ad04a56fece81bbcc83302",
    "client_ip": "127.0.0.1",
    "cmd": "get_share_info",
    "uin": 0
  },
  "req_body": {
    "share_key": "a86487d6aa48e33429e0be477a87dc21"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

然后提交的网址变成http://web.cgi.weiyun.com/wy_share.fcg (opens new window)返回的 JSON 对象是:

{
  "rsp_body": {
    "createtime": "2013-04-25 13:50:09",
    "data": "xfjJXsNsySkhhwT5SvFC7j85IjXqTxmV9RBC+mcIk1MOmMi0G68fkDTQulEHnBwSPO3Zs/6oAR/k5WLMkpiezA2NFpoCI1LRe2vrko9mMVrP1PcrGnJY26n7Iogto20Wq6aIBm7VjNI9+D2TmXWw4LodHzIf4VhMMGRDacvH04yd4+W/fwG6BbpQKOma42CbA4d8OGken8hNFnnxjE5QIO5GKCPjgsKpxQtPsM0nNbgvKfnLdcPrvcnT+Dm5ZQbZnkdj022QE2ZzXGNfX0c1IA==",
    "dir_list": [],
    "dl_cookie_name": "FTN5K",
    "dl_cookie_value": "2bc024b4",
    "dl_encrypt_url": "a85801ad13f6c92de0de07f0b0c1002d11b438dcfe7a63de37dce08e9a0db51b0789677db4a256a57085b66b52ebe680ab796e9f5c844e620884a443b397339e",
    "dl_svr_host": "tj.yun.ftn.qq.com",
    "dl_svr_port": 80,
    "downcnt": 19,
    "file_list": [
      {
        "file_id": "2bf60c0a-8694-4d08-bcb3-90e267b32691",
        "file_name": "逆転電池.rar",
        "file_size": "7163756"
      }
    ],
    "flag": 1,
    "pdir_key": "9c9bbd18f0a739ae12b58dcd423dce4a",
    "ppdir_key": "9c9bbd18f338fdcb41c5dfa52b9ed888",
    "res_type": 0,
    "sharename": "逆転電池.rar",
    "storecnt": 0,
    "uin": 415079324,
    "url": "http://url.cn/BKueJM",
    "viewcnt": 83
  },
  "rsp_header": {
    "cmd": "get_share_info",
    "ret": 0
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

这样就是真的完工了~