前面写过一篇文章介绍了不买高防 IP，照样抵挡 DDoS 攻击（IP 篇），如果攻击的是域名（CC），那么...
本文适用场景：攻击的是 web 网址而非 IP，来源有许多各地的 IP 地址，每个 IP 地址每小时只有若干请求，但整个网站每分钟有数万请求量。
《小白鼠A》（贵）
阿里云有一款产品叫“Web 应用防火墙”，开通并接入云产品，试用按量付费即可。
在防护配置-Web核心防护 中可配置各种规则，譬如：
“自定义规则”可添加网址/UA/IP/Cookie/等中包含某些关键词的请求；
“区域封禁”可按地区来限制请求；
另外还有“CC防护”等各种实用规则。
添加规则后记得关联实例。
配置完成后可在总览页面查看请求情况，如果攻击停止可关闭防火墙。
试用了12小时，平均每分钟请求2-5万次，消耗 15000SeCU，费用大概是750元。
《小白鼠B》（推荐）
阿里云有一款产品叫“边缘安全加速 ESA”，开通接入域名（注意填写域名时不要写 www）。
创建购买成功后会有一个 CNAME 域名，解析生效。配置 HTTPS 证书。
打开“我正在遭受攻击”，开启后站点进入严格防护模式，默认对所有 HTTP 请求做滑块挑战。这是非常能节省费用的操作，实测开启与不开启的数量相差20倍（具体视攻击强弱）。
另外，ESA 自带的“安全防护-WAF”中若想根据 URL 中包含某个关键词来拒绝请求，需要升级套餐。可以直接在“规则-重定向”设置 302 跳转也能达到类似的效果，但是节省流量的最好办法还是开启滑块。
费用的话，大部费用是由“客户端请求到边缘加速服务器的流量”和“边缘加速服务器响应给客户端的流量”组成的，而且滑块页面不计入流量。可免费试用。
在开启滑块的情况下，1分钟产生10M流量，基础版包含的50GB可以用3天。标准版（500GB）375元可以用一个月。（以我站实测为例，各站情况不同）。
具体费用在“计费管理-套餐管理-套餐总量 (月)-
”查看。超过套餐的流量会使用CDN流量包抵扣。
ECS 获取客户端 IP 的问题有两种解决方案，1. 设置四层代理分析（企业版），2. 设置重定向规则，重定向到直接解析到该网站的另一个域名。
为了尽量减少滑块对用户体验的影响，建议加白名单：ESA-站点-安全防护-WAF-白名单规则，譬如添加省份规则，跳过全部规则（包括滑块）。
其它问题：滑块会拒绝蜘蛛？
其它相似产品：Cloudflare、腾讯云 EdgeOne。
----------------下面是停站维护时显示临时页面的做法----------------
被攻击期借用阿里云 OSS/CDN 显示“维护中”页面的方法。
1.
首先让 AI 快速生成一个维护中的页面，上传到 OSS。
虽然这个文件有一个对应的 CDN 链接，但是域名解析使用“显性 URL”模式并不能正常访问到这个页面。
2.
在阿里云 CDN 添加一个域名（也就是网站域名），会生成一个 CNAME 域名，网站域名 CNAME 到这个域名上。
配置这个 CDN 域名的 OSS 实例、HTTPS 等信息。
这样生效后，访问网站域名就能请求到这个 OSS 上了。
3.
但是它并不像网站一样有默认文档，需要添加重写规则。
打开 CDN-域名管理-缓存配置-重写访问URL，添加，添加重写规则。
例：如果目标页面路径是 https://域名/index.html，那么重写规则就是：
^/(?!.*index\.html$).*$也就是把所有除 /index.html 以外的路径全部重写到 /index.html。
4.
下一步只要观察这个域名的实时流量和带宽，如果攻击停止了，将域名解析回 ECS。
CDN-统计分析-实时监控-访问数据-选择域名-查询。
以下列出本人所遇到的情况及处理方法，肯定不全，但都有用。
使用系统自带清理工具进行清理
Windows 7 / 8 / 8.1 / 10：在 C 盘上点击右键属性 - 磁盘清理 - 清理系统文件 - 视情况勾选 - 确定
Windows 11：在 C 盘上点击右键属性 - 详细信息 - 临时文件 - 视情况勾选 - 确定
关闭“传递优化”
设置 - Windowx 更新 - 高级选项 - 传递优化，关闭“允许从其他设备下载”
其实前面说到的清理临时文件中已经包含了“传递优化文件”，所以这里按个人喜好选择是否关闭。
更改虚拟内存路径
可以将虚拟内存路径更改为非系统盘，但建议是固态硬盘。
关闭系统还原
当遇到系统问题时，如果你喜欢重装系统，而不是系统还原，那么可以关闭它。
更改桌面、文档、下载等用户文件夹的位置
将这些目录路径更改到非系统，但仍然建议是固态硬盘。以 Windows 11 的桌面目录为例：
打开资源管理器 - 主文件夹，右键点击“桌面”属性，切换到“位置”，移动。
将软件安装到其它盘
有些电脑管理软件有软件迁移功能，但我还是建议先卸载软件，再安装到其它盘符。
将软件文档路径更改到其它盘
如果不想把软件安装到其它盘（譬如只有C盘是固态硬盘），那么可以将文档路径更改到其它盘，譬如：
微信：☰ - 设置 - 文件管理 - 更改
QQ：☰ - 设置 - 存储管理 - 更改存储路径（注意是聊天消息那个）
企业微信：头像 - 设置 - 存储管理
钉钉：头像 - 设置与隐私 - 通用 - 缓存目录
千牛：设置 - 数据存储文件夹
清理浏览器缓存
Chrome：┇ - 设置 - 隐私与安全 - 删除浏览数据
Edge：… - 设置 - 隐私、搜索和服务 - 删除浏览记录 - 选择要清除的内容
Firefox：☰ - 设置 - 隐私与安全 - 历史记录 - 清除历史记录
VMware 虚拟机
在已安装的镜像上点击右键 - 管理 - 清理磁盘
把已安装的镜像复制到其它磁盘，再添加到 VMware 中，删除原镜像文件。
更改 Navicat 数据库备份目录
如果你的 Navicat 启用了自动运行的备份任务，那么可以更改备份路径。
在连接上点击右键编辑连接，切换到高级，更改设置位置。
SQL Server 数据库文件瘦身
若 SQL Server 数据目录（C:\Program Files\Microsoft SQL Server\MSSQL16.MSSQLSERVER\MSSQL\DATA）中有很多较大的数据库日志文件（.ldf），可以按需采取以下措施：
使用 SSMS 连接到你的 SQL Server 实例；数据库恢复模式设置为“简单”；右键点击要压缩的数据库，选择“任务”->“收缩”->“文件”，选择“日志”，在“释放未使用的空间前重新组织页”一项中设置为 0MB，然后点击“确定”按钮。
最后推荐一款免费软件 TreeSize Free，可以查看磁盘中各目录和文件占用空间大小，小白不要乱删文件哦，删错了可就得重装系统了。
一年前记录过浏览器上如何下载小鹅通的课程视频，现在发现那个插件已经不能用了，所以重新整理了一下，下载过程比上次简单多了。
插件还是那只可爱的小黄猫
GitHub 地址：https://github.com/xifangczy/cat-catch
浏览器扩展安装地址：Chrome / Edge / Firefox
与之前相比，功能改进了不少：
“从头捕获”，不需要手动拖动进度条，生怕没有录制完全。但是实际使用还是会丢失一部分开头，希望下个版本改进；
“使用 ffmpeg 合并”可以自动合并捕获的视频和音频，下载得到的是一个完整的视频文件；
“自动跳转到缓冲尾”可以不间断加载、节省录制时间，对下载非直播画面非常有用；
可以设置播放速度，点击扩展图标，在“其他页面 / 媒体控制”中可以设置。但是有了“自动跳转到缓冲尾”，我觉得设置播放速度这个功能可有可无。
开始录制：
在浏览器上安装扩展后，打开需要录制视频的页面，点击缓存捕获：
然后在面板上点击“从头捕获”：
插件就自动开始从头播放并记录缓存了。
建议勾选“完成捕获自动下载”、“使用 ffmpeg 合并”。
如果是录制“非直播”，建议勾选“自动跳转到缓冲尾”。
另外两个选项“始终从头捕获”、“清理多余头部数据”我没有深入研究，有兴趣的自己研究下。
播放完成后，会自动打开一个“猫抓 cat-catch”的网页，自动使用 ffmpeg 进行转码与合并。
完成后自动下载该文件。
提示：如果要继续捕获其它视频，请先关闭那个“猫抓 cat-catch”网页，否则捕获完成后无法下载。
本文基于 manifest v3
插件使用 Web 技术开发
浏览器提供额外的插件 API
插件与网页分离，运行在一个独立的环境中
插件 API 功能
管理 Tabs、窗口、历史记录、书签、Cookies、下载、浏览数据、通知、网站权限
管理浏览器的外观和感觉 - 背景、主题、右键菜单、新标签页、启动页面
定制 DevTools
向网页注入脚本，与网页通信，与系统中的 Native 应用程序通信
修改/监听发送的 HTTP 请求/接收的回复
插件构成
| 结构 | 功能 | 调用 API | 操作 Dom | 进程 |
| manifest | 配置文件 | - | ||
| popup | 弹出对话框 | 所有 | Extension process | |
| option page | 用户使用的设置页面 | 所有 | ||
| background script | 后台脚本 | 所有 | 禁止？ | Extension process |
| content script | 内容脚本（注入到网页中） | 有限 | 允许 | Renderer process |
* 即便 content script 是注入到网页中的，而且是运行在 Renderer 进程（与主网页相同的进程），但是它们仍运行在不同的世界（world）。主网页运行在 main world，插件的 content script 运行在 isolated world。比如说 main world 中有一个变量，它在 isolated world 中是访问不到的，但是如果修改了 dom，对其它世界是有影响的。
将 Chrome 插件迁移到 Edge
移除 Chrome 独有的 API（如调用 Google 账户）
移动 update_URL 字段（如果是从 Chrome 商店直接下载的包会有这个字段）
改名 Chrome 相关的文字（插件名称、描述文字）
参考文献
本文过程较为复杂，且部分内容已无法实现，建议点击这里查阅最新的操作方法！
前言：本文操作需要你具备浏览器安装和使用扩展插件的能力、以及简单的使用命令行的能力。
第一步：下载视频
首先我使用 Edge 浏览器（Chrome 操作类似，不过安装扩展需要科学上网）。
2023 年初的时候，用 FetchV 这个扩展是非常方便的，它会自动嗅到网页中的视频，即使没有嗅到也可以用录制的方式来保存。
但到了过了一两个月发现 FetchV（及其马甲）经常打不开，或者无法嗅到视频流，更别提录制了。
所以我找到了另一款专业视频下载神器：
当然它的马甲们用法也是大同小异，主界面是这样的：
开启捕获，同意下载多个文件，然后播放视频，耐心等待。
心急的朋友可以用修改播放速度的扩展（如 视频加速减速控制），例如用 16 倍速，那么一个 16 分钟的视频用 1 分钟就播放完成了。（或者在 F12 的控制台中使用 JS 代码加速：document.querySelector('video').playbackRate = 16; ）
等小浮框提示“捕获完成 点击下载”的时候就可以保存到磁盘上了。
第二步：音频修复
下载后它会有两个 .mp4 文件保存到电脑上，其中较大的是视频部分，较小的是音频部分。
但是有个小问题是，这个音频文件用 Windows 自带播放器播放正常，用 potplayer 等第三方播放器或者一些视频编辑软件播放就会有问题。
我在 Microsoft Store 中找了一款叫 Movie Maker - Video Editor 的应用，
在这个软件中添加刚才的只有音轨的视频文件会提示转码，转码后的 .mp4 文件音轨就正常了。
具体步骤是依次点击“Create New Project”，“Add clip”，“Photo/Video”，选择文件后“Transcode”，保存以后默认会在文件名后加上“ (Transcoded).mp4”。
第三步：音视频合成
接下来是合成视频和音频，将视频文件命名为 v.mp4，音频文件命名为 a.mp4。
在 FFmpeg 官网下载 Windows 版，然后使用这个命令从音频文件中提取音轨：
ffmpeg -i a.mp4 -vn -acodec copy a.aac再用这个命令将 v.mp4 的视频和 a.aac 的音频合成一个新的文件
ffmpeg -i v.mp4 -i a.aac -c:v copy -c:a copy -map 0:v:0 -map 1:a:0 output.mp4相比于其它的视频转换工具，ffmpeg 直接提取合并的速度是极快的。
Tips：
小鹅通中学习过的课程再次打开会从上次关闭的地方开始播放，这会导致捕获不全，可以将进度条手动拖到末尾，这样它会停止播放，再次刷新就会从头开始播放。
浮框中“点击下载”可能没反应，估计是在合成文件，过几秒钟多点几下，不会重复下载。
如果要下载的视频比较长或者比较多，可以像我一样在虚拟机里进行，把视频播放器的音量开到最大，把操作系统的声音关闭。
不知道从哪个版本的 Chrome 或 Edge 开始，我们无法通过 ctrl+v 快捷键将时间格式的字符串粘贴到 type 为 date 的 input 框中，我们想办法用 JS 来实现。
方式一、监听 paste 事件：
const input = document.querySelector('input[type="date"]');
input.addEventListener('paste', (event) => {
input.value = event.clipboardData.getData('text');
});这段代码实现了从页面获取这个 input 元素，监听它的 paste 事件，然后将粘贴板的文本内容赋值给 input。
经测试，当焦点在“年”的位置时可以粘贴成功，但焦点在“月”或“日”上不会触发 paste 事件。
方式二、监听 keydown 事件：
const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
event.preventDefault();
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
input.value = clipboardData.getData('text');
}
});测试发现报错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'getData')
Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')
看来 event 中没有 clipboardData 对象，改为从 window.navigator 获取：
const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
event.preventDefault();
window.navigator.clipboard.readText().then(text => {
input.value = text;
});
}
});缺点是需要用户授权：
仅第一次需要授权，如果用户拒绝，那么以后就默认拒绝了。
以上两种方式各有优缺点，选择一种适合你的方案就行。接下来继续完善。
兼容更多时间格式，并调整时区
<input type="date" /> 默认的日期格式是 yyyy-MM-dd，如果要兼容 yyyy-M-d 等格式，那么：
const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
input.value = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}以 text 为“2023-4-20”举例，先转为 Date，如果成功，再转为英国时间格式“20-04-2023”，以“/”分隔，逆序，再以“-”连接，就变成了“2023-04-20”。
当然如果希望支持中文的年月日，可以先用正则表达式替换一下：
text = text.replace(/\s*(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日\s*/, "$1-$2-$3");处理页面上的所有 <input type="date" />
const inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach((input) => {
input.addEventListener(...);
});封装为独立域
避免全局变量污染，使用 IIFE 函数表达式：
(function() {
// 将代码放在这里
})();或者封装为函数，在 jQuery 的 ready 中，或 Vue 的 mounted 中调用。
在 Vue 中使用
如果将粘贴板的值直接赋值到 input.value，在 Vue 中是不能同步更新 v-model 绑定的变量的，所以需要直接赋值给变量：
<div id="app">
<input type="date" v-model="a" data-model="a" v-on:paste="fn_pasteToDateInput" />
{{a}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
a: null,
}
},
methods: {
fn_pasteToDateInput: function (event) {
const text = event.clipboardData.getData('text');
const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
const att = event.target.getAttribute('data-model');
this[att] = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}
},
}
});
const vm = app.mount('#app');
</script>示例中 <input /> 添加了 data- 属性，值同 v-model，并使用 getAttribute() 获取，利用 this 对象的属性名赋值。
如果你的 a 中还有嵌套对象 b，那么 data- 属性填写 a.b，方法中以“.”分割逐级查找对象并赋值
let atts = att.split('.');
let target = this;
for (let i = 0; i < atts.length - 1; i++) {
target = target[atts[i]];
}
this.$set(target, atts[atts.length - 1], text); // vue2
target[atts[atts.length - 1]] = text; // vue3User-Agent 字符串不会进行更新以区分 Windows 11 和 Windows 10。
但我们可以使用 JS 进行客户端判断是否为 Windows 11：
navigator.userAgentData.getHighEntropyValues(["platformVersion"])
.then(ua => {
if (navigator.userAgentData.platform === "Windows") {
const majorPlatformVersion = parseInt(ua.platformVersion.split('.')[0]);
if (majorPlatformVersion >= 13) {
console.log("Windows 11 or later");
}
else if (majorPlatformVersion > 0) {
console.log("Windows 10");
}
else {
console.log("Before Windows 10");
}
}
else {
console.log("Not running on Windows");
}
});支持客户端提示 User-Agent 浏览器：
| 浏览器 | 通过客户端提示 User-Agent 区别？ |
|---|---|
| Microsoft Edge 94 及以上 | 是 |
| Chrome 95 及以上 | 是 |
| Opera | 是 |
| Firefox | 否 |
| Internet Explorer 11 | 否 |
本文写于 2021 年 7 月。
WebBrowser 不能改用 Chrome 内核。
在 .NET Frameworks 和 .NET Core 年代，常用的第三方组件有：WebKit.NET、CefSharp 等。
而并未找到适用于 .NET 5 的成熟的 Chromium 内核的浏览器组件。
不过还是推荐一款微软官方出品的 WebView2，需要安装 Microsoft Edge Canary 才能正常运行。