Nginx 使用 sub_filter 注入自定义 HTML 标签
501 字
3 分钟
Nginx 使用 sub_filter 注入自定义 HTML 标签
在反向代理第三方服务时，若需要在页面中注入自定义 JS/CSS，但无法修改源码，可以借助 Nginx 的 sub_filter 指令在响应内容中做字符串替换注入。
Note
sub_filter 由 ngx_http_sub_module 模块提供，编译 Nginx 时需确认已包含该模块：
nginx -V 2>&1 | grep sub_filter配置示例
Tip
尚未部署 Uptime Kuma？参见：Docker 部署 Uptime Kuma 监控
以下示例在代理 Uptime Kuma 状态页时，通过 sub_filter 在 </head> 前注入自定义资源：
map $http_upgrade $connection_upgrade { default upgrade; '' close;}
server { listen 80; server_name status.example.com;
location ^~ /status/external { proxy_pass http://10.0.0.11:3001/status/external;
proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade;
# 在 </head> 前注入自定义资源 sub_filter '</head>' '<script src="/main.js"></script>'; sub_filter '</head>' '<link rel="stylesheet" href="/main.css">'; sub_filter '</head>' '<link rel="stylesheet" href="/iconfont.css">';
sub_filter_once off; # off = 替换所有匹配 sub_filter_types *; # 对所有 MIME 类型生效 }}常用指令说明
| 指令 | 说明 |
|---|---|
sub_filter string replacement | 将响应中的 string 替换为 replacement |
sub_filter_once on|off | on（默认）只替换第一处；off 替换全部匹配 |
sub_filter_types * | 指定生效的 MIME 类型，默认仅 text/html |
sub_filter_last_modified on|off | 是否在替换后修改响应的 Last-Modified 头 |
注意事项
- 如果后端响应启用了 gzip 压缩，
sub_filter无法处理压缩内容，需在location内添加proxy_set_header Accept-Encoding "";禁用后端压缩。 - 注入的静态资源路径中不能使用动态变量，否则浏览器无法解析。建议将静态资源缓存到 Nginx 本地后统一提供。
实用功能
我们可以使用这个功能，区分dev、test环境，无需在代码层面做任何调整，非常丝滑
只需要在你的nginx配置里面添加下面一行代码即可实现；
location / { # 插入自定义提示头 sub_filter '</body><div style="position:fixed;top:0;left:50%;transform:translateX(-50%);background:red;color:white;padding:2px 10px;z-index:9999;font-size:12px;pointer-events:none;opacity:0.8;border-radius:0 0 5px 5px;">当前环境：DEV 开发版</div></body>'; sub_filter_once on;
root $root/platform; # 网站根目录 index index.html; # 默认首页文件 try_files $uri $uri/ /index.html; add_header Access-Control-Allow-Origin *; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' *; add_header 'Access-Control-Allow-Headers' *; add_header Cache-Control no-cache;}效果如下：还是比较美观的
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！
Nginx 使用 sub_filter 注入自定义 HTML 标签
https://blog.olinl.com/posts/nginx-subfilter-html/ 相关文章 智能推荐
1
CI/CD 手册：Jenkins 自动化发布全流程
服务与应用运维 详细记录如何通过 Jenkins 搭建自动化流水线，实现 Node.js 前端项目与 Spring Boot 后端项目的打包、上传及一键部署。
2
如何在 Ubuntu Server 上快速部署 Clash
服务与应用运维 在没有图形界面的 Ubuntu Server 下，通过 Mihomo (Clash Meta) 二进制快速搭建代理，临时解决 GitHub 下载慢、外网 API 不通的问题。
3
OpenClaw (小龙虾) 部署指南：打造企业级 AI 自动化助手
服务与应用运维 在 Windows WSL / Linux 环境下导入 Ubuntu 子系统、安装 OpenClaw (小龙虾)，配置 gateway、token 认证与 systemd 开机自启的完整流程。
4
Ubuntu安装IntelliJ IDEA
服务与应用运维 详解在 Ubuntu 系统下安装 IntelliJ IDEA 的标准流程，涵盖手动解压安装、创建桌面快捷方式及全局环境变量配置。
5
RabbitMQ 进阶实战：延迟消息插件安装与配置指南
服务与应用运维 在 Docker Compose 下安装 rabbitmq_delayed_message_exchange 插件，Spring AMQP 声明延迟 exchange、发送带 x-delay 的消息，并与传统 DLQ + TTL 方案做选型对比。
随机文章 随机推荐
评论区
欢迎来到我的博客！
81
7
158
83,114
0 天
0 天前