自定义小米路由器管理页面
背景
我的路由器 7x24 开机无密码,当耳机受影响时我会暂时关闭无线网。2015 年 11 月我的路由器坏了,朋友给我推荐小米 mini 路由器。这人自己有个小米路由器,经常不能正常启动(那个灯是桔黄色的,不会变蓝),我问他为什么还推荐小米,他说便宜功能多、不好用随时换。我本来就没有认定的路由器,所以就听他的没买 300 - 1 的极路由,买了个 130 - 1 的小米 mini。
设置好之后,用浏览器访问 192.168.31.1,输入密码登录管理页面,第一感觉就是慢。
想关闭无线网
- 常用设置,这会显示 Wi-Fi 设置标签 > 点击相应 ssid 旁边的“关闭”单选按钮 > 保存 > 确认重启
想启用 mac 白名单/黑名单
- 常用设置 > 安全中心 > 等待“无线访问控制”出现 > 点击它旁边的开关 > 一条一条添加设备(若选择“从在线列表添加”则无法修改设备名字) > 保存并生效
登录之后显示的页面是 路由状态 > (你的路由器名字),这里可以查看连接到路由器上的设备,界面类似下面
图很直观,文字几乎没用,一堆 android-
路由状态 > 终端设备 页面可以禁用设备访问 wan,界面类似下面
这里显示的名字较长,但看不到各位的流量状况,也就无法确定该禁止谁访问 wan。所以我想做一个列表页面,显示设备的完整名字和流量并控制它能否访问 wan
工具
小米路由器 mini
google chrome 45
正文
我打算就把它显示在 路由状态 > (你的路由器名字),这是登录后进入的页面,下面称其为首页。
要修改首页,可以修改保存在服务器上的文件,也可以在页面加载之后运行一段脚本。我选择后者因为它在浏览器中就能完成,缺点是每次打开首页都要手动执行脚本。
本文不使用 fiddler 等反向代理。
snippets
chrome 的 f12 工具的 source 标签有个保存代码段的地方,如下
你可以把一大段脚本保存为代码段文件,右键该文件选择 run,这就省得每次都往控制台粘贴并执行代码。本文的脚本保存在代码段文件 miwifi 中。
位置
用 chrome 访问 192.168.31.1,输入密码,会进入首页,url 类似下面
http://192.168.31.1/cgi-bin/luci/;stok=98a00862e50a7f688cf8868869a7068f/web/home#router
要往这个页面添加一个详细列表,首先选取一个位置放置列表,我打算把它放在“路由器信息”下面
这意味着放在路由器信息那个 dom 元素之下,用 f12 查看他的位置
因此列表将放在 div.routerinfo 下面。在控制台执行 $(".routerinfo") 发现只有 1 个元素,所以不必担心插入多于 1 个列表。
行为
希望构造这样一个列表,它显示设备的完整名字、mac、流量信息,并可以控制某个设备能否访问 wan。这就需要大约两个 ajax,一个获取设备列表,另一个控制 wan 访问。
观察
刚才打开了控制台,应该能看到控制台有一堆输出,由 class.pie.js:1 产生。输出每隔一定时间产生一坨,饼图、列表会跟着刷新,点击 f12 的 network 标签会发现每个成功的 xhr 调用后跟一坨输出,xhr 是
get http://192.168.31.1/cgi-bin/luci/;stok=98a00862e50a7f688cf8868869a7068f/api/misystem/status
没有参数
这个 console.log 为我省了不少时间,不用去查找绘制函数了。接下来要修改这个绘制函数,让其更新前面设计的列表。
点击控制台输出右边的 class.pie.js:1,这会在代码窗格打开 class.pie.js,这是个最小化后的文件不容易阅读,点击打开的代码左下角的大括号格式化它,这会在代码窗格打开 class.pie.js:formatted,光标已经定位到 console.log 处了,在那里加一个断点。
过一会一个新的 ajax 成功了,将调用这里的 console.log,然后会中断在这里,查看其调用堆栈发现比较长,一堆我不关心的 jquery 代码
blackbox
如果不想在调用堆栈里看到无关的代码比如 jquery,可以将 jquery 添加到黑盒,这样调用堆栈就没有那么多噪音了。
调用堆栈显示 PieChart.prototype.update > PieChart.prototype.drawPie > process > sector,阅读代码后知道 PieChart.prototype.drawPie 负责更新饼图和列表,主要工作由 process 来做。那么只要替换 PieChart.prototype.drawPie,让它照常更新饼图,但更新新的列表,本文的目的就达到了。
收集
开始行动之前要找几个可用的 ajax 以获取设备列表及控制 wan 访问。开着 f12 的 network 标签四处点击,几个小时之后找到下面两个 ajax,路径相对于首页
get ../api/xqnetwork/wifi_macfilter_info?model=
model 取值 0 - 黑名单和 1 - 白名单。该参数不重要,重要的是该 ajax 一定返回一个数组 flist,里面似乎是路由重置以来所有通过 wifi 连接的设备,不知道重置路由会不会清除 flist。这一下子就改变了我的思路,本来打算只在列表中显示连接的设备,现在打算显示这个完整列表,然后仅更新连接的设备了。
get ../api/xqsystem/set_mac_filter?mac=&wan=
控制 mac 访问 wan,wan 取值 0 - 关闭和 1 - 开启
drawPie
既然前面中断到了 sector,咱们看看调用 sector 的 drawPie 函数有什么信息可用。drawPie 用到的信息不是通过函数参数而是通过 this 传递的。数组 this.datas 是设备列表,每个数组元素代表一个接入设备。数组元素包含的信息少的可怜、没有 mac,没有 mac 也就无法使用前面找到的 ajax set_mac_filter
。为了使用 set_mac_filter
要先搞明白是调用 drawPie 的函数就没有详细信息还是信息没有传进来,然后分别采取对策。
前面知道是那个定时发起的 ajax status
调用的 drawPie,在 network 标签查看 status 发现返回值比较详细,包含 mac
换句话说调用 drawPie 的函数有足够的信息,只是没有传进来。所以接下来不仅要修改 drawPie,还要修改 drawPie 的上游函数,让它们给 drawPie 传入更详细的信息,至少要包含设备 mac。顺着前面的调用堆栈往上找,除去不关心的加入黑盒的函数外就 4 个函数,按离 drawPie 从近到远分别是
- PieChart.prototype.update
- 匿名函数,该函数响应消息 chart:pie_update
- $.pub,该函数发布包括 chart:pie_update 的一些自定义消息
- 匿名函数,ajax
status
成功后进入该函数
PieChart.prototype.update
PieChart.prototype.update = function(datas, count) {
this.datas = datas;
this.count = count;
this.loaddone();
this.getTotal();
this.drawPie();
this.drawCount()
}
只是把传入的 datas 加到 this 上,和 drawPie 相比没有什么有用的信息,前面知道 datas 信息太少,还得往上找
匿名函数 $.sub("chart:pie_update", function(evt, data){ ... });
这个函数信息很全,data 是 ajax status
返回的 json 对象的 dev 属性的原始内容,问题是如何修改它?
通过阅读 $.sub 的源代码
(function ($) {
var o = $({});
$.sub = function () { o.on.apply(o, arguments); };
$.unsub = function () { o.off.apply(o, arguments); };
$.pub = function () { o.trigger.apply(o, arguments); };
}(jQuery));
知道 \(.sub 通过 `\)({}).on把监听函数保存到了 sub、unsub、pub 共同捕获的局部变量 $({}) 中,外部无法访问这个局部变量也就无法替换它保存的监听函数;另一方面,调用
$.sub时传入的是匿名函数,外部取不到这个函数就没法用 $.unsub 取消监听(然后用
$.sub` 挂接修改后的监听函数)。所以从代码目前编写的方式看,无法修改这个匿名函数的行为,还得往上找
$.pub
这个代码其实是库代码,但既然它直接写在首页的 html 里,我们可以视情况修改它。
前面知道匿名函数 \(.sub("chart:pie_update", function(evt, data){ ... }); 的 data 参数信息很全,而该函数由 `\).pub调用,所以 $.pub 的信息也很全。当
$.pub发送事件 chart:pie_update 时会调用所有用 $.sub 监听该事件的函数。查看源代码发现只有一个函数处理 chart:pie_update 事件,就是上面那个匿名函数。所以可以修改
$.pub` 让它遇到 chart:pie_update 时直接调用基于上面的匿名函数修改的函数,遇到其它事件照常发送。
var oldPub = $.pub;
$.pub = newPub;
function newPub(type, arg) {
if (type == "chart:pie_update") {
// 基本上复制上面那匿名函数的内容
} else
oldPub.apply(null, arguments);
}
代码段 miwifi 概述
定义一个全局变量 wifi,它里面有两个属性 get 和 post,分别代表 ajax get 和 ajax post,每个属性又有一堆方法用来发起具体的 ajax;然后运行一个匿名函数绘制前面设计的列表,具体工作是
- 用前面收集到的 ajax 填充 wifi.get 和 wifi.post
- 保存 $.pub
- 使用
wifi.get.wifi_macfilter_info
获取所有通过 wifi 连接到路由器的设备列表,成功时执行另一个匿名函数
这另一个匿名函数的具体工作是
- 在 div.routerinfo 下面添加一个 div 作为列表的容器
- 往 document.head 追加一个
<style>
用于设置前面 div 的样式 - 修改 PieChart.prototype.drawPie 和 $.pub,
PieChart.prototype.drawPie = newDrawPie; $.pub = newPub;
- 把从 ajax
wifi_macfilter_info
得到的 flist 的所有条目逐一添加到列表 - 监听列表条目的点击事件,点击时翻转该条目的 wan 访问能力
newPub 的大体工作前面已经说了,newDrawPie 要做两件事情
- 像以前一样绘制饼图
- 修改 $.pub 之后现在的 datas 里面已经包含了设备的 mac,通过 mac 查找列表中相应的条目,给找到的条目添加流量信息。从 ajax
wifi_macfilter_info
生成的列表仅包含通过 wifi 连接的设备,newDrawPie 是 ajaxstatus
成功后调用的,该调用还包含通过网线连接的设备和一个叫 other 的流量微不足道的设备的合计,需要加以处理。
效果
修改间距,添加连接时长
代码
本文代码编辑于 microsoft visual studio 2015
//
// 假设当前 url 是
// http://192.168.31.1/cgi-bin/luci/;stok=bcdeb10c02009edccb478e16585b4775/web/home
//
// get
// ../api/misystem/status 路由状态 - 绘制饼图时
// ../api/misystem/devicelist 路由状态 - 查看终端设备时
// ../api/misystem/qos_info 高级设置 > qos 智能限速 > 设备列表
// ../api/xqnetwork/wifi_macfilter_info 常用设置 > 安全中心 > 无线访问控制
// model - 0,默认值,黑名单列表;1,白名单列表
// ../api/xqsystem/reboot 重启路由器
// client - web
// ../api/xqsystem/set_mac_filter 禁止指定的 mac 访问 wan
// mac - encodeURIComponent(mac)
// wan - 0,关闭 wan;1 - 开启 wan
//
// post
// ../api/xqnetwork/set_wifi
// wifiIndex - 1,2.4G Wi-Fi;2,5G Wi-Fi;3,访客 Wi-Fi
// on - 0,关;1,开
// ssid - ssid,比如 wangzimei
// pwd - 该 ssid 的密码
// encryption - none,不使用密码
// channel - 0,自动
// bandwidth - 0
// hidden - 0
// txpwr - max
//
// http://192.168.31.1/cn/device_list_samsung.png
//
// wifi.get.wifi_macfilter_info(0, o => { o.flist.forEach(o => { console.log(o.name, o); }); });
var wifi;
!function () {
var oldPub = $.pub,
template =
'<div data-mac="{$mac}" class="{$wan}" style="background-image: url({$icon});">' +
" <div>{$name}</div>" +
" <div>{$mac}</div>" +
" <div class=online></div>" +
" <div class=download-percentage></div>" +
" <div class=traffic><div class=up></div><div class=down></div></div>" +
"</div>",
lastPicked = $([]),
deviceList;
wifi = {
get: {
devicelist: function (f) { $.getJSON("../api/misystem/devicelist", typeof f == "function" ? f : logJson); },
qos_info: function (f) { $.getJSON("../api/misystem/qos_info", typeof f == "function" ? f : logJson); },
reboot: function () { $.getJSON("../api/xqsystem/reboot"); },
status: function (f) { $.getJSON("../api/misystem/status", typeof f == "function" ? f : logJson); },
wifi_macfilter_info: function (model, f) { $.getJSON("../api/xqnetwork/wifi_macfilter_info", { model: model }, typeof f == "function" ? f : logJson); }
},
post: {
set_wifi: function (on, i, ssid) {
$.post("../api/xqnetwork/set_wifi", {
on: on ? 1 : 0,
wifiIndex: i || 1,
ssid: ssid || "wangzimei",
encryption: "none"
});
}
}
};
wifi.get.wifi_macfilter_info(0, function (o) {
var flist = o.flist,
s = "",
i, len;
PieChart.prototype.drawPie = newDrawPie;
$.pub = newPub;
$("#piecharttable").html("");
$(".new-device-list-css").length || $(document.head).append(
"<style class=new-device-list-css>" +
" .new-device-list .busy { background-color: salmon; }\n" +
" .new-device-list .download-percentage { width: 5em; }\n" +
" .new-device-list .no-wan { text-decoration: line-through; }\n" +
" .new-device-list .online { width: 10em; }\n" +
" .new-device-list .traffic { width: 15em; }\n" +
" .new-device-list .traffic > div { line-height: 40px; }\n" +
" .new-device-list > div { background-position: left center; background-repeat: no-repeat; background-size: 60px; display: flex; line-height: 80px; text-align: right; transition: background-color 0.5s ease; }\n" +
" .new-device-list > div > :nth-child(1) { width: 20em; }\n" +
" .new-device-list > div > :nth-child(2) { width: 10em; }\n" +
"</style>");
$(".new-device-list").remove();
$("<div class=new-device-list></div>").insertAfter(".routerinfo");
deviceList = $(".new-device-list");
for (i = 0, len = flist.length; i < len; ++i)
s += StringH.tmpl(template, {
mac: flist[i].mac,
wan: flist[i].authority.wan ? "" : "no-wan",
name: escapeHtml(flist[i].name),
icon: flist[i].company.icon ? "/cn/" + flist[i].company.icon : "/img/device_list_unknow.png"
});
deviceList.html(s);
deviceList.on("click", "[data-mac]", onClickDevice);
});
function logJson(json) { console.log(json); }
function onClickDevice() {
var t = $(this);
if (!t.hasClass("busy")) {
t.addClass("busy");
$.getJSON("../api/xqsystem/set_mac_filter", { mac: t.attr("data-mac"), wan: t.hasClass("no-wan") ? 1 : 0 })
.done(function (json) { json.code || t.toggleClass("no-wan"); })
.always(function () { t.removeClass("busy"); });
}
}
function newPub(type, arg) {
var dev, colorMap, total, i, len, value, bf;
if (type == "chart:pie_update") {
dev = arg.devStatistics;
colorMap = ["#33cc33", "#2673bf", "#ffaa00", "#ff6600", "#d96cb5", "#00baff", "#ff4060", "#00d990", "#d96cca", "#ff4400"];
total = 0;
for (i = 0, len = dev.length; i < len; ++i) {
value = parseInt(dev[i].download, 10);
dev[i].value = value;
dev[i].value2 = parseInt(dev[i].downspeed, 10);
dev[i].color = colorMap[i];
total += value;
}
bf = byteFormat(total, 10, true);
$.pieChart.update(dev, {
value: bf[0],
label: bf[1]
});
} else
oldPub.apply(null, arguments);
}
function newDrawPie() {
var r = this.r - 2,
angle = 0,
start = 0,
currentPicked = [],
i, len, angleplus, pie, o, div;
lastPicked.css("color", "");
lastPicked.find(".online").text("");
lastPicked.find(".download-percentage").text("");
lastPicked.find(".up").text("");
lastPicked.find(".down").text("");
for (i = 0, len = this.datas.length; i < len; ++i) {
o = this.datas[i];
o.color || (o.color = Raphael.hsb(start, 0.8, 0.9)),
angleplus = 360 * o.value / this.total,
pie = sector(this.paper, this.rad, this.cx, this.cy, r, angle, angle + angleplus, {
fill: o.color,
stroke: this.stroke,
"stroke-width": 0
});
angle += angleplus;
start += 0.1;
pie.id = "pie_" + i;
this.chart.push(pie);
div = deviceList.find('[data-mac="' + o.mac + '"]');
if (!div.length) {
o.icon = "/img/device_list_unknow.png";
div = $(StringH.tmpl(template, o));
div.children(":first-child").text(o.devname);
}
div.css("color", o.color);
div.find(".online").text($.secondToDate(o.online));
div.find(".download-percentage").text((this.total ? (o.value / this.total * 100).toFixed(1) : 0) + "%");
div.find(".up").text(byteFormat(o.upspeed) + "/S - " + byteFormat(o.upload));
div.find(".down").text(byteFormat(o.downspeed) + "/S - " + byteFormat(o.download));
currentPicked.push(div[0]);
}
lastPicked = $(currentPicked);
deviceList.prepend(lastPicked);
}
function sector(paper, rad, cx, cy, r, startAngle, endAngle, params) {
var x1 = cx + r * Math.cos(-startAngle * rad),
x2 = cx + r * Math.cos(-endAngle * rad),
y1 = cy + r * Math.sin(-startAngle * rad),
y2 = cy + r * Math.sin(-endAngle * rad);
return endAngle - startAngle == 360 ?
paper.circle(cx, cy, r).attr(params) :
paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}
// http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery
function escapeHtml(s) {
var entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': """,
"'": "'",
"/": "/"
};
return s.replace(/[&<>"'\/]/g, function (str) {
return entityMap[str];
});
}
}();
// 关于路由器密码
// 路由器密码和 mac 地址差不多,都是客户向路由器提交一个字符串,路由器查表以确定是否接受连接,密码可以泄露,mac 也可以伪造。
//
// 关于小米路由器
// 优点:
// 便宜
// 可以禁止设备访问外网
// 获取设备型号
// 缺点:
// ajax 速度很慢
// 动不动就要重启路由器,重启路由器尤其慢
// 很难找在哪设置某项内容
// mac 地址只能用冒号分隔
// 不知道在哪看日志,只看到有个上传日志的按钮
// 即使从白名单删除了设备,设备列表里面仍然是以前自己指定的名字,无法查看设备原来的名字
// /img/device_list_err.png、/img/device_list_unknow.png 和其它设备图标路径不一样,并缺少下列图片
// /cn/device_list_google.png
// /cn/device_list_vivo.png
// /cn/device_list_windows.png
// 不明觉厉的功能:
// 我 1 个朋友 1 年多前来我家,此后再没来过。当时我把他苹果手机的 mac 加入以前的路由器白名单了。前段时间换路由,
// 把白名单拷贝到这个小米中,当时没注意,过两天发现这个白名单条目关联的图标是苹果。小米能根据 mac 判断手机型号?
//
// 360免费wifi的原理是什么?有无窃取手机记录的wifi数据?
// http://www.zhihu.com/question/27065773/answer/35111715
//
// 如何看待小米路由进行 404 网页劫持?
// http://www.zhihu.com/question/30358197
//
// 小米路由器劫持用户浏览器事件回顾
// http://drops.wooyun.org/tips/6820
//
// 小米路由器先劫持 http 错误码, 现在又在部分网站添加小尾巴, 什么节奏?
// https://www.v2ex.com/t/199701
使用
打开 192.168.31.1 登录 > 按 f12 > 转到 sources 标签 > 选 snippets > 右键 new > 输入文件名比如 miwifi > 把上面的代码粘贴到打开的文件内 > 保存 > 右键文件名 > run