哪吒监控 1.5.1 自定义头像
对于哪吒监控自带的授权登录，最近不知道是github问题还是什么问题，一直登录失败。醒着直接升级下监控版本，结果，效果很不错，成功升级了。
感觉是换了一个全新的版本，但是这个版本确登录不了。
多次尝试更新之后，终于默认账号登录成功了，但是，伴随而来的是另外的一个问题。所有的监控项都没了，并且首页提示websocket建立失败。查阅文档才发现，新的版本需要将websocket一块进行代理：
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
# http2 on; # Nginx > 1.25.1，请注释上面两行，启用此行
server_name dashboard.example.com; # 替换为你的域名
ssl_certificate /data/letsencrypt/fullchain.pem; # 域名证书路径
ssl_certificate_key /data/letsencrypt/key.pem; # 域名私钥路径
ssl_stapling on;
ssl_session_timeout 1d;
ssl_session_cache shared:SSL:10m; # 如果与其他配置冲突，请注释此项
ssl_protocols TLSv1.2 TLSv1.3;
underscores_in_headers on;
set_real_ip_from 0.0.0.0/0; # 替换为你的 CDN 回源 IP 地址段
real_ip_header CF-Connecting-IP; # 替换为你的 CDN 提供的私有 header，此处为 CloudFlare 默认
# 如果你使用nginx作为最外层，把上面两行注释掉
# grpc 相关
location ^~ /proto.NezhaService/ {
grpc_set_header Host $host;
grpc_set_header nz-realip $http_CF_Connecting_IP; # 替换为你的 CDN 提供的私有 header，此处为 CloudFlare 默认
# grpc_set_header nz-realip $remote_addr; # 如果你使用nginx作为最外层，就把上面一行注释掉，启用此行
grpc_read_timeout 600s;
grpc_send_timeout 600s;
grpc_socket_keepalive on;
client_max_body_size 10m;
grpc_buffer_size 4m;
grpc_pass grpc://dashboard;
}
# websocket 相关
location ~* ^/api/v1/ws/(server|terminal|file)(.*)$ {
proxy_set_header Host $host;
proxy_set_header nz-realip $http_cf_connecting_ip; # 替换为你的 CDN 提供的私有 header，此处为 CloudFlare 默认
# proxy_set_header nz-realip $remote_addr; # 如果你使用nginx作为最外层，就把上面一行注释掉，启用此行
proxy_set_header Origin https://$host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_read_timeout 3600s;
proxy_send_timeout 3600s;
proxy_pass http://127.0.0.1:8008;
}
# web
location / {
proxy_set_header Host $host;
proxy_set_header nz-realip $http_cf_connecting_ip; # 替换为你的 CDN 提供的私有 header，此处为 CloudFlare 默认
# proxy_set_header nz-realip $remote_addr; # 如果你使用nginx作为最外层，就把上面一行注释掉，启用此行
proxy_read_timeout 3600s;
proxy_send_timeout 3600s;
proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;
proxy_max_temp_file_size 0;
proxy_pass http://127.0.0.1:8008;
}
}
upstream dashboard {
server 127.0.0.1:8008;
keepalive 512;
}
而至于数据丢失，官网也写了：
这就很棒。只能重新添加所有服务器，添加之后感觉一切正常了，但是后台那个头像实在是无法忍受。
尼玛，这苦大仇深的表情，作为小仙女坚决不能忍啊。在杜老师的聊天室，交流了一下，他也不知道怎么改。只能尝试js暴力修改src，代码如下：
var images = document.querySelectorAll('img[alt="obaby"]');
images.forEach(function(image) {
console.log(image);
console.log('first inject to replace avatar!');
image.src = "https://g.h4ck.org.cn/avatar/3a78942c4ddcda86242f20abdacee082?s=256&d=identicon&r=g";
});
然而，将这段代码加入到系统设置的自定义代码内，会发现多数情况下都不能调用，只能通过差距js的方式进行调用，并且哪吒还有个问题，那就是对于其他域名下的js会加载失败，所以只能把js放到同一个服务器下。
后台添加配置：
此时js代码多数情况都能正常调用，为了能够加载这个js，需要修改nginx配置文件将js路径加入nginx配置文件：
location /inject/{
alias /home/wwwroot/s.h4ck.org.cn/inject/;
}
此时，顶部的头像已经修改成功了，但是下面的头像还是旧的，就很蛋疼。如果查看页面源码会发现基本都是js绘制的，本身并没有任何的内容。
遇事尝试使用nginx的替换功能进行内容替换，
location / {
proxy_set_header Host $host;
#proxy_set_header nz-realip $http_cf_connecting_ip; # 替换为你的 CDN 提供的私有 header，此处为 CloudFlare 默认
proxy_set_header nz-realip $remote_addr; # 如果你使用nginx作为最外层，就把上面一行注释掉，启用此行
proxy_read_timeout 3600s;
proxy_send_timeout 3600s;
proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;
proxy_max_temp_file_size 0;
proxy_pass http://127.0.0.1:8008;
sub_filter 'https://api.dicebear.com/7.x/notionists/svg?seed=' 'https://g.h4ck.org.cn/avatar/3a78942c4ddcda86242f20abdacee082?s=256&d=identicon&r=g&name=';
sub_filter_once off;
}
然而，这种替换方式竟然只有首次生效，不知道是不是nginx配置问题，最终还是回到了直接修改js文件的方法。
拉出app文件，这个东西是编译的的elf文件，看了下字符串长度过长，替换有些麻烦，也没趁手的elf编辑器，就很麻烦。
转换思路，不好改二进制，那就改对应的js文件，编辑/dashboard/assets/index-CeBwNjOv.js 替换内部的https://api.dicebear.com/7.x/notionists/svg?seed=。
同时将文件头的import改为绝对路径，参考https://s.h4ck.org.cn/inject/index-obaby.js：
修改之前的内容替换代码为：
location / {
proxy_set_header Host $host;
#proxy_set_header nz-realip $http_cf_connecting_ip; # 替换为你的 CDN 提供的私有 header，此处为 CloudFlare 默认
proxy_set_header nz-realip $remote_addr; # 如果你使用nginx作为最外层，就把上面一行注释掉，启用此行
proxy_read_timeout 3600s;
proxy_send_timeout 3600s;
proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;
proxy_max_temp_file_size 0;
proxy_pass http://127.0.0.1:8008;
sub_filter '/dashboard/assets/index-CeBwNjOv.js' '/inject/index-obaby.js';
sub_filter_once off;
}
重启nginx
通过下面的命令查看是否支持sub_filter ，如果不支持重新编译nginx：
否则会爆下面的错误：
此时头像就ok啦：
另外一个，就是那个命令窗口，V0版本是个全屏的，这V1弄了个小窗口，看着是真tm蛋疼：
这是纯粹为了难看（手动狗头）？
同样通过js修改页面样式：
setTimeout(function () {
if (window.location.pathname.includes('terminal')) {
console.log("这段代码将在3秒后执行");
var terminals = document.getElementsByClassName('xterm-screen');
for (var i = 0; i < terminals.length; i++) {
console.log('change screen size');
terminals[i].setAttribute("style", "width: 941px; height: 900px;")
}
var divs = document.getElementsByClassName('max-w-5xl mx-auto');
for (var i = 0; i < divs.length; i++) {
console.log('change screen size');
divs[i].setAttribute("style", "max-width: 100%;max-height: 100%")
}
}
// ... 执行其他操作
}, 500); // 3000毫秒等于3秒
在引入的js文件中使用windows.onload无法触发，直接延迟执行即可，调整后效果。
看起来顺眼多了，修改顶部图标以及favicon：
var imgElements = document.getElementsByClassName('h-7 mr-1');
for (var i = 0; i < imgElements.length; i++) {
imgElements[i].src = 'https://image.h4ck.org.cn/support/uugai.com-1661691272754.png';
}
var images = document.querySelectorAll('img[alt="apple-touch-icon"]');
images.forEach(function (image) {
console.log(image);
console.log('change logo!');
image.src = "https://image.h4ck.org.cn/support/uugai.com-1661691272754.png";
});
var faviconurl = "https://image.h4ck.org.cn/support/uugai.com-1661691272754.png"; /* 替换为自己的 Logo 图片链接 */
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/png';
link.rel = 'shortcut icon';
link.href = faviconurl;
document.getElementsByTagName('head')[0].appendChild(link);
最终效果：
看起来好多了，最终js文件：
https://s.h4ck.org.cn/inject/index-obaby.js
https://s.h4ck.org.cn/inject/avatar.js