[{"data":1,"prerenderedAt":254},["ShallowReactive",2],{"content:\u002Fposts\u002Fnginx-subfilter-html":3,"surround:\u002Fposts\u002Fnginx-subfilter-html":243},{"id":4,"title":5,"body":6,"categories":220,"date":222,"description":223,"draft":224,"extension":225,"image":226,"meta":227,"navigation":229,"path":230,"permalink":226,"pinned":224,"published":226,"readingTime":231,"recommend":226,"references":226,"seo":236,"sitemap":237,"stem":238,"tags":239,"type":241,"updated":222,"__hash__":242},"content\u002Fposts\u002Fposts\u002Fnginx-subfilter-html.md","Nginx 使用 sub_filter 注入自定义 HTML 标签",{"type":7,"value":8,"toc":212},"minimark",[9,19,27,48,52,63,73,82,85,166,169,190,193,196,199,205,208],[10,11,15],"alert",{"type":12,"icon":13,"title":14},"info","tabler:robot","AI 迁移提示",[16,17,18],"p",{},"本文由 AI 协助从旧站迁移，尚未完成逐篇人工审校；内容如有疏漏，将在复核后修订。",[16,20,21,22,26],{},"在反向代理第三方服务时，若需要在页面中注入自定义 JS\u002FCSS，但无法修改源码，可以借助 Nginx 的 ",[23,24,25],"code",{"code":25},"sub_filter"," 指令在响应内容中做字符串替换注入。",[10,28,29,38],{"type":12},[16,30,31,33,34,37],{},[23,32,25],{"code":25}," 由 ",[23,35,36],{"code":36},"ngx_http_sub_module"," 模块提供，编译 Nginx 时需确认已包含该模块：",[39,40,46],"pre",{"className":41,"code":43,"language":44,"meta":45},[42],"language-bash","nginx -V 2>&1 | grep sub_filter\n","bash","",[23,47,43],{"__ignoreMap":45},[49,50,51],"h2",{"id":51},"配置示例",[10,53,55,58],{"type":54},"question",[16,56,57],{},"尚未部署 Uptime Kuma？参见：",[59,60],"link-card",{"link":61,"title":62},"\u002Fposts\u002Fdocker-uptime-kuma","Docker 部署 Uptime Kuma 监控",[16,64,65,66,68,69,72],{},"以下示例在代理 Uptime Kuma 状态页时，通过 ",[23,67,25],{"code":25}," 在 ",[23,70,71],{"code":71},"\u003C\u002Fhead>"," 前注入自定义资源：",[39,74,80],{"className":75,"code":77,"language":78,"meta":79},[76],"language-nginx","map $http_upgrade $connection_upgrade {\n    default upgrade;\n    ''      close;\n}\n\nserver {\n    listen 80;\n    server_name status.example.com;\n\n    location ^~ \u002Fstatus\u002Fexternal {\n        proxy_pass http:\u002F\u002F10.0.0.11:3001\u002Fstatus\u002Fexternal;\n\n        proxy_set_header Host $http_host;\n        proxy_set_header X-Real-IP $remote_addr;\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n        proxy_set_header X-Forwarded-Proto $scheme;\n\n        proxy_http_version 1.1;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection $connection_upgrade;\n\n        # 在 \u003C\u002Fhead> 前注入自定义资源\n        sub_filter '\u003C\u002Fhead>' '\u003Cscript src=\"\u002Fmain.js\">\u003C\u002Fscript>';\n        sub_filter '\u003C\u002Fhead>' '\u003Clink rel=\"stylesheet\" href=\"\u002Fmain.css\">';\n        sub_filter '\u003C\u002Fhead>' '\u003Clink rel=\"stylesheet\" href=\"\u002Ficonfont.css\">';\n\n        sub_filter_once off;   # off = 替换所有匹配\n        sub_filter_types *;    # 对所有 MIME 类型生效\n    }\n}\n","nginx","title=\"\u002Fopt\u002Fnginx\u002Fhttp\u002Fstatus.conf\"",[23,81,77],{"__ignoreMap":45},[49,83,84],{"id":84},"常用指令说明",[86,87,88,101],"table",{},[89,90,91],"thead",{},[92,93,94,98],"tr",{},[95,96,97],"th",{},"指令",[95,99,100],{},"说明",[102,103,104,122,139,152],"tbody",{},[92,105,106,112],{},[107,108,109],"td",{},[23,110,111],{"code":111},"sub_filter string replacement",[107,113,114,115,118,119],{},"将响应中的 ",[23,116,117],{"code":117},"string"," 替换为 ",[23,120,121],{"code":121},"replacement",[92,123,124,129],{},[107,125,126],{},[23,127,128],{"code":128},"sub_filter_once on|off",[107,130,131,134,135,138],{},[23,132,133],{"code":133},"on","（默认）只替换第一处；",[23,136,137],{"code":137},"off"," 替换全部匹配",[92,140,141,146],{},[107,142,143],{},[23,144,145],{"code":145},"sub_filter_types *",[107,147,148,149],{},"指定生效的 MIME 类型，默认仅 ",[23,150,151],{"code":151},"text\u002Fhtml",[92,153,154,159],{},[107,155,156],{},[23,157,158],{"code":158},"sub_filter_last_modified on|off",[107,160,161,162,165],{},"是否在替换后修改响应的 ",[23,163,164],{"code":164},"Last-Modified"," 头",[49,167,168],{"id":168},"注意事项",[170,171,172,187],"ul",{},[173,174,175,176,178,179,182,183,186],"li",{},"如果后端响应启用了 gzip 压缩，",[23,177,25],{"code":25}," 无法处理压缩内容，需在 ",[23,180,181],{"code":181},"location"," 内添加 ",[23,184,185],{"code":185},"proxy_set_header Accept-Encoding \"\";"," 禁用后端压缩。",[173,188,189],{},"注入的静态资源路径中不能使用动态变量，否则浏览器无法解析。建议将静态资源缓存到 Nginx 本地后统一提供。",[49,191,192],{"id":192},"实用功能",[16,194,195],{},"我们可以使用这个功能，区分dev、test环境，无需在代码层面做任何调整，非常丝滑",[16,197,198],{},"只需要在你的nginx配置里面添加下面一行代码即可实现；",[39,200,203],{"className":201,"code":202,"language":78,"meta":45},[76],"location \u002F {\n\t# 插入自定义提示头\n\tsub_filter '\u003C\u002Fbody>\u003Cdiv 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 开发版\u003C\u002Fdiv>\u003C\u002Fbody>';\n\tsub_filter_once on;\n\t\n\troot   $root\u002Fplatform;  # 网站根目录\n\tindex  index.html;   # 默认首页文件\n\ttry_files  $uri $uri\u002F \u002Findex.html;\n\tadd_header Access-Control-Allow-Origin *;\n\tadd_header 'Access-Control-Allow-Credentials' 'true';\n\tadd_header 'Access-Control-Allow-Methods' *;\n\tadd_header 'Access-Control-Allow-Headers' *;\n\tadd_header Cache-Control no-cache;\n}\n\n",[23,204,202],{"__ignoreMap":45},[16,206,207],{},"效果如下：还是比较美观的",[209,210],"pic",{"src":211},"https:\u002F\u002Fimg.olinl.com\u002Fblog_img\u002F202x\u002Fnginx-subfilter-html-99f3d8.webp",{"title":45,"searchDepth":213,"depth":213,"links":214},4,[215,217,218,219],{"id":51,"depth":216,"text":51},2,{"id":84,"depth":216,"text":84},{"id":168,"depth":216,"text":168},{"id":192,"depth":216,"text":192},[221],"技术","2026-04-11 00:00:00","通过 Nginx 的 ngx_http_sub_module 模块，在反向代理响应中注入自定义 JS、CSS 或 HTML 标签，适用于无法修改源码的第三方页面定制场景。",false,"md",null,{"slots":228},{},true,"\u002Fposts\u002Fnginx-subfilter-html",{"text":232,"minutes":233,"time":234,"words":235},"3 min read",2.53,151800,506,{"title":5,"description":223},{"loc":230},"posts\u002Fposts\u002Fnginx-subfilter-html",[240],"Nginx","tech","lPcxf3SxDkv8I58wp88tyceeY1GYCZSCjCKG9_IzByE",[244,249],{"title":245,"path":246,"stem":247,"date":248,"type":241,"children":-1},"为了护住我那几块硬盘：我的 UPS 监控“三部曲","\u002Fposts\u002Fups-monitoring-trilogy-nodejs","posts\u002Fposts\u002Fups-monitoring-trilogy-nodejs","2026-04-01",{"title":250,"path":251,"stem":252,"date":253,"type":241,"children":-1},"「教程」部署 3X-UI 面板","\u002Fposts\u002F3x-ui-install","posts\u002Fposts\u002F3x-ui-install","2026-05-30 18:00:00",1788712222899]