LocalStorage、SessionStorage 和 Cookie

Cookie

本质： HTTP协议的一部分，由服务器生成，客户端存储
生命周期：

• 会话Cookie：浏览器关闭时清除
• 持久Cookie：通过Expires或Max-Age设置过期时间存储大小： 4KB（每个域名）

作用域： 可设置domain和path进行限制，可跨子域

通信方式： 每次HTTP请求都会自动携带在请求头中

LocalStorage

本质： HTML5 Web Storage API的一部分
生命周期： 永久存储，除非手动清除或用户清除浏览器数据
存储大小： 5-10MB（不同浏览器有差异）
作用域： 同源策略限制，协议+域名+端口必须一致
通信方式： 仅在客户端操作，不参与服务器通信

SessionStorage

本质： HTML5 Web Storage API的一部分
生命周期： 仅当前会话有效（标签页或浏览器窗口）
存储大小： 5-10MB（不同浏览器有差异）
作用域： 同源且同一标签页/窗口
通信方式： 仅在客户端操作，不参与服务器通信

Cookie可以跨域吗？

Cookie默认遵循同源策略，可以通过Domine属性进行跨域

设置顶级域名共享Cookie

显式配置才能跨域携带Cookie  

credentials: 'include'

设置cookie的有效期：

function setCookie(name, value, days) {
    const expires = new Date();
    //比如30天
    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/`;
}

Cookie属性设置：

// 完整属性列表
const cookieAttributes = {
    expires: '过期时间，GMT格式',
    maxAge: '最大存活时间，秒为单位',
    domain: '作用域名，可设置顶级域实现跨子域',
    path: '作用路径，默认当前路径',
    secure: '仅在HTTPS下发送',
    httpOnly: '禁止JavaScript访问，防止XSS',
    sameSite: '控制跨站请求是否发送Cookie'
};

web常见攻击 以及防御手段

# XSS 跨站脚本攻击

将恶意脚本注入到网页中，当用户浏览被感染页面时，脚本自动执行，窃取用户cookie，会话令牌等敏感信息

防御：Set-Cookie: httpOnly 禁止js访问

内容安全策略：Content-Security-Policy: default-src 'self'; 限制网页只能加载来自当前域名的资源

# CSRF 跨站请求伪造

用户登录正常网站A，获得身份凭证，访问恶意网站B，网站b中隐藏请求网站A的接口，浏览器自动附加用户Cookie

防御：Set-Cookie: sameSite=strict 完全禁止第三方Cookie， 双重cookie验证，请求时把cookie附加到请求头headeer中