这篇文章是前一篇文章(Cookie理论知识)的实践性理解
完整代码:
Cookie在注册登录时的作用过程:
注册
注册时把账号密码写入数据库
登录
第一次登录时服务器给浏览器发送Cookie.
后台的登录路由代码(nodejs):
else if (path === '/sign_in' && method === 'POST') {
readBody(request).then((body) => {
let strings = body.split('&') // ['email=1', 'password=2', 'password_confirmation=3']
let hash = {}
strings.forEach((string) => {
// string == 'email=1'
let parts = string.split('=') // ['email', '1']
let key = parts[0]
let value = parts[1]
hash[key] = decodeURIComponent(value) // hash['email'] = '1'
})
let {
email,
password
} = hash
var users = fs.readFileSync('./db/users', 'utf8')
try {
users = JSON.parse(users) // []
} catch (exception) {
users = []
}
let found
for (let i = 0; i < users.length; i++) {
if (users[i].email === email && users[i].password === password) {
found = true
break
}
}
if (found) {//关键在这里,验证成功,设置登录Cookie为登录的邮箱,并放在响应里发给浏览器
response.setHeader('Set-Cookie', `sign_in_email=${email}`)
response.statusCode = 200
} else {
response.statusCode = 401
}
response.end()
})
}
在登录成功的一瞬间,需要后台设置一个Cookie,记录一下登陆的用户id(这里用邮箱表示,代码在上面),然后发响应给浏览器
例如在服务器端设置响应头:set-cookies:user_email=1@mtt.com
这时候我们查看响应:
发现响应头已经设置cookie.
然后跳转到主页,这时候我们查看跳转到主页的请求:
发现跳转到主页的请求头中包含cookie字段(以后访问这个域名都会带着这个Cookie)!所以,就像上篇文章说的:
如果服务器给了浏览器一个setcookie的响应头,那么这个浏览器以后所有的请求,只要是相同的源(即就是上次给我发送Cookie的那个域名,域名和端口相同),那就么就会把当时服务器发给这个浏览器的Cookie带着
以后,浏览器一旦访问这个路径,浏览器就会附上这段 Cookie 发送给服务器
即:第一次请求,服务器为浏览器设置Cookie.下次请求,浏览器带上Cookie,发送给服务器.
第一次登录的时候,服务器给浏览器的响应设置一个Cookie,set-cookies:user_email=1@mtt.com
,然后当浏览器下次进行请求的时候,发现Cookie中有名为User_email的Cookie,而且我发送请求的域名还是上次发给我带Cookie的响应的那个域名.
那么就无需再次登录了.相当于服务器给浏览器发了进入门票,下次或下下次浏览器在进入服务器的时候给服务器看票就可以了
后台读取Cookie保留登录状态与删除Cookie退出登录状态
首页代码:
<body>
<h1>我是首页</h1>
<div class="">
<a href="./sign_up">注册</a>
<a href="./sign_in">登录</a>
</div>
<h1>你的状态是:__status__</h1>
<h1>你的邮箱账号是:__email__</h1>
<h1>你的密码是:__password__</h1>
<a href="javascript:;" id="logOffBtn">退出登录(删除cookie)</a>
</body>
<script>
logOffBtn.addEventListener("click", () => {
// 删除一个现存 Cookie 的唯一方法,是设置它的expires属性为一个过去的日期。
document.cookie = 'sign_in_email=;expires=Thu, 01-Jan-1970 00:00:01 GMT'
window.location = "/"
})
</script>
后台路由代码
if (path === '/') {
response.statusCode = 200
let string = fs.readFileSync('./index.html')
string = string.toString();
var users = fs.readFileSync('./db/users', 'utf8')
users = JSON.parse(users)//转化为user对象数组
console.log(users);
let cookies = request.headers.cookie || ''//['email=111', 'asdasd=111']
cookies = cookies.split("; ")
let hash={}
cookies.forEach((string)=>{
let parts = string.split("=")
let key = parts[0]
let value = parts[1]
hash[key] = value;
})
let eamil = hash.sign_in_email
let foundedUser
users.forEach((userObj)=>{
if(userObj.email===eamil){
foundedUser = userObj;
}
})
console.log(foundedUser);
if(foundedUser){
string = string.replace('__status__', '已登录')
string = string.replace('__email__', foundedUser.email)
string = string.replace('__password__', foundedUser.password)
}else{
string = string.replace('__status__', '未登录,请去登录')
string = string.replace('__email__', '没')
string = string.replace('__password__', '没')
}
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(string)
response.end()
}
在没有Cookie的时候,首页的状态
登录之后,后台根据Cookie查询数据库,将用户名与密码传到前台的首页上
退出登录将删除Cookie并刷新页面,重新回到未登录的状态
Cookie在登录的时候的特点
我们得到Cookie的特点:
- 第一次登录的时候,服务器通过 Set-Cookie 响应头设置 Cookie,然后以响应的形式发给浏览器
- 浏览器得到 响应中Cookie 之后,之后每次请求这个域名都要带上这个 Cookie
- 之后服务器读取当时自己设置的 Cookie 就知道登录用户的信息(email)
几个关于Cookie的问题
1.我在 Chrome 登录了得到 Cookie,用 Safari 访问,Safari 会带上 Cookie 吗
no
2.Cookie 存在哪
Windows 存在 C 盘的一个文件里
3.Cookie会被用户篡改吗?
可以,例如在谷歌浏览器开发者模式下的application->Cookie中可以手动修改,修改之后,下次发送请求时,附带的就是修改后的Cookie
JS中也有可以操作cookie的api
( 假如换成别的用户的账号,那么还可以登录成功的话,就会存在风险问题.Session 来解决这个问题,防止用户篡改)
后端可以强制设置不允许修改Cookie,只要将Cookie的属性设置为Httponly
即可(还可以手动改,但是JS改不了,也无法获取),具体语法看 MDN
4.Cookie 有效期吗?
默认有效期20分钟左右,不同浏览器策略不同(如果浏览器一直开着,那么Cookie不会被删除.如果关闭浏览器,那么浏览器为了安全考虑,20分钟左右后可能会删除Cookie.这也取决于服务器如何设置Cookie的有效期)
后端可以强制设置有效期,具体语法看 MDN
Cookie 遵守同源策略吗?
也有,不过跟 AJAX 的同源策略稍微有些不同。
当请求 qq.com 下的资源时,浏览器会默认带上 qq.com 对应的 Cookie,不会带上 baidu.com 对应的 Cookie
当请求 v.qq.com 下的资源时,浏览器不仅会带上 v.qq.com 的Cookie,还会带上 qq.com 的 Cookie
另外 Cookie 还可以根据路径做限制,请自行了解,这个功能用得比较少。
需要注意的细节问题
为什么前后端都要进行表单验证?
前后端都要验证邮箱格式是否正确,账号密码格式是否正确,两次提交的密码是否相同等。
因为黑客可以绕过前端的js验证流程,例如黑客可以直接使用curl 进行请求的发送,直接与后台服务器进行交互。
如图:
所以后台也需要进行表单验证。
Cookie如何手动关闭
翻译
cookie:曲奇饼
cache-control:缓存控制