资讯专栏INFORMATION COLUMN

Cookie就摆在那,为什么死活吃不到?

shmily / 3211人阅读

摘要:查找原因无法获取到是因为同源策略和标记的原因。在同一个站点下使用属性是无效的。此外,这个指示也会被用做响应中被忽视的标示。而通过设置为获得的第三方,将会依旧享受同源策略,因此不能被通过或者从头部相应请求的脚本等访问。

作者:codexu

_

浏览器里明明存在的cookie,居然获取不到???

console.log(document.cookie);
// 没有???

起因

近来闲来无事,打算了解一下后端,既然想一探究竟,就从基本的注册登录开始做起。

技术选型

作为一名前端开发人员,用 Node.js 去体验后端应该是最快上手的方式了。看了一下文档,好长...没那么多时间看,直接...

框架 koa2

数据库 Mysql,不会操作数据库找到了 Sequelize

请求 Axios

思路

账户密码,不做加密,直接明文。

登陆

使用 jwt (jsonwebtoken) 生成 token 。

使用 koa2 ctx.cookies.set 在后端设置 cookie ,保存 token 。

跨域请求 koa2-cors

问题来了

问题一:填好用户名密码,点击登录,浏览器中没有被设置 cookie

解决办法: 使用 Axios 请求时,增加属性 withCredentials: true,这样就请求就可以携带 cookie 了。

产生这种情况的原因是因为 koa2-cors,如果在前端使用代理跨域不会出现这种情况。

问题二:浏览器中虽然能看到 cookie 中已经存在 token,但是前端代码中获取不到

解决办法:koa2 设置 cookie 时,设置 httpOnly: false 即可。

查找原因

doucment.cookie 无法获取到 cookie 是因为 同源策略 和 HttpOnly 标记的原因。

withCredentials:表示跨域请求时是否需要使用凭证,默认是 false

MDN
XMLHttpRequest.withCredentials 属性是一个 Boolean 类型,它指示了是否该使用类似 cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。在同一个站点下使用 withCredentials 属性是无效的。
此外,这个指示也会被用做响应中 cookies 被忽视的标示。默认值是 false。
如果在发送来自其他域的 XMLHttpRequest 请求之前,未设置 withCredentials 为true,那么就不能为它自己的域设置 cookie 值。而通过设置 withCredentials 为true获得的第三方 cookies,将会依旧享受同源策略,因此不能被通过 document.cookie 或者从头部相应请求的脚本等访问。

httpOnly:服务器可访问 cookie, 默认是 true

MDN
为避免跨域脚本 (XSS) 攻击,通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie,它们只应该发送给服务端。如果包含服务端 Session 信息的 Cookie 不想被客户端 JavaScript 脚本调用,那么就应该为其设置 HttpOnly 标记。

换种方式

MDN 上说 可能会 XSS 攻击,所以换种方式,存储到 localstorage 里吧。请求时,将 token 加在 header 中 Authorization。

总结

虽然绕了一圈,好像总结了两个没啥卵用的知识点,但是学习就是这样,遇到坑就积累一下。

希望有大佬能指点一下,如何做一个安全的登录。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106886.html

相关文章

  • 关于Node.js的__dirname,__filename,process.cwd(),./文件路

    摘要:先把当成文件,依次查找当前目录下的,找到了,就返回该文件,不再继续执行。那么关于正确的结论是在中使用是跟的效果相同,不会因为启动脚本的目录不一样而改变,在其他情况下跟效果相同,是相对于启动脚本所在目录的路径。 起因 原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博...

    harryhappy 评论0 收藏0
  • 关于Node.js的__dirname,__filename,process.cwd(),./文件路

    摘要:先把当成文件,依次查找当前目录下的,找到了,就返回该文件,不再继续执行。那么关于正确的结论是在中使用是跟的效果相同,不会因为启动脚本的目录不一样而改变,在其他情况下跟效果相同,是相对于启动脚本所在目录的路径。 起因 原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博...

    pumpkin9 评论0 收藏0
  • 关于Node.js的__dirname,__filename,process.cwd(),./文件路

    摘要:先把当成文件,依次查找当前目录下的,找到了,就返回该文件,不再继续执行。那么关于正确的结论是在中使用是跟的效果相同,不会因为启动脚本的目录不一样而改变,在其他情况下跟效果相同,是相对于启动脚本所在目录的路径。 起因 原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博...

    hzx 评论0 收藏0
  • 入职三天,公司给了100块钱叫我走人

    摘要:初来乍到,请多多指教,踏入广州那一刻,我满怀热情的对广州说。本以为,作为大学毕业的我,在国内最大的软件服务商被寄予厚望的我,在广州应该也是个热饽饽,不愁吃不愁穿不愁的。然而现实是广州的公司对我并没有多多指教,而是多多抛弃。 十月,金秋季节,本是丰收之时,却因为陆续有同事离职,心中多少有些悲凉之意,顿然想起从参加工作到现在,五年已过,当年青涩懵懂的小年轻,如今出街招摇过市时,被小孩子看到...

    Chao 评论0 收藏0
  • 入职三天,公司给了100块钱叫我走人

    摘要:初来乍到,请多多指教,踏入广州那一刻,我满怀热情的对广州说。本以为,作为大学毕业的我,在国内最大的软件服务商被寄予厚望的我,在广州应该也是个热饽饽,不愁吃不愁穿不愁的。然而现实是广州的公司对我并没有多多指教,而是多多抛弃。 十月,金秋季节,本是丰收之时,却因为陆续有同事离职,心中多少有些悲凉之意,顿然想起从参加工作到现在,五年已过,当年青涩懵懂的小年轻,如今出街招摇过市时,被小孩子看到...

    Karrdy 评论0 收藏0

发表评论

0条评论

shmily

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<