Cookie

最新推荐文章于 2024-10-25 07:15:00 发布

原创最新推荐文章于 2024-10-25 07:15:00 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

HTTP 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Cookie的原理，它是服务端通过Set - Cookie header设置到浏览器并保存的内容，下次同域请求会带上。还阐述了Cookie的属性，如设置过期时间、Secure、HttpOnly等，通过实验展示了其使用方法，包括多Cookie传递、设置时效、domain等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cookie

Cookie 是服务端返回数据的时候，通过 Set-Cookie 这个 header，设置到浏览器中，并保存在浏览器中的内容。

浏览器保存了这个Cookie 后，下次在同域的请求中，就会带上这个Cookie。

Cookie 是键值对的形式保存的，可以设置多个。

cookie 属性

max-age 和 expires 设置过期时间

Secure 只在 https 的时候发送

设置了 HttpOnly 后，就无法通过 js 的document.cookie 去访问了（安全性）

下面我们来实验一下cookie 的使用。

首先是server.js 如下

const http = require('http')
const fs = require('fs')

http.createServer(function (request, response) {
    console.log('request come', request.url)

    if (request.url === '/') {
        const html = fs.readFileSync('test.html', 'utf8')
        response.writeHead(200, {
            'Content-Type': 'text/html',
            'Set-Cookie': 'id=12345'
        })
        response.end(html)
    }
}).listen(8888)

console.log('serve listening on 8888')

然后是test.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MyHtml</title>
</head>
<body>
    <div>hello world</div>
    <div>don't speak</div>
    <script>
        console.log(document.cookie)
    </script>
</body>
</html>

然后，我们启动服务。在浏览器中打开页面localhost：8888 ,就可以看到：

当我们再次刷新页面时，会看到相同的网络请求，Request Header 中包含了Cookie了：

传多个Cookie，在node.js 中是通过在Set-Cookie中传递数组的方式传递多个Cookie 的，如下。

const http = require('http')
const fs = require('fs')

http.createServer(function (request, response) {
    console.log('request come', request.url)

    if (request.url === '/') {
        const html = fs.readFileSync('test.html', 'utf8')
        response.writeHead(200, {
            'Content-Type': 'text/html',
            'Set-Cookie': ['id=12345', 'abc=456']
        })
        response.end(html)
    }
}).listen(8888)

console.log('serve listening on 8888')

Cookie 的时效

Cookie 是有时效的。如果我们没有设置它的时间，它就是在我们关闭浏览器之后就不可用了。

当然，我们也可以为cookie 设置过期时间。如下（max-age 单位为秒）。

const http = require('http')
const fs = require('fs')

http.createServer(function (request, response) {
    console.log('request come', request.url)

    if (request.url === '/') {
        const html = fs.readFileSync('test.html', 'utf8')
        response.writeHead(200, {
            'Content-Type': 'text/html',
            'Set-Cookie': ['id=12345; max-age=2', 'abc=456']
        })
        response.end(html)
    }
}).listen(8888)

console.log('serve listening on 8888')

max-age 是通过设置时长计算过期时间，而expires 是指定在某个时间点后过期（比较麻烦）。

HttpOnly 属性

我们可以为cookie设置HttpOnly 属性，如下。

const http = require('http')
const fs = require('fs')

http.createServer(function (request, response) {
    console.log('request come', request.url)

    if (request.url === '/') {
        const html = fs.readFileSync('test.html', 'utf8')
        response.writeHead(200, {
            'Content-Type': 'text/html',
            'Set-Cookie': ['id=12345; max-age=2', 'abc=456; HttpOnly']
        })
        response.end(html)
    }
}).listen(8888)

console.log('serve listening on 8888')

这时候 console就不会打印出abc=456 这个cookie 。

domain

当我们设置了某个url 如 a.com有一个cookie，那么怎样使得 b.a.com 也可以使用这个cookie 呢？就是通过domain。

如下，当然我们可能还要使用chrome 插件，hostAdmin 将test.com 重定向为localhost

const http = require('http')
const fs = require('fs')

http.createServer(function (request, response) {
    console.log('request come', request.url)

    const host = request.headers.host;

    if (request.url === '/') {
        const html = fs.readFileSync('test.html', 'utf8')
        if (host === 'test.com') {
            response.writeHead(200, {
                'Content-Type': 'text/html',
                'Set-Cookie': ['id=12345; max-age=2', 'abc=456; HttpOnly', 'ddd=000; domain=test.com']
            })
            response.end(html)
        }
        
    }
}).listen(8888)

console.log('serve listening on 8888')