New post: 记录阿里云OSS第一次受到流量攻击

_posts/original/2016-06-12-记一次朴实无华的Android API文档替换.md

@@ -5,12 +5,12 @@ title: "记一次朴实无华的Android API文档替换"
 author: 立泉
 mention: GFW Java
 date: 2016-06-12 +0800
-description: 使用浏览器查看Android SDK本地文件里的API文档，发现其在联网状态下加载速度极慢，而如果断开网络就正常了🤔。
+description: 使用浏览器查看本地Android SDK里的API文档，发现其在联网状态下加载速度极慢，而如果断开网络就正常了🤔。
 cover: 
 tags: Code Android Java GFW
 ---
 
-学习`Android`的过程中要参阅系统提供的应用开发接口`API`来实现所需功能，实际上在`Android SDK`本地文件中就有一份`HTML`版本的`API`文档，可以离线查看。但是当我用浏览器打开时却发现它们在联网状态下加载速度极慢，而如果断开网络就是正常的。考虑到墙，应该是页面中存在需要联网下载的`StyleSheet`或`Javascript`，而要连接的域名十有八九就是`Google`。
+学习`Android`的过程中要参阅系统提供的应用开发接口`API`来实现所需功能，实际上在本地`Android SDK`中就有一份`HTML`版本的`API`文档。但是当我用浏览器打开时却发现它们在联网状态下加载速度极慢，而断开网络则是正常的。考虑到墙的存在，应该是页面中有些需要联网下载的`StyleSheet`或`Javascript`，而要连接的域名十有八九就是`Google`。
 
 排查一番，加载缓慢的元凶是下面这段代码：
 

_posts/original/2019-06-11-基于非对称加密的HTTPS与SSH.md

@@ -7,7 +7,7 @@ mention: 公钥 私钥 证书
 date: 2019-06-11 +0800
 description: HTTP和HTTPS本质向下发送的都是明文，只不过HTTP数据包直接被TCP/IP传输，而HTTPS则是将数据包发给SSL，加密后再通过TCP/IP传输，其中基于证书的身份验证也是由SSL完成的。
 cover: 
-tags: Code HTTP HTTPS SSH GitHub
+tags: Code HTTP HTTPS 网络攻击 SSH GitHub
 ---
 
 介绍`HTTPS`和`SSH`之前需补充一些《密码学》里典型的`对称加密`与`非对称加密`概念，它们是加密通信得以实现的基石。

_posts/original/2020-09-24-下载腾讯视频Blob资源的尝试.md

@@ -15,7 +15,7 @@ tags: Code 下载 单雯 昆曲 牡丹亭 Blob M3U8 Downie You-Get IDM FFmpeg
 
 尤其在我爱上昆曲之后，会搜集很多别人分享的演出片段，这些分享并非随处可见，一旦下架就真的没有了。所以已经形成习惯，看到喜欢的内容第一个念头就是“赶快下载下来”。
 
-我对视频平台的不信任是和对硬盘可靠性的不信任同时出现的，开始意识到数据安全的重要性。几个月前把珍藏的200GB资源分类整理，本地和`OneDrive`各保存一份，我真的很害怕失去这些音视频和文档，因为可以肯定，其中一部分已经不可能在互联网上找到了。
+我对视频平台的不信任是和对硬盘可靠性的不信任同时出现的，开始意识到数据安全的重要性。几个月前把珍藏的200GB资源分类整理，本地和`OneDrive`各保存一份，我真的担心失去这些音视频和文档，因为可以肯定，其中一部分已经不可能在互联网上找到了。
 
 回到标题，起因是曾经在腾讯视频下载过一场[昆曲演出](https://v.qq.com/x/page/z0562bgb9s4.html){: target="_blank" }，最高分辨率`720P`用`IDM`下载成功。内容和画质都很满意，唯一遗憾是右上角的“腾讯视频”水印。一直反感国内视频平台滥用水印，如果是用户顾及版权自己加的尚且合理，而一个平台把水印强加到用户视频上，展现出的是十足傲慢。
 
@@ -33,19 +33,18 @@ tags: Code 下载 单雯 昆曲 牡丹亭 Blob M3U8 Downie You-Get IDM FFmpeg
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20200924/downie_mudanting.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="downie" }
 
-明明几个月前就是用`IDM`下载成功的，带着疑惑，开始搜寻可能的原因。排查一圈大概明白，它们现在常使用一种`Blob`播放机制，我专业并非这方面，但知道无论怎么隐藏最终一定会有链接指向视频真实地址。对于腾讯视频的`Blob`，是要找到隐藏的`M3U8`链接，即视频的分段资源列表（应该就是`IDM`解析到的那数百个2M分段），再逐个下载分段、转码合并。支持下载`M3U8`资源的软件有很多，但如何获取到腾讯视频的`M3U8`链接是要解决的问题。
+明明几个月前就是用`IDM`下载成功，带着疑惑开始搜寻可能的原因。排查一圈大概明白，现在流行一种`Blob`播放机制，音视频并非我擅长的专业领域，但知道无论怎么隐藏最终一定会有链接指向视频真实地址。对于腾讯视频的`Blob`，是要找到隐藏的`M3U8`链接，即视频的分段资源列表（应该就是`IDM`解析到的那数百个2M分段），再逐个下载、转码合并。支持下载`M3U8`资源的软件有很多，要解决的问题是如何获取到这个`M3U8`链接。
 
-一些博文提到要打开浏览器的`Developer Tools`，从数千个`URL`链接中筛选找到真实`M3U8`。我尝试一会，毕竟不是`Web`开发者，看得眼花缭乱，没找到。
-
-于是搜寻如何能以最简单的方式获取`M3U8`链接，还真有，从[这篇文章](https://www.jokerps.com/?p=4451){: target="_blank" }看到，已经有针对各个视频平台的`JS`脚本。
+一些博文提到可以打开浏览器的`Developer Tools`，从数千个`URL`中筛选找到真实`M3U8`。我尝试一会，毕竟不是`Web`开发者，看得眼花缭乱，没找到。
 
+于是搜寻如何能以最简单的方式获取`M3U8`链接，从[这篇文章](https://www.jokerps.com/?p=4451){: target="_blank" }看到，已经有针对各个视频平台的`JS`脚本。
 
 ```js
 // 腾讯视频
 javascript:var a=prompt(PLAYER._DownloadMonitor.context.dataset.title,PLAYER._DownloadMonitor.context.dataset.ckc?PLAYER._DownloadMonitor.context.dataset.currentVideoUrl:PLAYER._DownloadMonitor.context.dataset.currentVideoUrl.replace(/:.*qq.com/g,"://defaultts.tc.qq.com/defaultts.tc.qq.com"));
 ```
 
-以腾讯视频为例，在视频开始播放后执行这个脚本，通常是创建一个`Bookmark`书签，把这段`JS`作为`URL`填进去，这样只需点击该书签就可以执行它，获得`M3U8`链接。
+以腾讯视频为例，在视频开始播放后执行这个脚本，通常是创建一个`Bookmark`书签，把这段`JS`作为`URL`填进去，然后点击书签执行即可。
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20200924/js_get_m3u8_tengxun.jpg){: loading="lazy" class="clickable clickShowOriginalImg" alt="qq m3u8" }
 
@@ -66,6 +65,6 @@ https://defaultts.tc.qq.com/defaultts.tc.qq.com/A2vuJDIKrfbFxXWF-uFTN8txhLOQnlG_
 ffmpeg -i [url] -c copy -bsf:a aac_adtstoasc ~/Downloads/output.mp4
 ```
 
-下载后发现在手机播放器上会看到明显的拼接痕迹，而在电脑上却是正常的，试着用`HandBrake`以原参数重新编码，问题解决。
+下载后发现在手机播放器上会看到明显的拼接痕迹，而电脑端却是正常的，试着用`HandBrake`以原参数重新编码，问题解决。
 
 每次遇到这样的事情都觉得有趣，在一个陌生领域执行陌生操作出现陌生问题，因为不熟悉会逐个尝试各种可能的解决方法，运气好很快搞定，运气不好只能干着急，期盼“灵光一闪”，然后感慨“原来如此”。

_posts/original/2021-08-03-为博客添加站内搜索和暗黑模式.md

@@ -12,9 +12,9 @@ tags: Code Blog Google DarkMode 搜索
 
 > 2024年06月12日更新：站内搜索已由`Pagefind`实现，参见博文[《基于Pagefind实现静态博客站内搜索》]({% link _posts/original/2024-06-12-基于Pagefind实现静态博客站内搜索.md %}){: target="_blank" }。
 
-博客自2016年创建一直使用[Materialize](https://materializecss.com){: target="_blank" }作为UI框架，它实现了[Material Design](https://material.io/design){: target="_blank" }的几乎所有组件，但在三年前发布`v1.0`正式版后就不再更新。而`Material Design`本身却在不断进化，从过度强调层级阴影变得趋向扁平，所以切换到一个更有活力的现代MD框架势在必行。
+博客自2016年创建一直使用[Materialize](https://materializecss.com){: target="_blank" }作为UI框架，它实现了[Material Design](https://material.io/design){: target="_blank" }的几乎所有组件，但在三年前发布`v1.0`正式版后就不再更新。而`Material Design`本身却在进化，从过度强调层级阴影变得趋向扁平，所以切换到一个更有活力的现代MD框架势在必行。
 
-我并非`Web`开发者，对`HTML`、`CSS`、`JavaScript`和`Node.js`仅浅尝可用，花不少时间解决问题，终于用`Google`的[Material Design Components](https://github.com/material-components/material-components-web){: target="_blank" }完成重构。在继承原有设计的同时削减阴影、统一配色，使简洁淡雅风格更加协调，虽然还未达到设想中的完美状态，但以我当前审美来看，十分还是可以给八分的。而且正因为这次重构，我开始真正接触到`Web`端的开发思路和主流技术栈，之前计划中的`站内搜索`和`暗黑模式`也就顺便一起实现了。
+我并非`Web`开发者，对`HTML`、`CSS`、`JavaScript`和`Node.js`仅浅尝可用，花不少时间解决问题，终于用`Google`的[Material Design Components](https://github.com/material-components/material-components-web){: target="_blank" }完成重构。在继承原有设计的同时削减阴影、统一配色，使简洁淡雅风格更加协调，虽然还未达到设想中的完美状态，但以我当前审美来看，十分还是可以给八分的。而且因为这次重构，我开始接触到`Web`端的开发思路和主流技术栈，之前计划的`站内搜索`和`暗黑模式`也顺便水到渠成。
 
 ## 站内搜索
 

_posts/original/2024-03-07-解决阿里云OSS无CDN时的流量风险.md

@@ -3,11 +3,11 @@ layout: post
 categories: original
 title: "解决阿里云OSS无CDN时的流量风险"
 author: 立泉
-mention: 函数计算 账单
+mention: 云监控 函数计算 账单
 date: 2024-03-07 +0800
 description: 阿里云的OSS对象存储非常适合存放个人博客里的静态资源，但在使用这种便利服务的同时也伴随着流量攻击可能带来的巨额账单风险，是一把时刻悬在头顶的达摩克利斯之剑，不得不认真寻找对策...
 cover: 
-tags: Code Blog 阿里云 OSS 对象存储 Referer 函数计算 CDN
+tags: Code Blog 云计算 阿里云 OSS 对象存储 Referer 函数计算 CDN
 ---
 
 对个人博客而言阿里云的`OSS对象存储`服务非常适合存放诸如图片、视频、JS、CSS的静态资源，尤其非备案的海外站点，资源托管在国内云上是其在无法使用`CDN`的条件下加速访问的几乎唯一解，从我2年来的使用体验来看对其速度和稳定性都十分满意。

_posts/original/2024-11-25-记录阿里云OSS第一次受到流量攻击.md

@@ -0,0 +1,57 @@
+---
+layout: post
+categories: original
+title: "记录阿里云OSS第一次受到流量攻击"
+author: 立泉
+mention: 博客 对象存储
+date: 2024-11-25 +0800
+description: 昨天中午突然收到阿里云的报警短信，意识到预想中的情况发生了，拿出手机打开博客果然无法访问。倒是长舒一口气，看来提前配置的监控策略已经成功关闭OSS对外服务。
+cover: 
+tags: Code Blog 云计算 阿里云 OSS 对象存储 函数计算 网络攻击
+---
+
+自今年3月起静态博客开始托管在阿里云的`OSS`对象存储上，香港节点无需`ICP备案`而且速度尚可，从大陆访问比`GitHub Pages`稳定很多。主站因为备案要求不能放在大陆，字体、图片之类的资源文件不使用自定义域名则无此限制，所以为提升国内访问速度都被托管在阿里云杭州节点的`OSS`上。
+
+`OSS`的流量费用并不廉价，为规避可能的账单风险提前[用云监控设置过访问规则]({% link _posts/original/2024-03-07-解决阿里云OSS无CDN时的流量风险.md %}){: target="_blank" }，当每分钟流量超过200MB时触发报警，自动调用`函数计算`关闭`OSS`对外服务。我这样的小站点，监控用量、临时关站是应对低成本流量攻击最适合的策略。
+
+## 报警
+
+昨天中午突然收到阿里云的报警短信：
+
+![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20241125/warning_sms_thumb.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="Aliyun warning sms" }
+
+意识到预想中的情况发生了，拿出手机打开博客果然无法访问，倒是长舒一口气，看来提前配置的监控策略已经成功关闭`OSS`对外服务。
+
+## 解析
+
+去阿里云控制台翻看日志，发现在`12:29`~`12:25`的6分钟内对同一个字体文件有62万次请求：
+
+![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20241125/top_resource_thumb.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="Aliyun most requested resource" }
+
+主要来自4个北美/德国的`IP`地址：
+
+![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20241125/top_ip.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="Aliyun top client ip" }
+
+橘红色代表成功请求，绿色代表失败请求，可以看到在一个时间点后失败陡增，即`OSS`开始关闭对外服务：
+
+![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20241125/request_timeline.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="Aliyun request timeline" }
+
+结合阿里云给出的访问数据整理出以分钟为单位的时间线：
+
+
+| 时间            | 成功请求数 | 失败请求数 | 公网流出流量 |
+|-----------------|------------|------------|--------------|
+| 12:19～12:20     | 89         | 0          | 5.3MB        |
+| **12:20～12:21** | 4700       | 0          | **2.2GB**    |
+| 12:21～12:22     | 36455      | 0          | 17.0GB       |
+| 12:22～12:23     | 46944      | 7          | 21.8GB       |
+| **12:23～12:24** | 27255      | **339730** | 12.7GB       |
+| 12:24～12:25     | 2          | 172155     | 0.4MB        |
+| 12:25～12:25     | 4          | 2          | 0MB          |
+{: .should-wrap-table}
+
+从表格看，`12:20`～`12:21`公网流出流量超出预警值，但直到`12:23`～`12:24`才出现大量失败请求，与短信显示的报警时间`12:23:19`吻合。查询触发的`函数计算`日志，是在`12:23:26`执行关闭`OSS`对外服务。
+
+显然，报警时间晚了2分钟。我在`云监控`中设置的粒度单位是分钟，应该在`12:21`～`12:22`触发报警才对，事实证明`云监控`也并非实时，耸肩。
+
+总结起来，攻击持续5分钟，前3分钟畅通无阻，共62万次请求，其中11万次成功，消耗53GB流量和对应的25元账单。这种家庭带宽就能轻易发起的流量攻击对普通博主的成本伤害是挺大的，商业带宽并不廉价，接入网络需要谨慎配置监控策略，小心成为“一晚上被盗刷一套房”的都市传说主角🙄。

npm/src/component/table.scss

@@ -34,19 +34,42 @@ th,
 
 .table-wrapper {
     width: 100%;
+    // 表格宽度超出时滚动
     overflow: scroll;
     margin: calc(var(--mdc-typography-body1-font-size) - 0.5rem) 0;
+    // wrapper边框
     border: 1px solid var(--divider-color);
     border-radius: var(--post-inner-shape-round);
+
+    table {
+        // 有wrapper时不显示边框，由wrapper显示
+        border: none;
+        border-radius: none;
+        width: fit-content;
+        min-width: 100%;
+
+        th,
+        td {
+            // 有wrapper时设置单元格最小宽度，因为表格已经支持滚动
+            min-width: fit-content;
+            // 有wrapper时设置单元格不换行，方便滚动
+            white-space: nowrap;
+            line-break: normal;
+        }
+    }
 }
 
+// markdown转换的table，将由js移动到wrapper中
+// 无wrapper时表格不支持滚动，宽度为100%
 table {
     // 设置表格圆角必须将collapse设置为separate
     border-collapse: separate;
-    // border: 1px solid var(--divider-color);
-    // border-radius: var(--post-inner-shape-round);
+    // 确保没有wrapper也能显示边框
+    border: 1px solid var(--divider-color);
+    border-radius: var(--post-inner-shape-round);
+    // 没有wrapper时宽度100%，不支持滚动
+    width: 100%;
     border-spacing: 0;
-    min-width: 100%;
 
     * {
         @include text.basicText();
@@ -64,28 +87,28 @@ table {
         }
     }
 
+    // 表格一行
+    tr {
+        margin: 0;
+    }
+    // 单元格
+    th,
+    td {
+        margin: 0;
+        border-bottom: 1px solid var(--divider-color);
+        padding: 0.8rem 1rem;
+        text-align: left;
+        // 无wrapper时单元格宽度很小，自动换行
+        white-space: normal;
+        line-break: anywhere;
+    }
 
 }
 
-// 表格一行
-tr {
-    margin: 0;
-}
-
-// 单元格
-th,
-td {
-    margin: 0;
-    border-bottom: 1px solid var(--divider-color);
-    padding: 0.8rem 1rem;
-    text-align: left;
-    white-space: nowrap;
-    min-width: fit-content;
-    // text-overflow: ellipsis;
-}
 
 .align-right {
-    th, td {
+    th,
+    td {
         text-align: right;
     }
 }