Server-Sent Events 模拟器 - 单向实时数据流演示
在前端创建模拟 SSE 连接,接收服务器推送的消息流并实时渲染到页面。
UD5工具箱
| 步骤 | 节点 | 操作 | X-Forwarded-For 值 |
|---|
X-Forwarded-For (XFF) 是一个 HTTP 扩展头部字段,用于标识通过 HTTP 代理或负载均衡器连接到 Web 服务器的客户端的原始 IP 地址。它最初由 Squid 缓存代理引入,现已成为事实上的行业标准。
由于代理服务器会修改请求的来源 IP(服务器看到的是代理的 IP 而非客户端 IP),XFF 头部解决了"如何知道真实客户端是谁"的问题。格式为:X-Forwarded-For: client, proxy1, proxy2, ...,最左侧为原始客户端 IP,右侧依次为各级代理的上游 IP。
注意:RFC 7239 定义了标准的 Forwarded 头部作为 XFF 的替代方案,但 XFF 仍被广泛使用。
代理链中每一级代理都会将自己看到的直接上游 IP追加到 XFF 头部的末尾:
1.1.1.1,设置 XFF: 1.1.1.12.2.2.2(代理 A 的 IP),追加后 XFF: 1.1.1.1, 2.2.2.2最终目标服务器结合 XFF 和 TCP 连接来源 IP,可还原完整链路。
可以。XFF 头部是客户端或代理自行添加的 HTTP 头部,恶意客户端可以在初始请求中直接包含伪造的 XFF 值。例如,攻击者发送:X-Forwarded-For: 127.0.0.1 试图伪装为本地请求。
防护策略:
set_real_ip_from 指令指定受信任的代理 IP 范围。实践中,X-Real-IP 更简洁但信息量少;XFF 更完整但需要解析。许多场景下两者配合使用。
主流 CDN(如 Cloudflare、AWS CloudFront、Akamai)通常会在 XFF 中追加客户端真实 IP,同时可能使用自定义头部:
CF-Connecting-IP 头部传递真实客户端 IP。CloudFront-Viewer-Address。如果你的服务器在 CDN 后面,需要配置信任 CDN 的 IP 范围,以正确解析 XFF 中的客户端 IP。
Nginx 配置示例:
# 定义受信代理 IP 范围
set_real_ip_from 10.0.0.0/8;
set_real_ip_from 172.16.0.0/12;
real_ip_header X-Forwarded-For;
real_ip_recursive on;
# 在日志中记录真实 IP
log_format main '$remote_addr - $remote_user [$time_local] '
'"$request" $status $body_bytes_sent '
'"$http_referer" "$http_user_agent" '
'"$http_x_forwarded_for"';
# 将真实 IP 传递给后端
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
$proxy_add_x_forwarded_for 会自动将客户端 IP 追加到现有 XFF 值后面。
RFC 7239 定义了标准化的 Forwarded 头部,旨在统一 X-Forwarded-For、X-Forwarded-Proto、X-Forwarded-Host 等多个非标准头部。格式示例:
Forwarded: for=192.0.2.1;proto=https;host=example.com;by=203.0.113.1
虽然 Forwarded 更规范,但 XFF 等传统头部在生态系统中仍然占据主导地位,许多框架和工具同时支持两者。
如果没有正确配置 XFF 解析,服务器 remote_addr 看到的只是最后一跳代理的 IP(即直接连接服务器的代理)。常见原因:
real_ip_header 或等效设置使用本工具可以直观理解代理链的 IP 追加机制,帮助排查配置问题。
在前端创建模拟 SSE 连接,接收服务器推送的消息流并实时渲染到页面。
向指定 URL 发送不同 HTTP 方法的请求,显示响应状态码、头部和主体,学习 RESTful API。
可视化线段树的构建、单点更新和区间求和查询过程,理解树状结构。
在散点图上拖拽数据点,实时更新最小二乘回归线,显示斜率和截距。
根据输入的外部域名,生成 dns-prefetch、preconnect 和 preload 标签。
输入代码并自动去除无意义空格,统计有效字符数,用于Code Golf比赛。
展示 Hopcroft-Karp 算法寻找最大匹配的过程,包括 BFS 和 DFS 阶段。
使用Service Worker拦截fetch请求,并返回用户自定义的JSON模拟数据,用于前端独立开发。
解析标准Cron表达式,显示未来多次执行的具体日期时间,辅助验证定时任务配置。
对比 ES Module 和经典脚本的变量作用域、严格模式以及执行时机。
在色带任意位置点击添加色标并拖拽,感受渐变设计。
从上传的图片中智能提取主要渐变色方向与色标,生成对应CSS渐变代码,用于设计背景。
发起请求获取当前URL或任意允许CORS的URL的Response Headers,展示详情。
输入常见的报错片段,基于静态库返回常见的解释和可能的修复方案。
创建一个测试自定义元素,记录并展示 connectedCallback, attributeChangedCallback 等执行顺序。
输入一个 Snowflake 格式的数字 ID,解析出生成时间戳、数据中心、机器编号和序列号。
使用CSV格式定义多个色标的位置和颜色,批量生成复杂的CSS渐变代码。
将同类待办归入电话、外出、电脑等情境,一目了然优化执行顺序。
在单页内模拟MPA过渡效果,自定义进场/出场动画,体验View Transitions API丝滑切换。
定义字段名称和类型(姓名、邮箱、数字范围等),批量生成符合规则的 JSON 模拟数据。
构建或随机生成二叉树,逐步动画展示前序、中序、后序和层序遍历的路径。
粘贴Link rel=preload头字段,解析展示服务器计划推送的资源列表。
常用HTML实体编码(如© ©)的图形化速查表,点击即可复制实体名称或数字代码。
创建当用户离线时展示的简单HTML页面,结合Service Worker使用。
粘贴terraform plan输出,解析并显示资源的增加、更改与销毁列表,辅助审查。
自定义发送者和消息内容,生成逼真的聊天对话界面截图,用于演示或原型。
注册一个Service Worker拦截请求并人为添加延迟,模拟慢速2G/3G网络效果。
生成带有动画的点赞/点踩或表情反馈组件,包含选中状态和计数。
在周视图上拖拽时间段,直观记录每天各项活动的耗时,汇总统计。
选择各种数据类型演示structuredClone的深拷贝能力,对比JSON.parse的限制。