在使用谷歌时发现一个诡异问题cookie传不过去

在使用谷歌时发现一个诡异问题cookie传不过去

查找相关资料发现这是谷歌的一个新属性SameSite导致的,

SameSite 属性

Cookie 的SameSite属性用来限制第三方 Cookie,从而减少安全风险。

它可以设置三个值。

Strict
Lax
None
2.1 Strict
Strict最为严格,完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie。换言之,只有当前网页的 URL 与请求目标一致,才会带上 Cookie。

Set-Cookie: CookieName=CookieValue; SameSite=Strict;
这个规则过于严格,可能造成非常不好的用户体验。比如,当前网页有一个 GitHub 链接,用户点击跳转就不会带有 GitHub 的 Cookie,跳转过去总是未登陆状态。

2.2 Lax
Lax规则稍稍放宽,大多数情况也是不发送第三方 Cookie,但是导航到目标网址的 Get 请求除外。

Set-Cookie: CookieName=CookieValue; SameSite=Lax;
导航到目标网址的 GET 请求,只包括三种情况:链接,预加载请求,GET 表单。详见下表。

请求类型 示例 正常情况 Lax
链接 发送 Cookie 发送 Cookie
预加载 发送 Cookie 发送 Cookie
GET 表单 发送 Cookie 发送 Cookie
POST 表单 发送 Cookie 不发送
iframe 发送 Cookie 不发送
AJAX $.get("…") 发送 Cookie 不发送
Image < img src="…"> 发送 Cookie 不发送

设置了Strict或Lax以后,基本就杜绝了 CSRF 攻击。当然,前提是用户浏览器支持 SameSite 属性。

2.3 None
Chrome 计划将Lax变为默认设置。这时,网站可以选择显式关闭SameSite属性,将其设为None。不过,前提是必须同时设置Secure属性(Cookie 只能通过 HTTPS 协议发送),否则无效。

下面的设置无效。

Set-Cookie: widget_session=abc123; SameSite=None
下面的设置有效。

Set-Cookie: widget_session=abc123; SameSite=None; Secure

解决方法

第一种。设置 response.setHeader(“Set-Cookie”, “HttpOnly;Secure;SameSite=None”)后,使用https传输cookie。(我没有用过)
第二种。看到其中的一条解决方案: 禁用chrome samesite。方法如下:

在chrome中打开链接: chrome://flags/#site-isolation-trial-opt-out,搜索samesite
在这里插入图片描述
2.将上述三个选项禁用(设为disable)后重启chrome,问题解决。
在这里插入图片描述

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我可以帮你解答这个问题。 首先,我们需要安装一个名为 `cookie-parser` 的 Node.js 中间件,来帮助我们在 Express 应用程序中处理 cookie。你可以通过以下命令来安装: ``` npm install cookie-parser ``` 接下来,我们可以使用以下代码在 Express 应用程序中启用 cookie-parser: ```javascript const express = require('express'); const cookieParser = require('cookie-parser'); const app = express(); app.use(cookieParser()); ``` 现在我们已经可以处理 cookie 了。接下来是如何制作一个简单答题界面。 我们可以使用以下代码来定义一个简单的路由,当用户访问 `/quiz` 路径,会显示一个包含两个问题的答题界面。用户回答完问题后,答案会保存在 cookie 中。 ```javascript app.get('/quiz', (req, res) => { // 检查 cookie 中是否已经保存了答案 const answered = req.cookies.answered || []; // 定义两个问题和答案 const questions = [ { id: 1, text: '2 + 2 = ?', options: [ { text: '3', value: false }, { text: '4', value: true }, { text: '5', value: false }, ], }, { id: 2, text: '5 - 3 = ?', options: [ { text: '2', value: true }, { text: '3', value: false }, { text: '4', value: false }, ], }, ]; // 检查哪些问题已经回答过了 const unanswered = questions.filter(q => !answered.includes(q.id)); // 如果所有问题都已经回答过了,显示一个消息 if (unanswered.length === 0) { res.send('你已经回答过所有问题了!'); return; } // 获取下一个需要回答的问题 const question = unanswered[0]; // 显示问题和选项 let html = `<p>${question.text}</p>`; html += '<form method="post">'; for (const option of question.options) { html += `<input type="radio" name="answer" value="${option.value}"> ${option.text}<br>`; } html += '<input type="submit" value="提交">'; html += '</form>'; res.send(html); }); app.post('/quiz', (req, res) => { // 获取用户提交的答案 const answer = req.body.answer; // 检查 cookie 中是否已经保存了答案 const answered = req.cookies.answered || []; // 将这个问题的 ID 添加到已回答列表中 const questionId = req.body.questionId; answered.push(questionId); // 将答案保存在 cookie 中 res.cookie('answered', answered); // 重定向到下一个问题页面 res.redirect('/quiz'); }); ``` 以上代码使用了两个路由: - `GET /quiz`:显示答题界面。 - `POST /quiz`:处理用户提交的答案,并将答案保存在 cookie 中。 现在你可以启动你的 Express 应用程序,并访问 `http://localhost:3000/quiz` 来查看结果了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值