当前位置：首页 > news >正文

【前端跨域】WebSocket如何实现跨域通信？原理、实践与安全指南

news 来源：原创 2025/8/25 0:00:58

在实时通信场景（如在线聊天、实时数据推送）中，WebSocket因其高效的双向通信能力成为首选技术

然而，当客户端与服务器部署在不同源时，跨域问题同样可能阻碍WebSocket的连接

一、WebSocket与跨域的关系

WebSocket的跨域限制

虽然WebSocket协议本身不受同源策略的直接限制，但浏览器在建立WebSocket连接时仍会校验跨域安全性：

客户端发起WebSocket连接时，浏览器会在握手请求的HTTP头中自动添加Origin字段（如Origin: https://client-domain.com）

服务器必须显式验证Origin字段，决定是否允许该跨域连接。

若服务器未做验证，恶意网站可能通过伪造Origin劫持WebSocket通信

与CORS的区别

CORS：针对HTTP请求，依赖服务器设置响应头（如Access-Control-Allow-Origin）

WebSocket：在HTTP握手阶段完成跨域验证，无需额外响应头，但需服务器主动检查Origin字段

二、WebSocket跨域的实现方式

服务器端验证Origin（核心步骤）

以Node.js的ws库为例，手动验证Origin字段：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });server.on('connection', (socket, request) => {const origin = request.headers.origin;const allowedOrigins = ['https://client-domain.com', 'https://trusted-site.com'];if (!allowedOrigins.includes(origin)) {socket.close(1008, 'Unauthorized origin'); // 拒绝非法来源return;}// 合法连接的处理逻辑socket.on('message', (message) => {console.log('Received:', message);});
});

Nginx反向代理（生产环境推荐）

通过Nginx代理隐藏跨域细节，使浏览器认为WebSocket服务与前端同源：

server {listen 80;server_name client-domain.com;location /ws {proxy_pass http://websocket-server:8080;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Origin ""; # 可选：覆盖Origin头以简化服务器验证}
}

前端连接地址改为同源的ws://client-domain.com/ws，Nginx将请求转发至真实的WebSocket服务器。

前端代码示例

const socket = new WebSocket('wss://client-domain.com/ws');socket.onopen = () => {console.log('WebSocket连接已建立');socket.send('Hello Server!');
};socket.onmessage = (event) => {console.log('收到消息:', event.data);
};socket.onerror = (error) => {console.error('连接错误:', error);
};

三、安全性考量

严格校验Origin字段
避免使用通配符（如允许所有Origin），防止跨站WebSocket劫持（Cross-Site WebSocket Hijacking）。

使用WSS协议（WebSocket over TLS）
加密通信防止中间人攻击，同时现代浏览器要求安全上下文（HTTPS页面）中才能使用WebSocket。

身份验证与鉴权

在握手阶段传递Token（如URL参数wss://server.com/ws?token=xxx）。

使用Cookie时需设置SameSite和Secure属性。

四、优缺点

优点

原生支持双向实时通信，延迟低
绕过传统HTTP跨域限制，适用复杂场景
现代浏览器广泛兼容（IE10+）

缺点

需服务器主动验证Origin
长连接可能增加服务器资源消耗
需额外处理断线重连、心跳检测等逻辑

总结

WebSocket通过基于Origin字段的握手验证机制，是跨域实时通信
需要在服务器端严格校验来源，并结合反向代理、TLS加密等技术保障安全性

对于需要高频双向数据交换的应用（如在线协作、实时监控），WebSocket的跨域能力将成为关键优势

【前端跨域】WebSocket如何实现跨域通信？原理、实践与安全指南

在实时通信场景（如在线聊天、实时数据推送）中，WebSocket因其高效的双向通信能力成为首选技术然而，当客户端与服务器部署在不同源时，跨域问题同样可能阻碍WebSocket的连接一、WebSocket与跨域的关系 WebSocket的跨…...

编程日记 2025/8/25 0:00:58

Go红队开发—格式导出

文章目录输出功能CSV输出CSV 转结构体结构体转 CSV端口扫描结果使用CSV格式导出 HTML输出Sqlite输出nmap扫描 JSONmap转json结构体转jsonjson写入文件json编解码json转结构体json转mapjson转string练习：nmap扫描结果导出json格式输出功能在我们使用安全工具的…...

编程日记 2025/8/25 0:00:56

Sharp 存在任意文件读取漏洞( DVB-2025-8923)

免责声明本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权，请及时与我们联系，我们将尽快处理并删除相关内容。 0x01…...

编程日记 2025/8/20 1:56:23

C++数组，链表，二叉树的内存排列是什么样的，结构体占多大内存如何计算，类占多大内存如何计算，空类的空间是多少，为什么？

C数组是连续存储的，C数组元素依次存放在相邻的内存地址之中，并且内存大小相同。 C链表是离散存储的，C链表是由节点构成的，每个节点之中存在节点的值以及指向下一个节点的指针，每个节点是动态分配的。 C二叉树也是离散…...

编程日记 2025/8/23 14:05:53

【vLLM 教程】使用 TPU 安装

vLLM 是一款专为大语言模型推理加速而设计的框架，实现了 KV 缓存内存几乎零浪费，解决了内存管理瓶颈问题。更多 vLLM 中文文档及教程可访问 →https://vllm.hyper.ai/ vLLM 使用 PyTorch XLA 支持 Google Cloud TPU。依赖环境 Google Cloud TPU …...

编程日记 2025/8/16 0:42:32

【RAG】基于向量检索的 RAG （BGE示例）

RAG机器人结构体文本向量化: 使用 BGE 模型将文档和查询编码为向量。 （BGE 是专为检索任务优化的开源 Embedding 模型，除了本文API调用，也可以通过Hugging Face 本地部署BGE 开源模型） 向量检索: 从数据库中找到与查询相关的文…...

编程日记 2025/8/21 16:38:19

【RAG】RAG 系统的基本搭建流程（ES关键词检索示例）

RAG 系统的基本搭建流程搭建过程： 文档加载，并按一定条件切割成片段将切割的文本片段灌入检索引擎封装检索接口构建调用流程：Query -> 检索 -> Prompt -> LLM -> 回复 1. 文档的加载与切割 # !pip install --upgrade openai…...

编程日记 2025/8/19 22:56:45

PSIM积累经验

1、三极管的部署报错。出错信息： 元件： R 名称： R2 Error: The RLC branch R2 is connected to the gate node of the switch Q1. The gate node should be connected to an On-Off Controller output. Refer to the switch Help p…...

编程日记 2025/8/19 21:44:29

C++之vector类（超详解）

这节我们来学习一下，C中一个重要的工具——STL，这是C中自带的一个标准库，我们可以直接调用这个库中的函数或者容器，可以使效率大大提升。这节我们介绍STL中的vector。文章目录前言一、标准库类型vector 二、vector的使用 2.…...

编程日记 2025/8/24 21:47:50

Go学习笔记

初始化工程 go mod init GoDemo 结构体，接口 type i struct{} type i interface{} 条件，选择循环键值对 make(map[string]int) 切片，集合 make([]int,10) 函数通道 Channel make(chan int) ch <- v…...

编程日记 2025/8/24 4:17:04

前端杂的学习笔记

什么是nginx Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器 Nginx是一款轻量级的Web 服务器/反向代理服务器，处理高并发能力是十分强大的，并且支持热部署，启动简单，可以做到7*24不间断运行正代和反代学习nginx&a…...

编程日记 2025/8/24 22:40:51

痉挛性斜颈护理：全方位呵护，重燃生活希望

痉挛性斜颈是一种以颈部肌肉不自主收缩导致头部向一侧扭转或倾斜为特征的疾病。对于痉挛性斜颈患者而言，科学有效的护理能够显著提升其生活质量，辅助病情的改善。生活护理：在生活环境布置上，要充分考虑患者行动的便利性。确保室内…...

编程日记 2025/8/22 11:03:00

MySQL的安装以及数据库的基本配置

MySQL的安装及配置 MySQL的下载选择想要安装的版本，点击Download下载 Mysql官网下载地址： https://downloads.mysql.com/archives/installer/ MySQL的安装选择是自定义安装，所以直接选择“Custom”，点击“Next” …...

编程日记 2025/8/19 17:52:02

WangEditor快速实现版效果案例代码后端 package com.diy.springboot.controller;import cn.hutool.core.util.IdUtil; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation; import io.swagger.annotations.ApiImplicitParam; import org.sp…...

编程日记 2025/8/23 18:05:08

LeetCode Hot100刷题——反转链表（迭代+递归）

206.反转链表给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。示例 1： 输入：head [1,2,3,4,5] 输出：[5,4,3,2,1]示例 2： 输入：head [1,2] 输出：[2,1]示例 3&#…...

编程日记 2025/8/23 4:41:46

10.2 继承与多态

文章目录继承多态继承继承的作用是代码复用。派生类自动获得基类的除私有成员外的一切。基类描述一般特性，派生类提供更丰富的属性和行为。在构造派生类时，其基类构造函数先被调用，然后是派生类构造函数。在析构时顺序刚好相反。 // 基类…...

编程日记 2025/8/22 4:07:48

java项目之基于ssm的智能训练管理平台（源码+文档）

项目简介智能训练管理平台实现了以下功能： 系统可以提供信息显示和相应服务，其管理员增删改查课程信息和课程信息资料，审核课程信息预订订单，查看订单评价和评分，通过留言功能回复用户提问。 💕&#x1…...

编程日记 2025/8/21 19:10:11

29-验证回文串

如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后，短语正着读和反着读都一样。则可以认为该短语是一个回文串。字母和数字都属于字母数字字符。给你一个字符串 s，如果它是回文串 ，返回 true ；否则&#xf…...

编程日记 2025/8/23 2:14:41

（57）[HGAME 2023 week1]easyasm

nss：3477 [HGAME 2023 week1]easyasm 关于这个题吧，我还是和上一个题一样，我观察到了异或0x33 所以我就把result的结果跟0x33异或，然后我就就这样，做出来了...

编程日记 2025/8/16 10:07:44

FY-3D MWRI亮温绘制

1、FY-3D MWRI介绍风云三号气象卫星（FY-3）是我国自行研制的第二代极轨气象卫星，其有效载荷覆盖了紫外、可见光、红外、微波等频段，其目标是实现全球全天候、多光谱、三维定量探测，为中期数值天气预报提供卫星观测数…...

编程日记 2025/8/22 18:22:19

Java集合面试题

引言 Java集合框架是Java编程中不可或缺的一部分，它提供了一系列用于存储和操作对象的接口和类。在Java面试中，集合框架的相关知识往往是必考的内容。本文将汇总一系列关于Java集合的面试题，帮助求职者更好地准备面试。一、Java集合框架概…...

编程日记 2025/8/24 5:50:49

知识蒸馏综述Knowledge Distillation: A Survey解读

论文链接：Knowledge Distillation: A Survey 摘要：近年来，深度神经网络在工业界和学术界都取得了成功，尤其是在计算机视觉任务方面。深度学习的巨大成功主要归功于它能够扩展以对大规模数据进行编码，并且能够处理数十…...

编程日记 2025/8/16 10:04:52

ES映射知识

映射映射类似于关系型数据库的Schema（模式）。映射来定义字段列和存储的类型等基础信息。 {"mappings": {"properties": {"username": {"type": "keyword","ignore_above": 256 // 忽略…...

编程日记 2025/8/20 5:24:11

Spring Boot拦截器（Interceptor）与过滤器（Filter）深度解析：区别、实现与实战指南

Spring Boot拦截器（Interceptor）与过滤器（Filter）深度解析：区别、实现与实战指南一、核心概念对比 1. 本质区别维度过滤器（Filter）拦截器（Interceptor）规范层级Serv…...

编程日记 2025/8/21 2:19:15

Debian二次开发一体化工作站：提升科研效率的智能工具

在科研领域，数据处理是实验成功的关键环节之一。随着实验数据的复杂性和规模不断增加，传统的数据处理方法已经难以满足科研人员的需求。这时，一体化工作站应运而生，成为科研实验数据处理的 “智能大脑”。一体化工作站&#xff…...

编程日记 2025/8/22 4:27:37

swift-5-汇编分析闭包本质

一、枚举、结构体、类都定义方法方法占用对象的内存么？ 不占用方法的本质就是函数方法、函数都存放在代码段，因为方法都是公共的，不管对象一还是对对象二调用都是一样的，所以放在代码段，但是每个对象的成员不一样所…...

编程日记 2025/8/20 20:26:54

Linux安装升级docker

Linux 安装升级docker Linux 安装升级docker背景升级停止docker服务备份原docker数据目录移除旧版本docker安装docker ce恢复数据目录启动docker参考安装找到docker官网找到docker文档删除旧版本docker配置docker yum源参考官网继续安装docker设置开机自启配置加速测试 Linux …...

编程日记 2025/8/22 22:00:33

小程序事件系统 —— 33 事件传参 - data-*自定义数据

事件传参：在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参； 在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成…...

编程日记 2025/8/16 11:12:01

Dify 本地部署教程

目录一、下载安装包二、修改配置三、启动容器四、访问 Dify 五、总结本篇文章主要记录 Dify 本地部署过程，有问题欢迎交流~ 一、下载安装包从 Github 仓库下载最新稳定版软件包，点击下载~，当然也可以克隆仓库或者从仓库里直接下…...

编程日记 2025/8/22 16:48:26

nlp培训重点-5

1. LoRA微调 loader： # -*- coding: utf-8 -*-import json import re import os import torch import numpy as np from torch.utils.data import Dataset, DataLoader from transformers import BertTokenizer """ 数据加载 """cl…...

编程日记 2025/8/21 5:43:40

XWiki使用war部署在tomcat9

xwiki部署官方文档，比较详细。 https://www.xwiki.org/xwiki/bin/view/Documentation/AdminGuide/Installation/InstallationWAR/ xwiki是基于java的开源知识库，可以替代Confluence。有多种部署方式，本文使用war方式部署在tomca下&#x…...

编程日记 2025/8/22 11:13:27

CTA策略【量化理论】

CTA策略演变史全称：Commodity Trading Advisor （商品交易顾问） CTA最开始是指通过为客户提供期权、期货方面的交易建议，或者直接通过受管理的期货账户参与实际交易，来获得收益的机构或个人。随着市场的发展&#…...

编程日记 2025/8/21 5:43:39

旋转编码器原理与应用详解：从结构到实战 | 零基础入门STM32第四十七步

主题内容教学目的/扩展视频旋转编码器电路原理，跳线设置，结构分析。驱动程序与调用。熟悉电路和驱动程序。师从洋桃电子，杜洋老师 📑文章目录一、旋转编码器是什么？二、内部结构揭秘2.1 机械组件解剖2.2 核心部件说明…...

编程日记 2025/8/22 23:45:31

计算机视觉cv2入门之图像的读取,显示,与保存

在计算机视觉领域，Python的cv2库是一个不可或缺的工具，它提供了丰富的图像处理功能。作为OpenCV的Python接口，cv2使得图像处理的实现变得简单而高效。示例图片目录 opencv获取方式图像基本知识颜色空间 RGB HSV 图像格式 BMP格式 …...

编程日记 2025/8/18 19:30:23

基于Canvas和和原生JS实现俄罗斯方块小游戏

这里是一个完整的H5俄罗斯方块游戏，使用了 HTML CSS JavaScript (原生) 实现，支持基本的俄罗斯方块玩法，如： ✅ 方块自动下落 ✅ 方向键控制移动、旋转、加速下落 ✅ 方块堆叠、消行 ✅ 计分系统在 canvas 上绘制游戏&#x…...

编程日记 2025/8/22 4:58:36

阿里云 QwQ-32B 模型调研文档

阿里云 QwQ-32B 模型调研文档 ——技术解析、部署实践与微调指南一、模型概述 QwQ-32B 是阿里云开源的轻量化大语言模型，以 320 亿参数实现与 DeepSeek-R1（6710 亿参数）相当的推理性能。其核心优势包括：参数效率：1/20 参数量达成竞品性能，显存需求降低 70%部署灵活性…...

编程日记 2025/8/24 4:49:12

【玩转23种Java设计模式】结构型模式篇：组合模式

软件设计模式（Design pattern），又称设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。汇总目录链接&…...

编程日记 2025/8/22 19:06:36

Eolink：专为开发者设计的API协作平台

Eolink Apikit 是一款集 API 设计、管理、自动化测试、Mock 和异常监控于一体的全生命周期智能协作平台，旨在提升 API 研发和管理的效率。以下是对其功能和特点的详细介绍： 核心功能： API 设计与文档管理：Apikit 提供了强大的 API…...

编程日记 2025/8/24 11:58:51

【Python】为什么要写init.py

文章目录 PackageA(__init__特性)应该往__init__.py里放什么东西？1、包的初始化2、管理包的公共接口3、包的信息正常我们直接导入就可以执行，但是在package的时候，有一种__init__.py的特殊存在引入moduleA.py，执行main.py&…...

编程日记 2025/8/18 5:45:57

golang 从零单排 (一) 安装环境

1.下载安装打开网址The Go Programming Language 直接点击下载go1.24.1.windows-amd64.msi 下载完成直接双击下一步下一步安装完成环境变量自动设置不必配置 2.验证 win r 输入cmd 打开命令行输入go version...

编程日记 2025/8/16 10:06:47

30-判断子序列

给定字符串 s 和 t ，判断 s 是否为 t 的子序列。字符串的一个子序列是原始字符串删除一些（也可以不删除）字符而不改变剩余字符相对位置形成的新字符串。（例如，"ace"是"abcde"的一个子序列&#…...

编程日记 2025/8/22 8:06:04

AI 驱动的软件测试革命：从自动化到智能化的进阶之路

🚀引言：软件测试的智能化转型浪潮在数字化转型加速的今天，软件产品的迭代速度与复杂度呈指数级增长。传统软件测试依赖人工编写用例、执行测试的模式，已难以应对快速交付与高质量要求的双重挑战。人工智能技术的突破为测试领域注…...

编程日记 2025/8/23 11:03:47

深度相机进行目标物体的空间姿态（位姿）估计

利用深度相机（如Kinect、Intel Realsense、Zed相机等）进行目标物体的空间姿态（位姿）估计，通常结合了3D点云处理、目标识别和位姿优化算法。以下是完整的实现流程、算法选择及注意事项： 一、实现流程 1. 目…...

编程日记 2025/8/16 11:52:46

3月8日实验

拓扑： 需求： 1.学校内部的HTTP客户端可以正常通过域名www.baidu.com访问到白度网络中的HTTP服务器 2.学校网络内部网段基于192.168.1.0/24划分，PC1可以正常访问3.3.3.0/24网段，但是PC2不允许 3.学校内部路由使用静态路由&#…...

编程日记 2025/8/18 12:25:25

GO语言学习笔记

一、viper笔记【七米】 https://liwenzhou.com/posts/Go/viper/ 二、优雅关机和平滑重启 https://liwenzhou.com/posts/Go/graceful-shutdown/ 三、gin使用zap https://liwenzhou.com/posts/Go/zap-in-gin/ 四、flag 用于命令行传参 https://liwenzhou.com/posts/Go/flag/ 五、…...

编程日记 2025/8/21 11:26:06

Autosar技术栈总目录

总目录 Autosar架构理解Autosar Mcal配置开发（TC3xx系列基于EB）Autosar Mcal配置开发（S32K3xx系列基于EB）Autosar BSW服务开发（基于Davinci CFG &Dev）Makefile编译自动化脚本持续更新中… Autosar架…...

编程日记 2025/8/23 4:38:36

开发指南107-谷歌内核浏览器滚动条设置

平台上统一制定了滚动条样式(仅限于webkit内核)：/* ------美化谷歌浏览器滚动条开始-----------*/ ::-webkit-scrollbar{width:12px;height:12px;background-color: #E1E1E1;} ::-webkit-scrollbar-button:single-button { background-color:#E1E1E1; display: …...

编程日记 2025/8/16 12:49:16