如何通过sub_filter命令在代理中自动转换HTTPS页面中的HTTP图片链接？

本文共计774个文字，预计阅读时间需要4分钟。

可以通过Nginx的sub_filter指令在反向代理响应体中批量将页面内硬编码的http://图片链接替换为https://，从而避免Mixed Content警告。但请注意，此方法仅适用于文本型响应（如text/），且替换逻辑简单，不解析DOM，存在误替换风险。

启用 sub_filter 并配置基础替换规则

Nginx 默认不启用 sub_filter，需显式开启并指定 MIME 类型过滤范围。关键配置如下：

• 必须设置 sub_filter_once off，否则只替换第一个匹配项；
• 用 sub_filter_types text/html application/xhtml+xml 扩展支持的响应类型；
• 使用正则转义或字面量精确匹配，例如：sub_filter 'src="http://' 'src="https://';；
• 确保后端返回的响应未被压缩（如禁用 gzip 或设 gzip_vary off），否则 sub_filter 无法处理压缩流。

规避常见误替换陷阱

sub_filter 是纯字符串替换，不识别 HTML 结构，容易出错。建议采取以下防护措施：

• 限定替换上下文，例如只改 src= 和 data-src= 属性，避免误改注释、JS 字符串或 URL 中的子串；
• 优先使用带引号的完整模式：sub_filter 'src="http://' 'src="https://';，比 sub_filter 'http://' 'https://' 更安全；
• 若页面含 JSON 内联数据或 JS 脚本，可临时排除对应 Location 块或用 sub_filter_last_modified on 配合缓存控制降低影响；
• 测试时用 curl -I 查看 Content-Encoding 是否为 gzip，确认响应未被压缩。

配合 proxy_redirect 和 header 修复其他混合内容来源

sub_filter 只处理响应体，还需同步处理响应头和重定向中的 HTTP 地址：

• 用 proxy_redirect http:// https://; 修正后端返回的 Location 头；
• 添加 proxy_set_header Referer ""; 或清理敏感头，防止第三方资源因 Referer 被拒；
• 通过 add_header Content-Security-Policy "upgrade-insecure-requests"; 作为兜底策略，强制浏览器升级所有不安全请求；
• 对 CSS 文件中 url(http://...)，需额外配置 sub_filter_types 包含 text/css，并谨慎编写匹配模式。

验证与调试技巧

上线前务必逐项验证效果：

• 用 curl -s http://your-proxy-domain | grep -o 'src="http://[^"]*' 检查是否仍有残留 HTTP 资源；
• 浏览器开发者工具中查看 Network → Img 请求，确认协议是否均为 HTTPS；
• 开启 error_log /var/log/nginx/subfilter.log notice;，结合 sub_filter_last_modified on 观察是否命中替换；
• 对动态生成的页面（如含 Vue/React SSR 输出），注意服务端渲染内容是否已含 HTTPS，避免重复替换导致双 https://https:// 错误。