标签： 前端

前阵子在通过 Fofa 收集信息，发现了 Fofa-hack 项目。

一开始这个项目是登录抓取，但后来 Fofa 改了规则，限制了免费用户的访问总数。
于是，项目改为抓取网页上的链接，一次只能抓 10 条，通过 after / before 语法抓取更多之后的页面。当每页提升到 20 条时，访问里会出现一个 sign 验证参数，一段时间内无人解决。
再后来，项目引入了 webdriver，还有 fuzz 来提升抓取量。

我不太了解前端，在研究了 Fofa 的网页以及查了一些资料后，得知是 webpack。然后稍微逆了一下。与其说是逆向，不如说网站本身也没做复杂的混淆，防君子不防小人吧。

首先，验证参数是 sign，所以搜索 sign:

可以看到，这里跳到了一个 sortFun()，继续追踪这个方法。

可以看到，sortFun() 实际是对 GET 参数的 key 进行 sort，然后拼接一下，最后为字符串 createSign()。

现在，Fofa-hack 已经支持了 sign 计算，并删掉了其他抓取方法。
python 版可以在项目内看到：简单的实现

这个接口一次可以抓取 100 条数据，配合 after / before 语法几乎可以抓全数据。

---

其他：

1. 直到完成 PoC，才发现 app_id 是静态的，其实搜索 app_id 也能轻松定位到验证入口。
2. 全网搜索 app_id 的值，发现已经有人研究过 sign 的算法，不过是用 Go 写的。
3. 从前人的研究看，似乎还有 page 访问超过 100 页无法抓取的问题，不过我没有触碰到这个上限，具体情况不清楚。
4. 这个接口除了可以突破网页版单页条目上限，也许还有其他网页不支持的特性，概率比较低，有空可以再看看。

今天测试了一下文章内嵌视频，包括哔哩哔哩和Youtube，做个总结。

哔哩哔哩

直接使用官网的内嵌代码，视频会挤成豆腐块大小。网上的解决方案主要来自文章 《typecho文章挂载Bilibili视频响应式代码》 。

文章发布于 2019 年，采用的是固定 em，并做了好几种适配。到了 2021 年初，Chrome 88 新增支持 css 的 aspect-ratio 自适应比例，很快 Firefox、Safari 也支持该写法，所以可以改进为：

.iframe_video {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
}

内嵌视频代码稍作修改：

<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid={AID}&page=1&danmaku=0&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

添加 class="iframe_video" 。
酌情添加 danmaku、 high_quality 、sandbox 等。

Youtube

同样也可以使用 class="iframe_video" 调整。

Youtube 主要是官方播放器臃肿，使用 WP YouTube Lyte 插件，可在点击后再加载完整播放器。

其它

以上代码可以用于任何宽度撑满的模块，不局限于挂件类型。