nginx注入代码

Nginx UI 注入自定义 JavaScript 总结

一、实现原理

Outline 不提供官方的自定义 CSS/JS 注入入口，可以通过 Nginx 的 sub_filter 修改返回的 HTML，实现自定义脚本注入。

执行流程：

浏览器
  ↓
Nginx UI（反向代理）
  ↓
sub_filter 修改 HTML
  ↓
插入自定义 JS 文件引用
  ↓
浏览器加载并执行 JS

二、配置 Nginx UI

进入「站点管理 → Outline 站点 → Server → Locations → Location /」。

在原有代理配置中增加：

# 禁用上游压缩，确保 HTML 可以被替换
proxy_set_header Accept-Encoding "";

# 只替换一次
sub_filter_once on;

# 在 HTML 末尾注入 JS 文件
sub_filter '</body>' '<script src="/outline-custom.js"></script></body>';

保留原来的 proxy_pass 等反向代理配置。

三、创建 JS 文件

由于 Nginx UI 已经挂载：

volumes:
  - ./html:/usr/share/nginx/html

可以在宿主机创建：

nano /opt/nginx/html/outline-custom.js

示例内容：

console.log("Outline 自定义脚本已执行");

四、配置 JS 静态资源访问

在 Outline 站点对应的 HTTPS Server 下，新增一个与 Location / 平级的 Location。

路径：

/outline-custom.js

内容：

alias /usr/share/nginx/html/outline-custom.js;
default_type application/javascript;
add_header Cache-Control "no-store";

这样访问 /outline-custom.js 时，由 Nginx 直接返回 JS 文件，不再转发给 Outline。

五、重新加载和验证

修改 Nginx 配置后执行：

docker exec nginx-ui nginx -t
docker exec nginx-ui nginx -s reload

验证文件类型：

curl -I https://wiki.dingshaohua.com/outline-custom.js

正常应返回：

HTTP/1.1 200 OK
Content-Type: application/javascript

浏览器按 F12，在 Console 中看到：

Outline 自定义脚本已执行

说明注入成功。

六、注意事项

1. CSP 安全限制：Outline 会阻止未经授权的内联脚本，因此使用同源外部 JS 文件更合适。
2. MIME 类型：JS 文件必须正确返回 application/javascript，否则浏览器可能拒绝执行。
3. 脚本性能：避免使用无限触发的 MutationObserver 自动点击按钮，容易导致浏览器卡死。
4. 配置生效：修改 Nginx 配置需要 Reload；只修改外部 JS 文件通常不需要。
5. 升级兼容性：通过 DOM 选择器修改 Outline 界面属于非官方方案，版本升级后可能失效。

七、最终目录结构

/opt/nginx/
├── compose.yaml
├── nginx/
├── nginx-ui/
└── html/
    └── outline-custom.js

总结

通过 Nginx sub_filter + 同源 JS 静态文件，可以在不修改 Outline Docker 镜像和源码的情况下，为页面注入自定义 JavaScript。

这种方式适合小规模的界面定制，但需要注意 CSP、DOM 兼容性和脚本执行性能。

补充排错决策流程区分宿主机与容器路径修正配置生效条件