关于 websocket 跨域的一个奇怪问题…

简介: 近在建设websocket长连接网关,过程中遇到一件比较奇怪的事情,做下简单的记录。

最近在建设websocket长连接网关,过程中遇到一件比较奇怪的事情,做下简单的记录。


需求十分的简单,websocket网关在做权限校验的时候期望复用现有登录逻辑的jwt-token。如下图所示,sso与websocket网关属于不同的二级域名,登录的jwt-token cookie的domain设置为*.xx.com。


所以我们的期望是浏览器与websocket网关进行handshark请求时可以带上jwt-token cookie。


image.png


结果自然是不行的,服务端并没有收到来自*.xx.com的cookie。于是开始考虑可能和跨域行为有关系。


CORS

CORS 是一种用于解决跨域的w3c标准,全称为"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了 AJAX 只能同源使用的限制。CORS 基于 http 协议关于跨域方面的规定,使用时,客户端浏览器直接异步请求被调用端服务端,在响应头增加响应的字段,告诉浏览器后台允许跨域。


概括的说,CORS就是服务端对跨域权限的控制,由一组标准的header来控制客户端的跨域行为,不同浏览器对于CORS的实现均有不同。


常用的CORS header主要有:


Access-Control-Allow-Origin : 指示请求的资源能共享给哪些域,可以是具体的域名或者*表示所有域。

Access-Control-Allow-Credentials : 指示当请求的凭证标记为 true 时,是否响应该请求。

Access-Control-Allow-Headers : 用在对预请求的响应中,指示实际的请求中可以使用哪些 HTTP 头。

Access-Control-Allow-Methods: 指定对预请求的响应中,哪些 HTTP 方法允许访问请求的资源。

CORS处理请求的流程如下:


判断当前请求是否简单请求。

如果不是简单请求,则会使用OPTIONS方法先发起一个预检请求(PreFlight),预检请求通过返回的response里设置了对应的header并匹配上了才会进行下一步具体的请求。

预检请求后会发起实际请求,但会根据返回的response header来决定请求行为,例如根据服务端设置的Access-Control-Allow-Credentials值来决定请求是否携带当前域的cookie。

这里涉及到的简单请求和非简单请求的概念,那么简单请求和非简单请求有什么区别呢?若请求满足所有下述条件,则该请求可视为简单请求:


使用了下列 HTTP 方法:GET、HEAD、POST。

只用了以下header:Accept、Accept-Language、Content-Language、Content-Type(有额外限制)、DPR、Downlink、Save-Data、Viewport-Width、Width。

请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器;XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。

请求中没有使用 ReadableStream 对象。

经过一番简单的科普,回到我们的问题上来。浏览器对websocket的handshark请求会不会应用同源策略呢。我们先不回答,先来看看如果CORS应用在websocket上会是什么样的。


首先一个websocket的握手连接报文大概如下:

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: ws.xx.com
Origin: http://www.xx.com
Sec-WebSocket-Key: sB9cRrP/a9NdMgdcy2VJFX==
Sec-WebSocket-Version: 11

它和普通HTTP请求的区别是多了两行header

Upgrade: websocket
Connection: Upgrade

显然它们不属于CORS安全的header集合,自然浏览器会认为这不是一个"简单请求"。那么它会按照发起"预检请求",随后根据返回的response header来判断下一步行为。此处我们希望能带上当前域的cookie,那么按照CORS标准,我们需要在服务端做一些配置,让其支持CORS并带上Access-Control-Allow-Credentials为true的response header。


我们使用的是Netty来构建websocket网关,Netty支持CORS很简单:

CorsConfig corsConfig = CorsConfigBuilder.forAnyOrigin().allowNullOrigin().allowCredentials().build();
pipeline.addLast(new CorsHandler(corsConfig));

结果是什么呢?我们的websocket服务端正确拿到了*.xx.com的cookie,并完成了后续鉴权工作。


websocket需要CORS么?

所以真相是什么呢?websocket也需要CORS支持来避免跨域问题么?


google任何websocket与跨域相关的问题都会告诉你,websocket本身就是支持跨域的,websocket本身没有同源策略!也就是说,在第一幅图中,我们应该不作任何事就可以把xx.com的cookie带到ws.xx.com的websocket网关上去,这似乎和我们实际情况不符。


我们使用的是chrome,后来突发奇想试了下firefox与safari,结论是这两者不用配置任何CORS相关属性就可以把cookie带上。难道这是chrome的一个bug?翻了翻网络,找到了一个似乎可以应征的bug report:https://bugs.chromium.org/p/chromium/issues/detail?id=947413


相关文章
|
机器学习/深度学习 算法 决策智能
选址问题-精确重心法和遗传算法
选址问题-精确重心法和遗传算法
2390 0
|
消息中间件 负载均衡 算法
聊聊 分布式 WebSocket 集群解决方案(二)
聊聊 分布式 WebSocket 集群解决方案
2222 0
聊聊 分布式 WebSocket 集群解决方案(二)
音视频开发: ffmpeg采集桌面屏幕、摄像头保存为视频
音视频开发: ffmpeg采集桌面屏幕、摄像头保存为视频
1445 0
音视频开发: ffmpeg采集桌面屏幕、摄像头保存为视频
|
存储 缓存 安全
阿里云服务器通用型实例规格特点、适用场景、收费标准和活动价格参考
阿里云服务器通用型实例规格有哪些?最新价格是多少?阿里云服务器通用型实例规格有X86计算和ARM计算两种架构,每种架构都包含了不同类型的通用型实例,所以相同cpu和内存配置的通用型实例云服务器,收费价格标准也大不相同,下面小编为大家汇总一下哪些实例属于通用型实例规格,它们的最新收费价格标准又是怎样的,以供参考选择。
阿里云服务器通用型实例规格特点、适用场景、收费标准和活动价格参考
|
存储 前端开发 JavaScript
微任务和宏任务有什么区别
微任务和宏任务是JavaScript异步编程中的两个概念。宏任务包括整体代码块、setTimeout等,微任务有Promise、MutationObserver等。主要区别在于执行时机:每次事件循环中,宏任务只执行一个,而微任务会在当前宏任务结束后、下一个宏任务开始前全部执行完毕。
|
传感器 人工智能 算法
AI在农业中的应用:精准农业的发展
随着科技的发展,人工智能(AI)在农业领域的应用日益广泛,尤其在精准农业方面取得了显著成效。精准农业通过GPS、GIS、遥感技术和自动化技术,实现对农业生产过程的精确监测和控制,提高产量和品质,降低成本和环境影响。AI在作物生长监测、气候预测、智能农机、农产品品质检测和智能灌溉等方面发挥重要作用,推动农业向智能化、高效化和可持续化方向发展。尽管面临技术集成、数据共享等挑战,但未来前景广阔。
1601 5
|
开发工具 git
【git】解决Gitea推送创建失败
【git】解决Gitea推送创建失败
826 0
|
Web App开发 编解码 网络协议
WebRTC SDP 详解和剖析
WebRTC 技术体系中,SDP 是看起来简单却坑非常多的点,就像直播中的时间戳几乎占据了 80% 的问题,SDP 也是问题频发的点。这篇文章详细分享了 SDP 的关键点,容易出问题的点,是非常实用的满满的干货。
WebRTC SDP 详解和剖析
|
前端开发 IDE 编译器
《Solidity 简易速速上手小册》第7章:智能合约的部署与交互(2024 最新版)(上)
《Solidity 简易速速上手小册》第7章:智能合约的部署与交互(2024 最新版)
351 0
|
数据可视化 应用服务中间件 Linux
Nginx 可视化管理工具与 cpolar 配置:实现远程访问本地服务的优化
Nginx 可视化管理工具与 cpolar 配置:实现远程访问本地服务的优化
Nginx 可视化管理工具与 cpolar 配置:实现远程访问本地服务的优化