专栏首页马涛涛的专栏以登录注册理解Cookie的作用过程

以登录注册理解Cookie的作用过程

这篇文章是前一篇文章(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的特点:

  1. 第一次登录的时候,服务器通过 Set-Cookie 响应头设置 Cookie,然后以响应的形式发给浏览器
  2. 浏览器得到 响应中Cookie 之后,之后每次请求这个域名都要带上这个 Cookie
  3. 之后服务器读取当时自己设置的 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:缓存控制

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Cookie

    Cookie 是服务器保存在浏览器的一小段文本信息。浏览器每次向服务器发出请求,就会自动附上这段信息。

    代码之风
  • Cookie与Session、LocalStorage与Sessionstorage 对比

    SessionStorage 在用户关闭页面(准确的来说是会话(Session)结束)后就失效。其余的和localstorage一样

    代码之风
  • Session

    类比:session相当于发会员卡,会员卡上只有卡号(sessionID)。下次去健身房的时候,只要看卡号上,就能确定你本人的去他信息。 而cookie相当于把...

    代码之风
  • Kali Linux Web渗透测试手册(第二版) - 4.5- 手动识别Cookie中的漏洞

    Cookie是服务器存放在客户端上的信息片段,它可以是长效的,也可以是短期的。在现如今的Web应用当中,Cookie被更多地用来做会话跟踪。服务器会将生成的会话...

    用户1631416
  • 快速学习-登录功能实现-登录成功跳转主页面

    5) Session的时效问题 Session默认有效时间为30分钟,可以在服务器的web.xml配置中修改.

    cwl_java
  • 必须掌握的Cookie知识点都在这里

    上一篇我们在讲优酷弹幕爬虫的时候,引入了一个新的知识点:Cookie,由于篇幅有限当时只是简单的给大家介绍了一下它的作用,今天我们就来全面了解一下Cookie(...

    测试小兵
  • Servlet第五篇【介绍会话技术、Cookie的API、详解、应用】

    什么是会话技术 基本概念: 指用户开一个浏览器,访问一个网站,只要不关闭该浏览器,不管该用户点击多少个超链接,访问多少资源,直到用户关闭浏览器,整个这个过程我们...

    Java3y
  • 关于Cookie的细致总结

    Cookie概述 HTTP是一种无状态的请求/响应协议,用户通过浏览器访问Web站点后,Web服务端没有可用信息来判断是哪个用户发起的请求,更加无法知道下次访问...

    JavaQ
  • 新型漏洞:利用浏览器Cookie绕过HTTPS并窃取私人信息

    近期,一个存在于主要浏览器的Web cookie中的严重漏洞被发现,它使安全的浏览方式(HTTPS)容易遭受中间人攻击。此外,大部分Web网站和流行的开源应用程...

    逸鹏
  • 【JavaWeb】91:Cookie与Session

    当设置阻止所有Cookie后,会发现很多网站都没法登录了,今天就学一学这个Cookie。

    刘小爱

扫码关注云+社区

领取腾讯云代金券