开源实例之页面劫持 前言 本篇介绍用 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 对应的模块。Deb... 2023-03-14
php 双问号可以链式使用 刚才改网站代码，偶然发现 php 双问号是可以链式使用的： $ret = $a ?? $b ?? $c ?? 4; 原本我是应该加括号的： $ret = $a ?? ($b ?? ($c ?? 4)); 无心之失忘了加括号，竟然可以执行，才发现双问号可以链式使用。 之所以有这样的乌龙，是因为我这个从 php5 时代入行的古典程序员，对新的语法糖是想当然的，没有去仔细看过文档。双问号的使用习惯也是从三元式演变过来的，自然没想过还能链式使用。 用三元式表达上面的语句是这样的： $ret = isset($a) ? $a : (isset($b) ? $b : (isset($c) ? $c : 4)); php 不愧是世界上最好的语言。令人开心。 2022-11-11
CleanCSS - 移除未使用的 CSS 代码 应用：CleanCSS 地址：https://dujun.eu.org/cleancss 功能：分析页面中引用的 CSS 文件，打包成单一的干净文件用于替换所有引用 适用：独立页面 一、缘起 我导航站用了开源项目WebStackPage，首次静态资源加载有 1.5M，一部分原因是它使用了第三方库，比如 Bootstrap。当然，第三方库只有少量代码实际被用到，所以我就想找个办法，把未使用的 CSS 代码移除，使得静态文件更小。 二、方案 很快就找到了这个网站https://unused-css.com/。它可以很好地实现我的需求，不过有一个小问题，它是收费的，最低 25 美元一个月。 Only paying users can download clean CSS files. 那怎么办呢？那就自己开发一个工具吧。 三、分析 清理 CSS 代码需要这么几步： 抓取页面 HTML 内容 找到... 2022-10-31
我还在用 jQuery 一、前言 我是后端开发出身，前端还停留在用原生 js 和 jQuery 写代码的水平。这次重构副站dujun.eu.org考虑过前端要不要用现代框架来写。三大框架里面，Angular 和 React 不打算碰，去看了最容易入门的 Vue。在 B 站看了两天的教程，喜欢不起来。 二、Vue Vue 当然很好，有优雅的设计思路，是真正意义上的框架。双向绑定，只需处理数据，不用亲自操作 DOM。但是对我而言，有两方面原因让我放弃 Vue。 （一）Vue 语法 Vue 的编写方式就像一门新的语言，需要记很多的语法糖。如果不打算深入前端工作，对这个学习积累没有很高的兴致。更真实的是，当只是完成简单的交互效果，用 Vue 写代码不会比原生更轻松。 （二）Vue 虚拟 DOM Vue 使用虚拟 DOM 来优化渲染逻辑，实际执行过程成了黑盒，我不确定具体发生了什么。虽然本不该关心，但我不喜欢失去掌控感。而... 2022-10-28
JavaScript 强混淆 我的网站是纯内存缓存读 + js 渲染 spa，现在的瓶颈就是硬件配置低、带宽小，程序架构上可以说追求到极致了。其中，js 渲染是全站性能优化的关键一坏，服务器只负责吐出原始数据，而把路由解析、数据处理、布局渲染的计算压力都转嫁给了浏览器。 如此重要的前端部分我当然花了很大的心思。js 是明文的，只能做混淆。但是如果混淆得足够好，逆向成本过高，也是可以达到很好的代码保护。网上有很多 js 代码混淆的方法可以参考，但有些会让文件大小增加好几倍。这里我分享一下自己 js 强混淆的思路。 我实现 js 强混淆的关键一点就是字面量表达式。 原生写法： str.trim(); 字面量表达式： str['trim'](); 有了这个基础，混淆要做的就是进一步隐藏字符串了。我用了 ASCII 转码和 base64，使得字符基础变量简化为 64 个 base64 编码字符，以及特殊的空格和换行符。 以“我... 2022-10-19
友情链接模块发布 新增友情链接页面，入口在电脑端的侧边栏或手机端的搜索页的“友链”。 1. 前言 建站七年了，一直没有做友情链接的模块。诚然，博客这种古典互联网产品，友链是最典型的应用，缺失有点遗憾。期间也反复想过要做，但是有两方面问题没有找到满意的方案。 1.1 没有满意的友链样式 网上常见的友链有这些样式： 网站名称文字链接 头像加网址、网站描述 网站链接加最新 feed 头像、网站描述都是静态的，我觉得无趣。于是我尝试过抓取 feed，然后就有两个问题： rss 地址发现，需要匹配各种未知规则，除非手动填写地址； 有些网站没有 rss，如果直接爬取页面，匹配内容又很麻烦。 所有长期以来，友情链接的表现样式就把我卡住了。 1.2 没有满意的友链规则 相比样式，友链的规则逻辑是让我更想不好的。典型的交换友链方式是，博友之间直接联系，互相提供文字、链接、头像、截图等。我很不喜欢这样的流程，因为有恼人的几个因... 2022-10-06
波浪下划线 本站对文字的重点标记，经过了几次改版。 一、着重号 最初使用着重号。它的问题是会造成段落间距变大，同时大圆点标记过于醒目，抢夺阅读视线。 text-emphasis: filled circle; text-emphasis-position: under; 效果如：对照文字、着重号标记的文字 二、虚线下划线 着重号用了没多久，就改成虚线下划线了。 border-bottom: 2px dotted; 效果如：对照文字、虚线下划线标记的文字 三、波浪下划线 虚线下划线没什么问题，但是今天突然觉得平庸了，决定改成波浪线。 代码参考了 CSS实现文字下面波浪线动画效果。具体实现如下： padding: 5px 0.2em; background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, cu... 2022-08-02
H264需为偶数尺寸 刚才上传一个 mp4 视频时报错（视频见上一篇文章），本地调试发现错误信息为： [libx264 @ 0x55a5429f40c0] height not divisible by 2 (540x771) 搜索相关信息了解到：旧式 H264 编码视频（如 yuv420p 格式）如果长宽中含有奇数会导致转码失败。 因此，强制转换长宽为偶数： $width = 2 * (int)ceil($width / 2); $height = 2 * (int)ceil($height / 2); 之前一直没发现这个问题，大概是因为绝大部分是手机直接拍的视频，都是标准偶数尺寸。 2022-07-22
mac系统浏览器，隐藏文本光标（除输入框外）。css 如下： * { caret-color: transparent; } input:focus-within, textarea:focus-within { caret-color: auto; } 应用前效果（录自友站 Vian）： 应用后效果： 2022-06-28
