首页
/ Mongoose项目中HTTP/HTTPS同时访问Web UI Dashboard的Cookie冲突问题解析

Mongoose项目中HTTP/HTTPS同时访问Web UI Dashboard的Cookie冲突问题解析

2025-05-20 10:06:04作者:管翌锬

在Mongoose项目(版本7.14及7.15)的web-ui-dashboard参考实现中,开发人员发现了一个关于HTTP和HTTPS协议同时访问时的Cookie处理问题。这个问题表现为当用户同时通过HTTP和HTTPS访问同一个Web UI Dashboard时,HTTP连接下的部分页面内容无法正常显示。

问题现象

当服务器同时启用HTTP(端口8000)和HTTPS(端口8443)服务时:

  1. 单独使用HTTP访问时,所有功能页面(Dashboard、Settings、Firmware Update和Events)都能正常显示
  2. 一旦有用户通过HTTPS登录后,HTTP连接下的Dashboard、Settings和Events页面将显示为空白
  3. 通过HTTPS访问则始终能正常显示所有内容
  4. 当HTTPS用户注销后,HTTP访问又恢复正常

问题根源分析

经过深入排查,发现问题源于现代浏览器对Cookie安全策略的实施。具体机制如下:

  1. 当HTTPS连接设置了一个带有Secure属性的Cookie后
  2. 浏览器会阻止同一域名下HTTP连接设置同名的Cookie
  3. 在控制台会显示警告:"尝试通过Set-Cookie标头设置Cookie的操作被禁止了,因为此标头不是通过安全连接发送的,而且会覆盖具有Secure属性的Cookie"
  4. 这导致HTTP连接无法成功设置access_token,后续请求中浏览器无法提供有效的认证令牌
  5. 服务器收到空令牌后返回403未授权响应,造成页面内容无法加载

解决方案

Mongoose项目团队提出了两种解决方案:

方案一:为HTTPS Cookie添加前缀(未成功)

最初尝试为HTTPS连接的Cookie值添加"s_"前缀:

mg_http_reply(c, 200, cookie, "{%m:%c%s%M%c}", 
              MG_ESC("user"), '"', c->is_tls ? "s_" : "", 
              MG_ESC(u->name), '"');

但这种方法未能解决问题,因为浏览器是根据Cookie名称而非值来进行安全策略判断的。

方案二:使用不同的Cookie名称(有效方案)

最终有效的解决方案是为HTTP和HTTPS连接使用完全不同的Cookie名称:

static void handle_login(struct mg_connection *c, struct user *u) {
  char cookie[256];
  const char *cookie_name = c->is_tls ? "secure_access_token" : "access_token";
  mg_snprintf(cookie, sizeof(cookie),
              "Set-Cookie: %s=%s; Path=/; "
              "%sHttpOnly; SameSite=Lax; Max-Age=%d\r\n",
              cookie_name, u->access_token, 
              c->is_tls ? "Secure; " : "", 3600 * 24);
  mg_http_reply(c, 200, cookie, "{%m:%m}", MG_ESC("user"), MG_ESC(u->name));
}

这个方案通过以下方式解决问题:

  1. HTTPS连接使用"secure_access_token"作为Cookie名
  2. HTTP连接继续使用"access_token"作为Cookie名
  3. 两种连接的Cookie互不干扰,避免了浏览器的安全策略限制

技术背景延伸

这个问题的出现与现代Web安全机制密切相关:

  1. Secure Cookie属性:标记为Secure的Cookie只能通过HTTPS连接传输,防止中间人攻击
  2. 同源策略:虽然HTTP和HTTPS被视为不同协议,但浏览器对同一域名的Cookie处理有特殊规则
  3. Cookie覆盖保护:浏览器防止低安全性的连接覆盖高安全性的Cookie,这是重要的安全特性

最佳实践建议

在实现同时支持HTTP和HTTPS的Web服务时,开发者应当:

  1. 为不同安全级别的连接使用不同的Cookie名称
  2. 确保HTTPS连接的Cookie始终设置Secure属性
  3. 考虑逐步淘汰HTTP支持,全面转向HTTPS
  4. 在必须支持双协议的场景下,做好充分的兼容性测试

这个问题展示了Web安全机制与实际业务需求之间的平衡考量,也体现了Mongoose项目团队对安全细节的重视。通过这个案例,开发者可以更好地理解现代浏览器安全策略对Web应用设计的影响。

登录后查看全文

项目优选

收起
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
436
332
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
51
14
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
C++
94
169
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
273
443
openGauss-serveropenGauss-server
openGauss kernel ~ openGauss is an open source relational database management system
C++
50
117
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
342
222
cherry-studiocherry-studio
🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端
TypeScript
339
34
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
87
241
CangjieMagicCangjieMagic
基于仓颉编程语言构建的 LLM Agent 开发框架,其主要特点包括:Agent DSL、支持 MCP 协议,支持模块化调用,支持任务智能规划。
Cangjie
559
39
carboncarbon
轻量级、语义化、对开发者友好的 golang 时间处理库
Go
7
2