前后端分离Cookie sameSite坑 跨域之坑

本文介绍了解决前后端分离项目中跨域登录问题的方法,通过调整Spring Session和Cookie配置,实现跨域POST访问携带Cookie,包括前端配置withCredentials及后端设置Access-Control-Allow-Credentials。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在前后端分离解决跨域问题过程中,利用CORS解决跨域问题,前后端按照规范处理了,但不管怎样session都是不一致,所以前端无法登陆无法在本地测试。查了几天资料,中间反反复复,最后要放弃的时候无意中看到一个大神的博客。

本项目是使用spring-session-data-redis实现HTTP Session集中管理原理

 

SameSite Cookie 应该是一种新的cookie属性值,我看到很多大型网站如百度都没有用到,
他是防止 CSRF 攻击 具体可看 https://www.cnblogs.com/ziyunfei/p/5637945.html

spring web 最新版默认生成为SameSite=Lax,奇怪的是用spring-session-data-redis 后 cookie新增了 SameSite这个字段,所以不能携带cookie进行跨域post访问,文档上也不表明什么时候开始的,坑的是默认为Lax也不能设置,
遂现在将web版本降级

因为服务端返回给客户端的set-cookie中带有samesite=lax,这就是问题的根源,它表示不能携带cookie进行跨域post访问,然而我们是需要携带cookie的

解决办法:

@Bean 
public CookieSerializer httpSessionIdResolver(){ 
    DefaultCookieSerializer   cookieSerializer = new DefaultCookieSerializer();                                
    cookieSerializer.setCookieName("token"); 
    cookieSerializer.setUseHttpOnlyCookie(false); 
    cookieSerializer.setSameSite(null); 
    return cookieSerializer; 

}

使用的pom依赖

 <dependency>
            <groupId>org.springframework.session</groupId>
            <artifactId>spring-session-data-redis</artifactId>
            <version>2.1.1.RELEASE</version>
 </dependency>

前端在与后台交互时也得做如下的配置(ajax请求)

xhrFields: {
    withCredentials: true
}

它让ajax能够携带cookie请求,后端需要设置

response.setHeader("Access-Control-Allow-Credentials", "true");

允许cookie跨域,这样就大功告成!!!

### 若依前后端分离架构中的常见漏洞及其修复方法 #### 一、身份验证和授权问题 在若依前后端分离架构中,身份验证和授权是一个重要的安全领。由于前端和后端独立运行,确保用户身份合法性和权限控制变得尤为关键。例如,在不同微服务间传递用户身份信息时,如果缺乏有效的加密手段,则可能导致身份伪造攻击[^1]。 为了应对这些问题: - **采用JWT(JSON Web Token)**:利用JWT可以在客户端存储用户的认证状态,并将其作为每次HTTP请求的一部分发送给服务器。这种方式不仅简化了调用的身份验证流程,还增强了安全性。 - **OAuth2协议集成**:对于涉及多个子系统的大型应用来说,实施OAuth2可以更好地管理和保护资源访问权。 ```javascript // 客户端获取Token并保存至LocalStorage fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }) .then(response => response.json()) .then(data => localStorage.setItem('token', data.token)); ``` #### 二、XSS (Cross-Site Scripting) 站脚本攻击防护 当使用像Laravel这样的PHP框架构建后端API时,默认情况下已经包含了针对某些类型的XSS攻击的安全特性。但是开发者仍然需要注意输入过滤与输出编码等方面的工作以进一步加强防御力度[^2]。 具体措施包括但不限于: - 对所有来自外部的数据进行严格的校验; - 使用模板引擎自带的功能自动转义变量内容; - 配置CSP(Content Security Policy),限制可执行JavaScript源的位置; ```html <!-- HTML 输出前应确保已正确转义 --> <p>{{ $userInput | e }}</p> ``` #### 三、CSRF (Cross-Site Request Forgery) 攻击预防 尽管前后端分离降低了部分风险因素的存在概率,但在实际操作过程中仍有可能遭遇此类威胁。因此建议采取以下策略加以防范: - 实现双令牌机制(Double Submit Cookie Pattern),即同时设置cookie和自定义header携带相同的随机数; - 启用SameSite属性标记cookies,阻止其他网站发起的非GET请求带上此站点下的Cookie; - 结合Referer/Origin头字段检查来源名的有效性; ```http Set-Cookie: csrftoken=abcde; Secure; HttpOnly; SameSite=Lax; ``` #### 四、敏感数据泄露隐患 考虑到前后端解耦后的特殊性质——后端只负责提供必要的业务逻辑响应而不参与UI层的具体实现细节——这就意味着任何不必要的暴露都有可能成为潜在的风险点。比如未经适当处理就直接返回数据库查询结果集可能会无意间透露过多内部结构信息[^4]。 为此应当做到: - 只向客户端传输必需的信息项; - 敏感字段务必经过脱敏化加工后再予以展现; - API设计遵循最小特权原则,严格限定每种角色所能触及的操作范围;
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值