328 字
1 分钟
Nginx 使用 sub_filter 注入自定义 HTML 标签
在反向代理第三方服务时，若需要在页面中注入自定义 JS/CSS，但无法修改源码，可以借助 Nginx 的 sub_filter 指令在响应内容中做字符串替换注入。
NOTE
sub_filter由ngx_http_sub_module模块提供，编译 Nginx 时需确认已包含该模块：
配置示例
以下示例在代理 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
Nginx 常用配置速查
服务与应用运维 整理 Nginx 最常用的配置场景，包括静态站点、Vue 单页应用、SSL/HTTPS、反向代理、WebSocket 代理以及 MinIO 签名代理等配置示例。
2
CentOS 安装 Nginx 及生产环境配置指南
服务与应用运维 介绍在 CentOS 上通过 YUM 安装 Nginx，并整理多站点、SSL、反向代理、Stream TCP 代理等常用生产配置模板。
3
跳过登录弹框：实现 Basic Auth 自动授权
技术插曲与避坑 详解如何通过 URL 传参、Nginx 反向代理注入 Header 以及浏览器插件等方式，实现对 Basic Auth 认证站点的免密自动登录。
4
CI/CD 手册：Jenkins 自动化发布全流程
服务与应用运维 详细记录如何通过 Jenkins 搭建自动化流水线，实现 Node.js 前端项目与 Spring Boot 后端项目的打包、上传及一键部署。
5
如何在 Ubuntu Server 上快速部署 Clash
服务与应用运维 在没有图形界面的 Ubuntu Server 下，通过 Mihomo (Clash Meta) 二进制快速搭建代理，临时解决 GitHub 下载慢、外网 API 不通的问题。
