前端的Cookies

Posted 2020-11-25 ygjzs

Cookies

cookies 特性

• 前端数据存储
• 后端通过 HTTP 头设置
• 请求时通过 HTTP 头传给后端
• 前端可读可写
• 遵守同源策略
  • 域名
  • 有效期
  • 路径
  • http-only
  • secure(https)

cookies 作用

• 存储个性化设置
• 存储未登录时用户唯一标识
• 存储已登录用户的凭证
• 存储其他业务数据

Cookies-登录用户凭证

• 前端提交用户名和密码
• 后端验证用户名和密码
• 后端通过 http 头设置用户凭证

• 后续访问时后端先验证用户凭证

• 验证用户 ID

• ID+签名

生成复杂字符串

var crypt = {}
const KET = '#$%489!#$%&*156sd'

crypt.cryptUserId = function(userId){
    var crypto = require('crypto);
    var sign = crypto.createHmac('sha256,KEY');
    sign.updata(userId + '');
    return sign.digest('hex');
}

module.exports = crypt;

进行设置

//登陆成功，设置Cookies
ctx.cookies.set("sign", crypt.cryptUserId(user.id), {
  httpOnly: false,
  sameSite: "strict"
});
ctx.cookies.set("userId", user.id, {
  httpOnly: false,
  sameSite: "strict"
});

验证

var userId = ctx.cookies.get("userId");
var sign = ctx.cookies.get("sign");
var correctSign = crypt.cryptUserId(userId);
if (correctSign !== sign) {
  throw new Errow("报告，有人入侵");
}

上面代码，可防御，篡改的 UserId 的入侵

• SessionId

sessionId 为随机生成的字符串，第三方拿不到，就无法入侵

生成复杂字符串

var session = {};

session.set = function(userId, obj) {
  var sessionId = Math.random();
  if (!cache[sessionId]) {
    cache[sessionId] = {};
  }
  cache[sessionId].conntent = obj;
  return sessionId;
};
session.get = function(userId) {
  return cache[session] && cache[sessionId].content;
};
module.exports = session;

进行设置

var sessionId = session.set(user.id, {
  userId: user.id
});
ctx.cookies.set("sessionId", sessionId, {
  httpOnly: ture,
  sameSite: "strict"
});

验证

var sessionId = ctx.cookies.get("sessionId");
var sessionObj = session.get(sessionId);
if (!sessionObj || !sessionObj) {
  throw new Error("session不存在");
}
var userId = sessionObj.userId;

sessionId 需要持久化，存入数据库，因为内存是有限的。都存在内存中，服务器会出问题

Cookies 其他

• Cookies 与 XSS 的关系
  • XSS 可能偷取 Cookies
  • http-only 的 Cookies 不会被偷

• Cookies 与 CSRF 的关系

  • CSRF 利用了用户 Cookies
  • 攻击站点无法读写 Cookies
  • 最好能阻止第三方使用 Cookies
• Cookies 安全案例
  • 某学校教务处
    • 某学校教务系统使用了开源的 CMS
    • 改 CMS 使用 username 作为唯一用户标识
    • 改 CMS 文章作者暴露了 username
    • 可使用任意的 username 登录后台
  • 某论坛
    • 某论坛使用了某开源的 ASP BBS 程序
    • 改 ASP 程序使用用户 ID 作为用户标识
    • 可伪造任意用户登录

Cookies-安全策略

• 签名防篡改
• 私有变换（加密）
• http-only(防止 XSS)
• secure（仅允许 https 协议下使用 Cookies）
• same-site(很好地策略，但不是所有浏览器都支持)

　加密与解密

npm install crypto

var crypto = require("crypto");

var KEY = "#$%^156ssc#$%";
var cipher = crypto.createCipher("des", KEY);
var text = cipher.update("hello word", "utf8", "hex");
text += cipher.final("hex");

console.log(text);//加密后的

var decipher = crypto.createDecipher("des", KEY);
var originalText = decipher.update(text, "hex", "utf8");

console.log(originalText);//原来的