开源实例之页面劫持

前言

本篇介绍用 Nginx sub_filter 实现拦截页面替换内容。

问题描述

本系列的实例为了使用方便，登录页默认填充了用户名和密码。一般是通过修改相关 HTML 或 JS 文件实现，但也有的实例做成了二进制包，要用页面劫持的方式注入，比如护卫神主机大师这个实例。

护卫神·主机大师 V3.0.0 实例的登录页面使用了 VUE 框架，需要劫持/static/js/chunk-common.062e7d64.js这个文件，填充username和password：

data() {
    return {form: {username: "", password: ""}}
}

解决办法

本例用 Nginx sub_filter 方法实现。

sub_filter

执行nginx -V如果包含--with-http_sub_module表明已安装 sub_filter 对应的模块。Debian apt 安装 Nginx 即默认包含。

sub_filter 有如下参数：

• sub_filter_types [text/html]：替换文件类型
• sub_filter_once [on/off]：是否只替换一次
• sub_filter [search] [replace]：文本替换

限制条件

sub_filter 只能替换明文，开启 gzip 的内容无法识别。

实际使用

最终实现自动填充用户名、密码只需一段 Nginx vhost 配置：

server {
    ……

    location / {
        proxy_pass http://app:6588;
        ……
    }

    location /static/js/chunk-common.062e7d64.js {
        gzip off;
        proxy_set_header Accept-Encoding "";

        sub_filter '{return{form:{username:"",password:""}}}' '{return{form:{username:"admin",password:"Abcd1234"}}}';
        proxy_pass http://app:6588;
        ……
    }
}

后记

体验更多开源实例