标签: 前端

一次简单的 webpack 验证探索

前阵子在通过 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"
酌情添加 danmakuhigh_qualitysandbox 等。

Youtube

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

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

其它

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