讲师中心 微信公众号
AI工具推荐 视频效率加速

如何通过HTML5中WebSocket协议头扩展实现自定义的用户身份鉴权验证

小晨姑娘_6383

小晨姑娘_6383

发布时间:2026-06-05 08:17:00

|

714人浏览过

|

来源于php中文网

原创

浏览器WebSocket不支持设置自定义请求头(如Authorization),因规范限制仅允许Upgrade、Connection等特定头部;可行方案包括URL传token、Cookie自动携带或连接后发送鉴权帧。

如何通过html5中websocket协议头扩展实现自定义的用户身份鉴权验证

WebSocket 协议本身不支持在握手阶段直接携带自定义请求头(如 Authorization、X-User-ID 等),因为浏览器端的 WebSocket 构造函数(new WebSocket(url, protocols))**不允许设置自定义 HTTP 请求头**。这是浏览器安全策略限制,不是 HTML5 或 WebSocket 协议本身的缺陷,而是出于防止跨站请求伪造(CSRF)等风险的设计约束。

为什么不能直接加自定义协议头?

根据 WHATWG 规范和主流浏览器实现,WebSocket 连接初始化时发起的 HTTP Upgrade 请求,其请求头是严格受限的。仅允许以下字段由浏览器自动设置或通过 protocols 参数间接影响:

  • Upgrade: websocket
  • Connection: Upgrade
  • Sec-WebSocket-Key、Sec-WebSocket-Version、Sec-WebSocket-Protocol
  • Origin(由浏览器自动添加,不可覆盖)

像 Authorization、Cookie(若未开启 withCredentials)、X-* 类自定义头均被明确禁止传入。

可行的身份鉴权替代方案

虽然不能发自定义头,但可通过以下方式安全、可靠地完成用户身份验证与鉴权:

html-ppt-to-pdf
html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF(使用 Playwright + Chromium 原生 PDF 功能)。

下载

立即学习“前端免费学习笔记(深入)”;

  • URL 查询参数传递临时凭证:将短期有效的 token(如 JWT)拼在 WebSocket URL 后,例如:
    ws://example.com/ws?token=eyJhbGciOiJIUzI1Ni...&uid=123
    服务端在 upgrade 阶段解析 URL,校验 token 有效性、签名、过期时间及绑定信息(如 uid、IP、user-agent 指纹)。注意:避免在 URL 中暴露敏感长期凭证(如密码、密钥),且需防范日志泄露(Nginx/Apache 默认记录完整 URL)。
  • 基于 Cookie 的自动携带(推荐):若 WebSocket 服务与主站同域(或配置了合适的 CORS + Cookie 策略),可提前通过 HTTP 接口设置 HttpOnly=false、Secure、SameSite=Lax(或 None)的认证 Cookie。浏览器会在 WebSocket Upgrade 请求中自动带上该 Cookie。服务端从 cookie 字段解析并校验 session 或 token。此方式无需前端显式传参,更符合 Web 安全惯例。
  • 握手后立即发送鉴权帧:建立连接后,客户端立刻发送一条 JSON 或二进制格式的认证消息(如 {"type":"auth","token":"..."}),服务端收到后验证,成功则标记连接为已认证,失败则关闭连接。需配合连接状态管理(如 Redis 存储 pending 连接 ID),防止未鉴权连接占用资源。

服务端实现要点(以 Node.js + ws 库为例)

在升级前拦截请求,提取凭证并校验:

const WebSocket = require('ws');
const http = require('http');

const server = http.createServer();
const wss = new WebSocket.Server({ noServer: true });

server.on('upgrade', async (req, socket, head) => {
  // 1. 解析 URL 查询参数
  const url = new URL(req.url, 'http://localhost');
  const token = url.searchParams.get('token');
  
  // 2. 或从 Cookie 解析(需手动解析 req.headers.cookie)
  const cookies = parseCookies(req.headers.cookie);
  const sessionId = cookies['session_id'];

  try {
    // 3. 异步校验(JWT 验证 / Session 查询 / DB 查用户)
    const user = await verifyTokenOrSession(token || sessionId);
    if (!user) throw new Error('Invalid auth');

    // 4. 允许升级,附带用户上下文
    wss.handleUpgrade(req, socket, head, (ws) => {
      ws.user = user; // 挂载到 ws 实例
      wss.emit('connection', ws, req);
    });
  } catch (err) {
    socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
    socket.destroy();
  }
});

安全注意事项

无论采用哪种方式,都必须遵守以下原则:

  • 所有 token 必须有明确过期时间(如 5 分钟),且服务端强制校验 exp 字段;
  • 避免在 URL 中传递长期有效的密钥或密码;
  • WebSocket 连接建立后,仍需对后续每条敏感消息做权限检查(如频道订阅、指令执行),不能仅依赖初始鉴权;
  • 使用 WSS(WebSocket Secure)而非 WS,确保传输层加密,防止 token 被中间人截获;
  • 限制单个 IP 或用户并发连接数,防范暴力重连或 token 扫描攻击。

不复杂但容易忽略:鉴权不是“连上即可信”,而应贯穿连接生命周期——从握手、首帧、到每条业务消息。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2083

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4463

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

5610

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5038

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

703

2024.05.22

C语言变量命名
C语言变量命名

c语言变量名规则是:1、变量名以英文字母开头;2、变量名中的字母是区分大小写的;3、变量名不能是关键字;4、变量名中不能包含空格、标点符号和类型说明符。php中文网还提供c语言变量的相关下载、相关课程等内容,供大家免费下载使用。

2629

2023.06.20

c语言入门自学零基础
c语言入门自学零基础

C语言是当代人学习及生活中的必备基础知识,应用十分广泛,本专题为大家c语言入门自学零基础的相关文章,以及相关课程,感兴趣的朋友千万不要错过了。

2108

2023.07.25

c语言运算符的优先级顺序
c语言运算符的优先级顺序

c语言运算符的优先级顺序是括号运算符 > 一元运算符 > 算术运算符 > 移位运算符 > 关系运算符 > 位运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。本专题为大家提供c语言运算符相关的各种文章、以及下载和课程。

1080

2023.08.02

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

20

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebSocket手册
WebSocket手册

共0课时 | 0人学习

Webman中文手册
Webman中文手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn