浏览器cookie/http请求,网站优化使用

Cookie相关的Http头

    有 两个Http头部和Cookie有关:Set-Cookie和Cookie。

    Set-Cookie由服务器发送,它包含在响应请求的头部中。它用于在客户端创建一个Cookie

    Cookie头由客户端发送,包含在HTTP请求的头部中。注意,只有cookie的domain和path与请求的URL匹配才会发送这个cookie。

Windows中的InternetSetCookie

在Windows中我们可以使用InternetSetCookie来设置Cookie,假如说,A和B两个进程使用Cookie通信,那么会有如下几种情况:

> A写Global Cookie,B写Session Cookie,此时,A中无法获取Cookie

> A写Session Cookie,B写Session Cookie,此时,A与B中的Cookie互不影响

> A写Session Cookie,B写Global Cookie,此时A中的Cookie被Global Cookie覆盖,它们共享一份Global Cookie

    注:这种情况的后果下,如果有任意一个进程再写Session Cookie,那么其他进程将获取不到Cookie

HTTP cookies,

通常又称作”cookies”,已经存在了很长时间,但是仍旧没有被予以充分的理解。首要的问题是存在了诸多误区,认为cookies是后门程序或病毒,或压根不知道它是如何工作的。第二个问题是对于cookies缺少一个一致性的接口。尽管存在着这些问题,cookies仍旧在web开发中起着如此重要的作用,以至于如果cookie在没有可替代品出现的情况下消失,我们许多喜欢的Web应用将变得毫无用处。

cookies的起源

       早期Web开发面临的最大问题之一是如何管理状态。简言之,服务器端没有办法知道两个请求是否来自于同一个浏览器。那时的办法是在请求的页面中插入一个token,并且在下一次请求中将这个token返回(至服务器)。这就需要在form中插入一个包含token的隐藏表单域,或着在URL的qurey字符串中传递该token。这两种办法都强调手工操作并且极易出错。

Lou Montulli,那时是网景通讯的一个雇员,被认为在1994年将“magic cookies”的概念应用到了web通讯中。他意图解决的是web中的购物车,现在所有购物网站都依赖购物车。他的最早的说明文档提供了一些cookies工作原理的基本信息该文档在RFC2109中被规范化(这是所有浏览器实现cookies的参考依据),并且最终逐步形成了REF2965.Montulli最终也被授予了关于cookies的美国专利。网景浏览器在它的第一个版本中就开始支持cookies,并且当前所有web浏览器都支持cookies。

cookie是什么?

       坦白的说,一个cookie就是存储在用户主机浏览器中的一小段文本文件。Cookies是纯文本形式,它们不包含任何可执行代码。一个Web页面或服务器告之浏览器来将这些信息存储并且基于一系列规则在之后的每个请求中都将该信息返回至服务器。Web服务器之后可以利用这些信息来标识用户。多数需要登录的站点通常会在你的认证信息通过后来设置一个cookie,之后只要这个cookie存在并且合法,你就可以自由的浏览这个站点的所有部分。再次,cookie只是包含了数据,就其本身而言并不有害。

~~~

cookie #

HTTP1.0中协议是无状态的,但在WEB应用中,在多个请求之间共享会话是非常必要的,所以出现了Cookie
cookie是为了辩别用户身份,进行会话跟踪而存储在客户端上的数据

Cookie的处理流程 #

使用Cookie的原因

  因为HTTP协议是无连接无状态的协议,这虽然带来了速度上的提升和结构上的简洁,但是有许多应用场景需要进行有状态的连接,比如我在一个网站上登录了,点击一个本站链接,跳转到详情的页面,这时,用户肯定希望保持登录的状态,因此,我们需要引入 Cookie 来为HTTP协议添加状态管理功能。

Cookie的定义

  Cookie是指在HTTP协议下,服务器或脚本可以维护客户端计算机上信息的一种方式。通俗地说,Cookie是一种能够让网站Web服务器把少量数据储存到客户端的硬盘或内存里,或是从客户端的硬盘里读取数据的一种技术。Cookie文件记录了用户的有关信息,如身份识别号码ID、密码、浏览过的网页、停留的时间、用户在Web站点购物的方式或用户访问该站点的次数等,当用户再次链接Web服务器时,浏览器读取Cookie信息并传递给Web站点。

客户端和服务器的Cookie

客户端发送请求报文的Cookie

  如果客户端没有Cookie时,在其请求报文中不会有Cookie字段,若已经有Cookie,再访问对应网站时,浏览器会检索是否有Cookie与此网站对应,若对应,则服务器可读取次Cookie记录的信息。
  请求报文中的Cookie字段只有:

Cookie:status = enable(disable)
服务器端响应报文的set-cookie

  服务器若发现请求报文中没有Cookie字段,则会在response报文中加入 Set-Cookie 字段,格式为:

Set-Cookie:
    NAME = VALUE;
    expires = DATE;
    path = PATH;
    domain = www.xxx.com;
    Secure;
    HttpOnly

  上面的全大写变量为自定义变量,我们需要定义Cookie的名称,并对其赋值,若是多键值对的情况,格式为NAME = KEY1 = VALUE1 & KEY2 = VALUE2;expires为Cookie失效的时间,默认为关闭浏览器后清理;path为服务器定义的Cookie存储路径;domain为网站的域,若www.baidu.com,他的域应该为baidu.com/*,即主页及其次级目录;Secure若出现,意味着仅在https通信时发送Cookie;HttpOnly若出现,意味着只能在HTTP协议中访问Cookie,不能在JavaScript中访问Cookie。

使用步骤 #

  1. 客户端第一次访问服务器的时候服务器通过响应头向客户端发送Cookie,属性之间用分号空格分隔
    Set-Cookie:name=zfpx; Path=/
    
  2. 客户端接收到Cookie之后保存在本地

  3. 以后客户端再请求服务器的时候会把此Cookie发送到服务器端

    Cookie:name=zfpx
    

重要属性 #

属性 说明
name=value 键值对,可以设置要保存的 Key/Value
Domain 域名,默认是当前域名
maxAge 最大失效时间(毫秒),设置在多少后失效
secure 当 secure 值为 true 时,cookie 在 HTTP 中是无效,在 HTTPS 中才有效
Path 表示 cookie 影响到的路,如 path=/。如果路径不能匹配时,浏览器则不发送这个Cookie
Expires 过期时间(秒),在设置的某个时间点后该 Cookie 就会失效,如 expires=Money, 05-Dec-11 11:11:11 GMT
httpOnly 如果在COOKIE中设置了httpOnly属性,则通过程序(JS脚本)将无法读取到COOKIE信息,防止XSS攻击产生

向客户端发送cookie #

设置cookie #

 res.cookie(name,value,[,options]);
参数 chrome对应属性 类型 说明 示例
domain Domain String 域名,默认是当前域名 {domain:’a.zfpx.cn’}
path Path String 路径,默认是/ {path:’/visit’}
expires Expires Date 过期时间,如果没以有指定或为0表示当前会话有效 {expires:new Date(Date.now()+20*1000)}
maxAge Max-Age Number 有效时间(单位是毫秒) {maxAge:20*1000}
httpOnly HTTP Boolean 不能通过浏览器javascript访问 {httpOnly:true}
secure Secure String 只通过https协议访问

获取cookie #

使用cookie-parser中间件

$ npm install cookie-parser --save
app.use(require('cookie-parser')());    //使用中间件
response.cookie(key,value)              //在响应中向客户端设置cookie
request.cookies                         //获取请求中的cookie对象
response.clearCookie('username')        //清除cookie

记录客户端的访问次数 #

var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
/**
 * 如果要加密的话 cookieParser里要指定密码,而且signed要等于true
 */
app.use(cookieParser('zfpx'));
app.get('/write',function(req,res){
    //1.普通设置
    //res.cookie('name','value');

    //2.设置域名
    //res.cookie('name','zfpx',{domain:'a.zfpx.cn'});

    //3.设置路径
    //res.cookie('name','zfpx',{path:'/visit'});

    //4.过期时间
    //res.cookie('name','zfpx',{expires:new Date(Date.now()+20*1000)});//毫秒
    //res.cookie('name','zfpx',{maxAge:20*1000});//过期时间 毫秒

    //httpOnly true还是false无意义 document.cookie取不到
    //res.cookie('name','zfpx',{httpOnly:true});
    res.cookie('age','123',{signed:true});
    res.end('ok');
});

app.get('/read',function(req,res){
    console.log(req.signedCookies);
    res.send(req.cookies);
});

//记录这是客户端的第几次访问
app.get('/visit',function(req,res){
    res.cookie('count',isNaN(req.cookies.count)?0:parseInt(req.cookies.count)+1);
    res.send(req.cookies);
});


app.listen(9090);

cookieParser原理解析 #

function cookieParser(req, res, next){
    if (!req.headers.cookie) {
        return next();
    }
    req.cookies =  require('querystring').parse(req.headers.cookie,'; ','=');
    res.cookie = cookie;
    next();
}

function cookie(name, val, options) {
    var opt = options || {};

    var value = encodeURIComponent(val);

    var pairs = [name + '=' + value];

    if (null != opt.maxAge) {
        var maxAge = opt.maxAge - 0;
        if (isNaN(maxAge)) throw new Error('maxAge should be a Number');
        pairs.push('Max-Age=' + Math.floor(maxAge));
    }

    if (opt.domain) {
        pairs.push('Domain=' + opt.domain);
    }

    if (opt.path) {
        pairs.push('Path=' + opt.path);
    }

    if (opt.expires) pairs.push('Expires=' + opt.expires.toUTCString());
    if (opt.httpOnly) pairs.push('HttpOnly');
    if (opt.secure) pairs.push('Secure');

    return pairs.join('; ');
}

加密cookie #

var crypto = require('crypto');
var sign = function(val, secret){
    return val + '.' + crypto
            .createHmac('sha256', secret)
            .update(val)
            .digest('base64')
            .replace(/\=+$/, '');
};

console.log(sign('123','zfpx'));

权限控制 #

var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
app.set('view engine','html');
app.engine('html',require('ejs').__express);
app.set('views',__dirname);

app.use(cookieParser());

function checkUser(req,res,next){
    if(req.cookies && req.cookies.username)
      next();
    else
      res.redirect('/');
}

//进入登录页
app.get('/',function(req,res){
    res.render('index');
});

//登录
app.get('/login',function(req,res){
    res.cookie('username',req.query.username,{httpOnly:true});
    res.redirect('/user');
});

//用户页面
app.get('/user',checkUser,function(req,res){
    res.render('user',{username:req.cookies.username});
});

//用户退出
app.get('/logout',function(req,res){
    res.clearCookie('username');//清除cookie
    res.redirect('/');
});


app.listen(8080);

记住密码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function setCookie(key,value){
            document.cookie = key+"="+value;
        }
        function getCookie(key){
            if(document.cookie){
                var parts = document.cookie.split('; ');
                for(var i=0;i<parts.length;i++){
                    var vals = parts[i].split('=');
                    if(vals[0]==key){
                        return vals[1];
                    }
                }
                return "";
            }else{
                return "";
            }
        }
        function checkCookie(){
            var username = getCookie('username');
            if(username){
                alert('欢迎'+username+'再次访问');
                document.querySelector('#username').value = username;
            }else{
                username = prompt('请输入用户名:');
                if(username){
                    setCookie('username',username);
                }
            }
        }
    </script>
</head>
<body onLoad="checkCookie()">
<input type="text" id="username">
</body>
</html>

cookie使用注意事项 #

  • 可能被客户端篡改,使用前验证合法性
  • 不要存储敏感数据,比如用户密码,账户余额
  • 使用httpOnly保证安全
  • 尽量减少cookie的体积
  • 设置正确的domain和path,减少数据传输

~~~

未经允许不得转载:WEB前端开发 » 浏览器cookie/http请求,网站优化使用

赞 (0)