HostOnly Cookie 及Js对cookie操作 - HelloWorld开发者社区

要理解HttpOnly的作用，要先弄懂XSS攻击，即跨站脚本攻击，大伙可以Google一下看看XSS到底是什么，来自wikipedia的解释：

跨网站脚本（Cross-site scripting，通常简称为XSS或跨站脚本或跨站脚本攻击）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意使用者将代码注入到网页上，其他使用者在观看网页时就会受到影响。这类攻击通常包含了HTML以及使用者端脚本语言。

举个简单栗子：某网站提供了一个留言页面，留言内容是个富文本编辑器（也就意味着可以提交html代码给server），小黑同学深情款款得提交了一个振聋发聩的意见，但是内容中包含了一段恶意javascript脚本：

<script>evil_script()</script>

而服务端没有做任何处理。由于这个留言页面可以看到别人提交的留言内容，于是后来的留言者就可以看到小黑的留言内容，就会运行小黑的那段javascript脚本，假如这个脚本的功能是窃取用户的cookie发给小黑自己的服务器，而这个无良的网站，竟然把用户的登录名和密码都保存在了cookie中，于是一起很严重的安全事件诞生！

要解决这个问题，可以从两方面着手

服务端对提交上来的留言内容做过滤，把恶意代码过滤掉
让恶意javascript代码读取不到我们种的cookie

HttpOnly的cookie就是从第二点解决方案着手的，cookie是通过http response header种到浏览器的，我们来看看设置cookie的语法：

Set-Cookie: <name>=<value>[; <Max-Age>=<age>][; expires=<date>][; domain=<domain_name>][; path=<some_path>][; secure][; HttpOnly]

是一个name=value的KV，然后是一些属性，比如失效时间，作用的domain和path，最后还有两个标志位，可以设置为secure和HttpOnly，所以，我们只要加一个;HttpOnly的标志即可，比如：

Set-Cookie: USER=Ulric-UlricPass; expires=Wednesday, 09-Nov-99 23:12:40 GMT; HttpOnly

这样一来，javascript就读取不到这个cookie信息了，不过在与服务端交互的时候，Http Request包中仍然会带上这个cookie信息，即我们的正常交互不受影响。

####什么是HostOnly Cookie rfc6265第5.3节定义了浏览器存放每个Cookie时应该包括这些字段：name、value、expiry-time、domain、path、creation-time、last-access-time、persistent-flag,、host-only-flag、secure-only-flag和http-only-flag。

其中：

name、value：由Cookie正文指定；
expiry-time：根据Cookie中的expires和max-age产生；
domain、path：分别由Cookie中的domain和path指定；
creation-time、last-access-time：由浏览器自行获得；
persistent-flag：持久化标记，在expiry-time未知的情况下为false，表示这是个session cookie；
secure-only-flag：在Cookie中包含secure属性时为true，表示这个cookie仅在https环境下才能使用；
http-only-flag：在Cookie中包含httponly属性时为true，表示这个cookie不允许通过JS来读写；
host-only-flag：在Cookie中不包含Domain属性，或者Domain属性为空，或者Domain属性不合法（不等于页面url中的Domain部分、也不是页面Domain的大域）时为true。此时，我们把这个Cookie称之为HostOnly Cookie；

那么host-only-flag如果为true会怎样呢？rfc6265里有这么一段：

Either:
The cookie's host-only-flag is true and the canonicalized request-host is identical to the cookie's domain.

Or: 
The cookie's host-only-flag is false and the canonicalized request-host domain-matches the cookie's domain.

获取Cookie时，首先要检查Domain匹配性，其次才检查path、secure、httponly等属性的匹配性。如果host-only-flag为true时，只有当前域名与该Cookie的Domain属性完全相等才可以进入后续流程；host-only-flag为false时，符合域规则（domain-matches）的域名都可以进入后续流程。

举个例子，host-only-flag为true时，Domain属性为example.com的Cookie只有在example.com才有可能获取到；host-only-flag为false时，Domain属性为example.com的Cookie，在example.com、www.example.com、sub.example.com等等都可能获取到。

下面，我们来研究下各浏览器对HostOnly Cookie，也就是Cookie的host-only-flag属性的支持情况。

支持度测试

在qgy18.com，设置如下HostOnly Cookie:

name=ququ; expires=Tue, 10-Jul-2013 08:30:18 GMT; path=/

IE系列（表中只列了IE6和10，实际上IE6-IE10都测过）不支持HostOnly Cookie。在qgy18.com设置的Cookie，www.qgy18.com可以直接获取到。

其它浏览器支持HostOnly Cookie。本测试中，对于非IE：获取Cookie的页面Domain是www.qgy18.com，由于设置Cookie时没有指定Domain，按照前面的规则，host-only-flag为true，Cookie的Domain属性是qgy18.com，二者不完全匹配，所以获取不到这个Cookie。

对于非HostOnly Cookie，例如在qgy18.com设置Cookie时指定Domain为qgy18.com，在www.qgy18.com可以获取到这个Cookie，这时候host-only-flag为false。

##javascript创建cookie的方式 ####一、简单的存取操作在使用JavaScript存取 cookie 时，必须要使用Document对象的 cookie 属性；一行代码介绍如何创建和修改一个 cookie ：

document.cookie  = 'username=Darren'

以上代码中'username'表示 cookie 名称，'Darren'表示这个名称对应的值。假设 cookie 名称并不存在，那么就是创建一个新的 cookie；如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ，重复使用这个方法即可。

####二、cookie的读取操作要精确的对 cookie 进行读取其实很简单，就是对字符串进行操作。从w3school上copy这段代码来做分析：

function getCookie(c_name){
　　　　if (document.cookie.length>0){　　//先查询cookie是否为空，为空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
　　　　　　if (c_start!=-1){ 
　　　　　　　　c_start=c_start + c_name.length+1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
　　　　　　} 
　　　　}
　　　　return ""
　　}

当然想实现读取cookie的方法还有不少，比如数组，正则等，这里就不往细说了。