Mion's Blog - Mion
type: channel
link: https://jlpt.qwq.cc/author/1/
description: Mion
items: DDOS的前世今生
items: 使用 GoMyFonts 自建 Google Fonts 镜像
items: 在宝塔下使用Umami自建站点访问统计系统
items: 使用代理为docker-compose加速
items: 关于FTP协议与FTP安全的浅谈
items: [CTF]关于PHP5下foreach运行模式的讨论
items: 使用ESP8266+RC522+MG995低成本改造宿舍门禁支持NFC刷卡与远程控制
items: 为网站增加PWA支持实现原生应用体验
items: 一些常用的设计相关素材与工具网站
items: 在宝塔下使用ngx_waf增强WAF防护性能/防CC/开启5秒盾

DDOS的前世今生
type: item
date: 2022-01-03T21:58:00+08:00
description: 引言 分布式拒绝服务攻击（Distributed Denial of Service Attack）由于其具有攻击立竿见影、执行简单，隐蔽性强等特点广泛被攻击者使用，其在不断的治理与打击的情况下仍然保持不断增长的态势，且TB级别的DDoS攻击呈现出常态化的特点。腾讯安全发布的《2021年上半年全球DDoS威胁报告》中指出，DDoS攻击连续4年任然高速增长，100G以上的大流量攻击次数大幅增长，新型UDP反射方法不断被发现与利用。[2]根据最新消息，Microsoft在2021年8月成功抵挡了一次流量峰值高达2.4Tbps的DDoS攻击，此次攻击被认为是目前最大规模的DDoS攻击。在本文将从DDoS的历史与发展、攻击来源分析、常用的攻击技术、治理与防御和对未来的展望等方面对DDoS进行全面剖析。 DDoS的起源与历史 分布式拒绝服务攻击作为长期存在于互联网中的威胁已经拥有25年的历史，其破坏直接有效、防御成本高昂的特点使其不断给世界互联网造成一次又一次巨大的灾难。分布式拒绝服务攻击形成今日这般规模并不是一蹴而就，其发展可以总结为四个阶段：探索期、工具化、武器化、普及化。 在拒绝服务攻击初期发展时称为探索期，在这一阶段发起攻击的多是一些拥有高超计算机技能的“黑客”，目的也仅仅停留在炫技与个人兴趣上。最早的拒绝服务攻击发生在1996年，受害者是当时纽约最大的互联网服务提供商Panix，攻击者使用SYN Flood攻击Panix公司的业务服务器，导致约6000名用户无法收取邮件。这次事件仅仅使用极少的攻击源发起攻击，还不具有分布式的特点，其造成的影响也非常有限。而第一次由僵尸网络发起的分布式拒绝服务攻击则是Trinoo僵尸网络，在这次攻击事件中黑客控制了超过227台僵尸主机对美国明尼苏达大学的服务器进行攻击，且潜在的僵尸主机超过上万台。同时在这一阶段最具有轰动性的一次事件则是“黑手党男孩”，其对雅虎、亚马逊、eBay等公司进行攻击，造成超过约12亿美元的损失，攻击发起者卡尔斯的故事也被编纂成书《黑手党男孩：一个年轻人的黑客肖像》。在这一阶段中，攻击行为基本不会为黑客带来经济上的收益；从受害者的角度来看，往往波及范围巨大且效果轰动，但对于个人和组织来说，攻击造成的影响也仍在可以承受的范围之内。 经过探索期的发展，DDoS攻击逐渐工具化，呈现出有组织攻击的特点。在这一阶段DDoS经常被用于勒索、打击竞争对手和报复。勒索组织对互联网上的盈利企业进行攻击与勒索，要求支付大量赎金；商业公司雇佣黑客对其竞争对手进行长期的DDoS攻击来干扰竞争对手公司的正常运营；不法分子对精确的目标进行打击报复，如2012年持续时间长达一年的“燕子行动”就是伊斯兰极端分子针对美国发起的报复攻击；2013年的Spamhaus事件中黑客使用DNS反射放大技术发起了当时规模最大的DDoS攻击，其峰值攻击流量超过300Gbps。在此阶段黑客成为隐藏在背后金主的武器，遵循利益最大化原则行动。 工具化的进一步演化则形成武器化，在这一阶段DDoS成为政治工具，在网络这一战场上成为一把大杀器。在2007年爱沙尼亚战争与2008年的古鲁吉亚战争中就有着DDoS攻击的身影。2009年美韩政府超过26个网站遭受持续的DDoS攻击。DDoS武器化后就带有了政治意图，成为国际政治竞争中不可忽视的力量。 根据以上规律不难看出DDoS呈现出普及化的必然趋势：多年的发展中DDoS工具越来越高效与易得；摩尔定律揭示计算机性能提示规律的同时也暗含了网络攻击力度的增强；更多暴露在互联网中的节点也成为被黑客利用的对象，在未察觉中参与到一场又一场的攻击活动中。同时黑客行动主义充斥在这一阶段中。2008年的匿名者（Anonymous）对达山基金会的宣战、“阿桑奇复仇行动”（Operation Avenge Assange）、“索尼行动”（OpSony）就是黑客们表达自身立场的事件。 DDoS的起源与互联网的发展有着密不可分的关系，当互联网扩张的速度飞驰时，DDoS的规模也同时在与日俱增。随着技术的发展，DDoS的攻击方式将会不断涌现，且已有的攻击方式也并不会尽数失效。DDoS已经网络世界造成巨大的威胁与损失。 DDoS的攻击来源 DDoS并不是无源的、凭空产生的，一次大型的DDoS攻击往往具有超大规模的攻击源和复杂的控制机制。在DDoS攻击来源中最主要的是僵尸网络与发包机。 僵尸网络 僵尸网络（Botnet）是指一群由被恶意入侵后感染僵尸程序后的僵尸主机组成的庞大结构，一个大型的僵尸网络往往能由超过百万台僵尸主机组成。僵尸网络中的僵尸主机往往由互联网中的各类设备组成，包括但不限于个人电脑、数据中心的服务器、网络骨干中的路由器设备、物联网终端、移动设备等。巨量的僵尸主机接收Botmaster的命令对受害者进行…

使用 GoMyFonts 自建 Google Fonts 镜像
type: item
date: 2021-12-04T10:20:35+08:00
description: 前言 很多前端框架都会加载 Google Fonts 字体导致在国内打开页面速度缓慢。而 Google Fonts 中文版使用的镜像 fonts.font.im主机也并不在国内，速度也十分不理想。同时，这段时间在学习 GO 并准备做些啥练练手，于是便有了 GoMyFonts 这个简单的小工具。 项目介绍 GoMyFonts 是一个用于搭建 Google Fonts 镜像的小工具，项目可一键部署并支持自定义与本地缓存功能。 GitHub 仓库：https://github.com/MoeMion/GoMyFonts 环境需求 一台能快速访问到 Google Fonts 的主机 Golang 1.15+ 可选配置 Nginx、Caddy 等前置代理 下载与编译 Release 中已经包含有预编译的可执行文件。当以上文件不可运行时，您可以选择按照以下方法自行编译，相关的依赖会自动解决。 # 将项目克隆至本地 git clone https://github.com/MoeMion/GoMyFonts.git cd ./GoMyFonts/ # 使用 Go 编译为可执行文件并运行 go build chmod +x ./GoMyFonts ./Go MyFonts # 或者使用 Go Run 直接运行（不推荐） go run 使用举例 使用./GoMyFonts -help指令可以查看 GoMyFonts 所有支持的参数： ./gomyfonts -help Usage: gomyfonts [-h] [-p :port] [-l link] [-t title] [-c timeout of cache] Github: https://github.com/MoeMion/GoMyFonts Author: Mion Options: -c int Expiration of cache,Unit:Minute. (default 10) -l string The url of your mirror site. (default "http://127.0.0.1/") -p string Bind TCP Port. (default ":2333") -t string The title of your mirror site. (default "GoMyFonts") -p：用于指定 GoMyFonts 监听的 TCP 端口，默认为 2333。 -l：用于指定站点的链接，GoMyFonts 会替换模板中的链接为指定的参数，如您的镜像站点为fonts.qwq.cc并使用 https 进行访问，则该参数应当填入https://fonts.qwq.cc/，注意最后的/不可省略。默认值为http://127.0.0.1/ -c：指定缓存的到期时间，单位为分钟。GoMyFonts 会将结果缓存至内存来减少回源并加速响应。默认为 10 分钟。 -t：用于指定站定标题。默认为GoMyFont(在写的时候手滑，后来也懒得改了)。 GoMyFonts 配置完成后只需要将前端项目中的https://fonts.googleapis.com/css?family=xxx替换为https://gomyfontsmirror/css?family=即可实现加速效果。 持久化运行 GoMyFonts 暂不直接提供后台持久化运行支持，但可以使用Systemd与Supervisor等方式持久化运行 GoMyFonts，以下提供两种参考配置。 Syetemd 将 GoMyFonts 的可执行文件复制到/usr/local/bin目录： cp GoMyfonts /usr/local/bin 创建配置文件/etc/systemd/system/gomyfonts.service如下： [Unit] Description=System service for GoMyFonts. After=network.target [Service] Type=simple Restart=always ExecStart=/usr/local/bin/GoMyFonts #you can specify parameters here. [Install] WantedBy=multi-user.target 以下为相关的管理命令： # 将 GoMyFonts 设置为开机自启 systemctl enable gomyfonts # 启动/重启/停止 GoMyFonts systemctl start/restart/stop gomyfonts # 查看 GoMyfonts 运行日志 systemctl status gomyfonts journalctl…

在宝塔下使用Umami自建站点访问统计系统
type: item
date: 2021-09-18T14:48:00+08:00
description: 序 一直以来就有想要给无人问津的博客添加一个访问统计。在尝试过百度统计、Google Analytics后发现总是会被Adblock Plus拦截，且本身的需要仅仅是需要一个简单的访问统计和来源分析，用不着太复杂的功能，于是准备自建站点访问统计。 Umami Umami是一个简介且易于使用的自建网站访问分析系统，基于Node.js构建且支持PostgreSQL与MySQL数据库。实测能够很好的解决被Adblock插件屏蔽的问题。 官网：https://umami.is/ 文档：https://umami.is/docs/ GitHub：https://github.com/mikecao/umami 安装与配置 安装环境 宝塔 7 Nginx 1.21 MySQL 5.6 Docker-compose 数据库配置 首先从https://github.com/mikecao/umami/blob/master/sql/schema.mysql.sql获取SQL文件，在宝塔中新建数据库，在这里选择utf8mb4字符集。 然后通过宝塔导入SQL文件。 Docker与docker-compose安装 在宝塔【软件管理】 - 【运行环境】中安装 Docker管理器自动配置好Docker环境，之后在终端中执行以下指令获取最新版docker-compose: # curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose # chmod +x /usr/local/bin/docker-compose # ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose # docker-compose --version 如果最后成功输出版本信息则代表成功安装。与此同时如果正确配置了pip，也可以执行以下指令进行安装： # pip install docker-compose docker-compose.yml 由于宝塔环境已经带有MySQL环境，在这里我们仅需要使用Umami的Docker镜像即可，在这里提供一份我魔改后的docker-compose.yml文件，将以下的数据库信息修改后保存至本地即可，我选择保存至/home/umami目录中。 version: '3' services: umami: image: ghcr.io/mikecao/umami:mysql-latest network_mode: "host" environment: DATABASE_URL: mysql://[用户名]:[密码]@localhost:3306/[数据库名] DATABASE_TYPE: mysql HASH_SALT: [随便编写一段字符串] restart: always 接下来使用docker-compose构建容器，若下载速度较慢，请参考本文章：使用代理为docker-compose加速 # cd /home/umami # docker-compose up -d 至此容器构建完成，Umiami运行在http://127.0.0.1:3000下。 使用Nginx进行反向代理与跨域配置 在宝塔中新建网站，配置SSL后选择反向代理，配置如下： 之后在【配置文件】第7行后添加以下内容来配置跨域： ... root /www/wwwroot/xxx; add_header Access-Control-Allow-Origin * always; add_header Access-Control-Allow-Methods GET,POST,DELETE; add_header Access-Control-Allow-Header Content-Type,*; #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则 ... 若使用CDN服务，也需要在CDN处配置跨域。 添加站点与使用 访问刚才配置好的站点，使用默认账户名admin与密码umami进行登录。（题外话：写到这里被老师点起来回答CRC的过程了，记录一下，吓死去...） 选择【Settings】-【Websites】-【Add website】，填写网站名称与域名后，将获得的代码添加至网站 标签之前。如果以上步骤未出现差错的话，刷新Umami即可获得访问记录。（右上角球形图标可以切换语言） 结 类似于Umami这类网站访问统计系统还有很多，但它简单与轻量的特性非常符合我的需…

使用代理为docker-compose加速
type: item
date: 2021-09-11T11:13:55+08:00
description: 序 在生产环境中经常会使用docker-compose来部署项目，由于众所周知的原因，在国内网络环境中下载部分托管在第三方平台的docker镜像会有下载缓慢的问题。下面将介绍快速使用代理为docker-compose加速。 .env 文件 在Docker文档中提到Docker-compose支持加载当前工作目录下的.env文件，原文如下： Compose supports declaring default environment variables in an environment file named .env placed in the project directory. Docker Compose versions earlier than 1.28, load the .env file from the current working directory, where the command is executed, or from the project directory if this is explicitly set with the --project-directory option. This inconsistency has been addressed starting with +v1.28 by limiting the default .env file path to the project directory. You can use the --env-file commandline option to override the default .env and specify the path to a custom environment file. 综上，我们在与docker-compose.yml同目录下创建.env文件： HTTP_PROXY=proxy_url:port //例 HTTP_PROXY=127.0.0.1:1080 HTTPS_PROXY=proxy_url:port FTP_PROXY=proxy_url:port NO_PROXY=no_proxy_url 然后再运行docker-compose up即可。

关于FTP协议与FTP安全的浅谈
type: item
date: 2021-09-10T20:49:00+08:00
description: 序 这里是计算机网络课程的第一个作业，仅此记录一下并提出一些自己的思考。 FTP协议初步分析 测试环境 FTP Server 10.60.8.254 : 21/20 vsFTPD 3.0.3 username : mion password : password FTP Client 10.27.157.176 FTP 0.17-34.1.1 分析工具 Wireshark 3.4.4 Fillter : ip.addr == 10.60.8.254 and ftp and ftp-data 注：由于仅探究FTP的行为，在此忽略TCP相关报文。 在FTP主动模式下传输文件 用户行为 FTP客户端使用账户并在主动模式下连接FTP服务器 FTP客户端上传文件"file" FTP客户端断开连接 数据包分析 以下数据包为从Wireshark导出后经过整理产生的表格。 源 目标 报文 说明 10.60.8.254:21 10.27.157.176:59220 Response: 220 (vsFTPd 3.0.3) 经过TCP三次握手后，FTP服务器响应220代表准备连接 10.27.157.176:59220 10.60.8.254:21 Request: USER mion 发起 USER 指令 10.60.8.254:21 10.27.157.176:59220 Response: 331 Please specify the password. 响应331 准备校验密码 10.27.157.176:59220 10.60.8.254:21 Request: PASS password 发起PASS指令 10.60.8.254:21 10.27.157.176:59220 Response: 230 Login successful. 响应230 登录成功 10.27.157.176:59220 10.60.8.254:21 Request: SYST 发起 SYST 指令，获取FTP服务器系统类型 10.60.8.254:21 10.27.157.176:59220 Response: 215 UNIX Type: L8 响应 系统类型为UNIX 10.27.157.176:59220 10.60.8.254:21 Request: TYPE I 切换传输模式为 Binary模式 10.60.8.254:21 10.27.157.176:59220 Response: 200 Switching to Binary mode. 响应 200 成功 10.27.157.176:59220 10.60.8.254:21 Request: PORT 10,27,157,176,151,199 发起PORT指令，建立主动模式文件传输连接，客户端监听38855端口 10.60.8.254:21 10.27.157.176:59220 Response: 200 PORT command successful. Consider using PASV. 响应 200 并推荐采用被动模式 10.27.157.176:59220 10.60.8.254:21 Request: STOR file 发起 STOR 命令 要求存储文件为 file 10.60.8.254:21 10.27.157.176:59220 Response: 150 Ok to send data. 响应150 准备接收文件 10.27.157.176:38855 10.60.8.254:20 FTP Data: 5 bytes (PORT) (STOR file) 文件传输包，通过主动模式传输 10.60.8.254:21 10.27.157.176:59220 Response: 226 Transfer complete. 响应226 文件传输完成 10.27.157.176:59220 10.60.8.254:21 Request: QUIT 发起 QUIT 指令 10.60.8.254:21 10.27.157.176:59220 Response: 221 Goodbye. 响应 221 结束连接 总结分析 从以上信息我们可以得出FTP 主动模式工作方式如下： FTP Client 发起 PORT 命令，携带参数为监听端口。其中参数前四位为IP地址，后两位为端口号，计算方法： $$ 端口号=(第一位\times256)+第二位 $$ 其中，开启的端口号为某一随机端口，而非网络上流传的N+1端口。根据RFC 959，此观点也得到了证实: 3.2. ESTABLISHING DATA CONNECTIONS The mechanics of transferring…

[CTF]关于PHP5下foreach运行模式的讨论
type: item
date: 2021-09-08T20:09:00+08:00
description: 序 这是一道群里大佬出的红包题，由于我是非预期解题，这里给出一下出题人Write Up和自己的一些思考。 原题 PHP Ver : 5.3.29 <?php ini_set("display_errors", "On"); error_reporting(E_ALL | E_STRICT); $flag=0; $array = array('MXPUMXPUMXPUMXPU' => 1, 'NWPUNWPUNWPUNWPU' => 2, 'MXOvMXOvMXOvMXOv' => 3,'NWOvNWOvNWOvNWOv' => 'phpinfo();'); $ref = &$array; if (isset($_GET['data_key']) && isset($_GET['data_value'])) { $data_key = $_GET['data_key']; $data_value = $_GET['data_value']; if (preg_match('/MX|PU|NW|Ov/i', $data_key)) { die('nonono'); } else{ foreach ($array as $key => $value) { if ($flag===0){ unset($array['NWPUNWPUNWPUNWPU']); $array[$data_key] = $data_value; $flag=1; } if($key=='NWOvNWOvNWOvNWOv'){ call_user_func('assert',$value); die(''); } if (current($array) === false) { call_user_func('assert',$value); } } } } else{ highlight_file(__FILE__); } 题解 注意到是php版本5，用了foreach方法，注意到php5中数组和php7存在区别，具体可见： https://stackoverflow.com/questions/10057671/how-does-php-foreach-actually-work/14854568#14854568 https://www.phpinternalsbook.com/php5/hashtables/hash_algorithm.html 了解到hash算法是djbx33a后，考虑hash碰撞。由于该hash算法的特性，两两⼀组进行碰撞，碰撞出array_key=O6Q4O6Q4O6Q4O6Q4. POC static inline unsigned long zend_inline_hash_func(const char *arKey, unsigned int nKeyLength) { register unsigned long hash = 5381; /* variant with the hash unrolled eight times */ for (; nKeyLength >= 8; nKeyLength -= 8) { hash = ((hash << 5) + hash) + *arKey++; hash = ((hash << 5) + hash) + *arKey++; hash = ((hash << 5) + hash) + *arKey++; hash = ((hash << 5) + hash) + *arKey++; hash = ((hash << 5) + hash) + *arKey++; hash = ((hash << 5) + hash) + *arKey++; hash = ((hash << 5) + hash) + *arKey++; hash = ((hash << 5) + hash) + *arKey++; } switch (nKeyLength) { case 7: hash = ((hash << 5) + hash) + *arKey++; case 6: hash = ((hash << 5) + hash) + *arKey++; case 5: hash = ((hash << 5) + hash) + *arKey++; case 4: hash = ((hash << 5) + hash) + *arKey++; case 3: hash = ((hash << 5) + hash) + *arKey++; case 2: hash = ((hash << 5) + hash) + *arKey++; case 1: hash = ((hash << 5) + …

使用ESP8266+RC522+MG995低成本改造宿舍门禁支持NFC刷卡与远程控制
type: item
date: 2021-09-08T17:40:00+08:00
description: 序 这是一个从刚入学就挖下的坑，宿舍老旧的门锁与会捉迷藏的钥匙总把我锁在外面，室友有时也没有那么可靠。于是准备把门锁做非破坏性的改造，支持上手机控制。后来又考虑到需要在断网的时候也能够正常访问，又加入了NFC刷卡开门。由于东西仅限自娱自乐且宿舍楼道有完备的安防监控，本项目没有准备任何访问控制。以下是实现的过程。 本项目源码已打包至https://github.com/MoeMion/Magic_Door/. 材料准备 ESP8266开发板 整个系统的控制中枢，支持Wi-Fi连接并且附带丰富的引脚，常用于物联网开发。在这里我选择了CH340处理器的版本，并在Arduino IDE上进行编程开发。（关于Arduino IDE与CH340驱动的问题可以通过搜索引擎快速解决） 价格：13 元 附ESP8266引脚定义图示.注意，D0(GPIO16) 仅能用于GPIO读写，不支持PWM/I2C/OW信号传输。 MF RC522 模块 负责NFC通信。由于需求简单，这里选择的版本不支持加密卡读写。 价格：12 元 MG995舵机 用来拉动机械门闩。 价格：15元 注意：MG995电机有多个版本，请选购180°带限位版本，360°版本仅能通过PWM信号控制旋转时间，不能控制具体角度！由于舵机不正确使用易烧坏，请小心使用！ 引脚解释： 棕 : GND 红 : VCC （5V或3.3V均可，实测5V转动速度更快） 黄： PWM信号 MH-FMD 无源蜂鸣器 用于输出声音提醒。 价格：2元 杜邦线若干、热熔胶枪 连接各部分传感器。主要用到了公对母与母对母两种。 MG995舵机控制 装置的核心功能，需要将舵机物理连接到门闩。 实现目标 控制舵机旋转一定角度拉动机械结构开门，并在一定时间后复位。 开机时自动复位。 防止在开门时间内重复动作。 防止delay()函数带来的进程阻塞。 接线 ESP8266 MG995 VU VCC GND(临近VU) GND D3(GPIO0) PWM 参考代码 为实现防止进程阻塞，这里使用CxgJSTime库，GitHub Repo:https://github.com/chengxg/cxg-arduino-lib/tree/master/CxgJSTime 以下的代码仅为精简过后的该部分功能实现代码，仅供参考。 #include <Arduino.h> #include <Servo.h> #include <cxg_JSTime.h> Servo servo; //初始化舵机对象 JSTime jsTime; //初始化jstime对象 int servoStatus = 0; //标记舵机状态，0为放下1为拉起 void setup() { servo.attach(0, 500, 2500); //第一个坑，参数：PWM对应的GPIO接口,最小PWM信号,最大PWM信号，不同舵机参数不一样，默认参数不适用于本舵机。搜索引擎上大部分文档不会给出后两个参数！ servo.write(1); //参数为旋转的角度，通电后将电机复位，为0时偶尔会造成舵机卡死 } void opendoor() { if(servoStatus){ return; } servoStatus = 1; //标记舵机升起 servo.write(90);//舵机旋转90度，拉起门栓。实测90度够用，若长度不够可以改成180度 buzzersuccess(); //控制蜂鸣器播放成功提示音 int timeId = jsTime.setTimeout([]() { servo.write(1); //复位舵机 servoStatus = 0; //标记舵机放下 }, 10000); //延迟10秒,舵机复位，放下门栓 } void loop() { jsTime.refresh(); //刷新jsTime对象 } Web控制 通过无线网络接入来控制舵机开关。 实现目标 使用ESP8266WiFi库接入无线局域网。 使用ESP8266WebServer库实现WebServer以相应请求。 实现开门、心跳检测、重启、关闭面板LED灯等操作。 网络接入 ESP8266模块仅支持2.4G的Wi-Fi连接。此外在连接到无线路由器后需要绑定IP地址。若需要外网访问的话还得进行内网穿透。在这里我使用部署在宿舍的树莓派进行转发。 参考代码 #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> ESP8266WebServer web(80); //初始化web对象 void setup(){ //连接网络 WiFi.begin("SSID", "PASSWO…

为网站增加PWA支持实现原生应用体验
type: item
date: 2021-08-22T19:34:00+08:00
description: 序 前些时间用Web写了一个简单的物联网控制程序，本来想是不是需要打包成APP然后发布。后来发现了PWA能够直接将网页添加到各种设备中来实现原生应用的功能如发送通知、离线查看、渐进式加载等。PWA可以将各类网页都“打包”成原生应用，包括单一网页或者Typecho博客，以下，将会拿本博客举例实现PWA的简单应用。 什么是PWA(渐进式 Web 应用) PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。PWA 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。 简单理解，PWA可以将Web应用转化成能够在多平台设备上使用的原生应用程序并且具有和原生应用接近的交互体验，无需下载直接安装。 注意：PWA并不是一种单独的技术，而是多项Web技术集成的Web App，其核心技术包括App Manifest、Service Worker、Web Push等。 快速为网站配置PWA 以下将简单阐述如何快速为网站添加PWA支持，内容较为简单且没有发挥出PWA的全部功能，若需要更深入研究请见文末的拓展阅读。 配置HTTPS Service Worker必须运行在HTTPS或本地环境下，所以开启PWA的前提是配置好站点的HTTPS！！！在这里不再赘述。 制作应用图片 PWA需要为APP注册一个ICON，这里使用和网站favicon相同的图标，并且推荐将图片的分辨率保证在256x256以上！ 配置Manifest Manifest是一份用JSON记录网站信息的清单，其中包含了应用的标题、图标的大小与路径、加载页的背景颜色等，只有编写了这份清单浏览器才能正确处理Web App信息。在编写Manifest时会发现有不同拓展名，如manifest.webapp、manifest.json，但是在W3C规范中规定了其标准拓展名应为.webmanifest以下是我编写的一份Manifest示例： { "background_color": "#fff", //Web App启动时的背景颜色，可以使用预设的一些颜色名字如red,blue等，或者直接使用HEX颜色值如#66ccff(天依蓝) "description": "Describe your site.", //Web App的描述，这里的内容将会在安装时展现 "display": "fullscreen", //Web App展示的方式，可选的值有fullscreen,standalone,minimal-ui,browser等，具体含义请见文末拓展阅读 "icons": [ { "src": "icon.png", "sizes": "192x192", "type": "image/png" } ], //这里举例了应用图片的配置，可以配置多个图标！ "name": "Awesome fox pictures", //应用的名称，在安装时展示 "short_name": "Foxes", //缩略名，一般在添加到桌面之后会展示这个名字 "start_url": "/" //启动后进入的 } 然后将本文件保存为manifest.webmanifest并放置在网站根目录，并在网站 标签内添加以下内容： Safari浏览器对PWA支持并不完善，如果需要正确的展示PWA应用，需要将以下代码根据实际情况调整后添加在 标签内： 注册Service Worker实现A2HS 我们需要Service Worker来处理安装A2HS(Add to Home screen)与缓存事件，通常情况下A2HS事件会由浏览器自行处理，但是某些情况下我们想要自己控制这个行为来引导用户安装PWA应用。 首先编写index.js，这部分内容也可以直接编写在网页的 标签中。 // 注册Service Worker来使网站离线工作 if ('serviceWorker' in navigator) { navigator.serviceWorker .register('/sw.js') //Service Worker文件路径 .then(() => { console.log('Service Worker Registered'); }); } // 提醒用户安装PWA应用,如果您不想这样，可以直接使用showInstallPromotion(); let deferredPrompt; const addBtn = document.querySelector('.add-button'); addBtn.style.display = …

一些常用的设计相关素材与工具网站
type: item
date: 2021-08-12T20:08:00+08:00
description: 序 以下是个人常用的一些美术设计相关素材与工具网站。 插画类 unDraw.co 一个优秀的免费插画网站，可以自定义插画颜色并支持下载SVG与PNG格式图片。 地址：https://undraw.co/ Delesign 优秀的插画与图标库，素材可免费商用，支持PNG与SVG格式下载。 地址：https://delesign.com/free-designs/graphics/ manypixels 也是免费且可自定义色彩，筛选功能也比以上两款好用，支持SVG与PNG图片下载。缺点是画风不统一。 地址：https://www.manypixels.co/gallery Humaaans 人物插画生成器，支持自定义人物的各种部分与动作！ 地址：https://www.humaaans.com/ Scenic Background Animations 60+风景插画合集，不同插画分别带有不同时段的图片，并且可以一键下载全套插图，真的有被其画风惊艳到。 地址：https://www.pixeltrue.com/scenic-illustrations 图标类 ICONFONT 阿里巴巴旗下图标库，非常好用。 地址：https://www.iconfont.cn/ ICONS8 丰富的素材站，支持图标、插画等各样设计素材下载。 地址：https://icons8.com/ 背景图 图鱼 大量好用的背景纹理素材。 地址：https://www.hituyu.com/ Cool Backgrounds 支持五种样式的背景生成器，样式较少不太实用。 地址：https://coolbackgrounds.io/ Wicked Backgrounds 波浪背景生成器，功能强大。 地址：https://wickedbackgrounds.com/ Haikei 功能丰富多样的背景生成工具，支持随机生成手残党福音。 地址：https://app.haikei.app/ 色彩 Picular 输入任意字符自动生成相关色卡，非常强大且解决配色难题。 地址：https://picular.co/ 100 Mesh Gradients 提供100张渐变图片素材，可以打包下载，果风浓浓！ 地址：https://www.meshgradients.design/ Mesh 支持自定义生成美丽的渐变图片。 地址：https://meshgradient.com/ 工具类 Pixel Map Generator 万能的地图生成器，在使用此工具时要注意政治相关问题！ 地址：https://pixelmap.amcharts.com/ Removebg 快速高效的抠图工具，非注册用户可以下载到的图片也拥有不错的画质。 创客贴抠图 国内的快速抠图工具，需要登录注册。质量也非常高。 Bigjpg 图片无损放大工具，支持API可以进行二次开发！ Img.top 图片无损压缩工具，支持jpg,png,gif格式。最大支持单文件5M. DocSmall 文件无损压缩工具，支持jpg,png,gif,pdf格式。最大支持单文件25M. Toools.design 设计资源收集网站，包括设计需要使用的各种资源。 CodeToImg 将代码转换成图片，支持PNG,JPG,SVG等多种格式。程序开源可自部署！

在宝塔下使用ngx_waf增强WAF防护性能/防CC/开启5秒盾
type: item
date: 2021-08-11T14:59:00+08:00
description: 序 由于曾经被黑恶势力痛揍过，至今对CC Flood无法释怀以至于产生了PTSD。每次装网站都会好好折腾一下软防来尽量减少被攻击的损失(虽然我的孤岛并不会有人造访) 。事实上，DDoS防御是一项系统工程，且更多体现在资源的较量上。针对网络层的攻击拼带宽与流量，针对七层的攻击则拼架构与性能。真正在部署DDoS防御时，运营商与机房级别的硬件防御才是真正的主力，但是其费用之高昂不是一般用户所能承担。于是部署在应用层的软防成为大多数建站者的选择。 众所周知，宝塔面板有商用的Nginx防火墙插件（要钱），具有丰富的WAF(Web Application Firewall)功能，但是其防CC能力在面对攻击时形同虚设，使用简单的CC工具就可以轻松实现503 Page。而较老的httpguard、ngx_lua_waf等均已年久失修。偶然间在Github上发现了ngx_waf后折腾了一下发现确实不错。 NGX_WAF简介 方便且高性能的 Nginx 防火墙模块。(以下内容来自原项目介绍) 为什么选择 ngx_waf 功能齐全：「网络应用防火墙」的基本功能都有。 安装方便：大多数情况下你可以直接下载使用预构建的模块，而不是编译代码。 使用方便：配置指令简单易懂，不用看文档都能猜到大概是什么意思。 规则灵活：提供高级规则，将动作（如拦截或放行）和多个条件表达式组合起来。 高性能：经过较为极限的测试，启动本模块后 RPS（每秒请求数） 降低约 4%。测试说明和结果见使用文档。 功能 SQL 注入防护（Powered By libinjection）。 XSS 攻击防护（Powered By libinjection）。 支持 IPV4 和 IPV6。 CC 防御，超出限制后自动拉黑对应 IP 一段时间。 IP 黑白名单，同时支持类似 192.168.0.0/16 和 fe80::/10，即支持点分十进制和冒号十六进制表示法和网段划分。 POST 黑名单。 URL 黑白名单 查询字符串（Query String）黑名单。 UserAgent 黑名单。 Cookie 黑名单。 Referer 黑白名单。 高级规则，将动作（如拦截或放行）和多个条件表达式组合起来。 相关链接 使用文档：https://docs.addesp.com/ngx_waf/zh-cn/ GitHub：https://github.com/ADD-SP/ngx_waf 总结 一个用C构建的高效率Nginx防火墙，开发者积极维护(在写稿的时候就更新了3个版本导致不得不反复修改)，并且支持开启5秒盾，实测抗CC性能优秀！ 安装 以下内容源于官方文档和自己的折腾记录，仅供参考！ 环境 CentOS 7 Nginx 1.21.0 宝塔 7.6.0 ngx_waf v7.0.0 Current 如果您的环境与我相同，以下安装指令可以照抄，反之请自行检查相关指令。 安装过程 首先创建临时的工作目录，并将项目拷贝到本地。 mkdir /root/nginx #临时工作目录，这个在后面会用到 cd /root/nginx git clone https://github.com/ADD-SP/ngx_waf.git #获取最新版本的ngx_waf，也可以直接去Release找以往的版本 cd ngx_waf git clone https://github.com/libinjection/libinjection.git inc/libinjection nginx 提供两种安装模块的方式，即「静态链接」和「动态加载」，通过两种方式安装的模块也分别称为「静态模块」和「动态模块」。 你可以通过运行脚本 assets/guide.sh 来选择使用静态模块还是动态模块。 sh assets/guide.sh # It is recommended that you use dynamic modules. # 如果输出上面这行则建议使用动态模块。 # It is recommended that you use static modules. # 如果输出上面这行则建议使用静态模块。 在宝塔环境下得到的推荐是静态模块，实际在折腾过文章介绍的动态模块后均会出现奇怪的错误，于是在后文介绍的是静态模块安装。 到这一步我们需要开始进行编译，这里可能会涉及各种依赖问题如gcc等，由于不同环境的依赖问题不一样，这里就不再赘述，请自行通过搜索引擎解决。 在搞定依赖问题后需要获取当前nginx的configure 脚本的参数，在宝塔环境下输入以下指令即可获得。 /www/server/nginx/sbin/nginx -V 得到以下内容，这里将configure arguments: 后面的内容记录下来，并在结尾加上…