通过 DevTools 绕过 SSR 抓包 B 站专栏正文接口
javascript html chromium devtools bac github bilibili api web
背景
- 最近没什么事做, 又回 BAC 看看有什么接口可以抓, 于是看到了陈年的专栏正文内容的 Issue #859
- 由于泽生自己是写前端的, 对于浏览器 DevTools 的各项调试工具还算是比较了解, 打算想办法把专栏正文的接口抓下来 :)
思路
- 由于专栏正文完整的内容在页面加载的时候就已经通过 SSR (Server-Side Rendering, 服务端渲染) 的方式通过
<script>标签注入到 HTML 网页中, 直接通过看 DevTools 的网络面板肯定是没用的
- 最直接的方法是找到专栏相关的 JavaScript 代码, 通过大脑在没有 SourceMap 的情况下沿着 bundle 逆向出接口, 这种方法对于泽生明显不可行, 其中一个原因是屏幕太小而源码太大 (-.-;)
- 另一个方法是通过伪造 SSR 不工作, 从而诱导页面脚本手动通过 API 去获取内容, 不过伪造的方法也比较麻烦, 但可行度相对较高 😆
- 关于如何伪造 SSR 不工作的现象, 就需要分析 SSR 是如何被使用的, B 站的 SSR 是通过向页面注入 JavaScript 代码实现的, 具体是在
window全局对象上加了个属性__INITIAL_STATE__, 具体结构需要具体页面分析 - 目标就是要在读取之前移除这个属性, 移除方法简单, 无非是直接
window.__INITIAL_STATE__ = undefined(或者任意无效值), 或者delete window.__INITIAL_STATE__, 别的 ES6 的反射之类的方法就不说了, 这不是重点 - 但这个脚本注入的位置就很恶心, 不在
<head>里面, 也不在<body>底部, 就刚好在读取__INITIAL_STATE__的脚本前面, 这使得无法使用篡改猴一类的用户脚本插件进行修改, 因为提供的用户脚本执行方式会出现还没写属性和已经读过属性的问题 (゜-゜) - 接着就是传统的 DevTools 调试面板, 但正常手动暂停脚本执行往往已经脚本执行完成了, 解决方法就是网络节流或者
<head>处用户脚本debugger语句 - 正好篡改猴高级设置允许用户脚本执行前暂停开始调试, 原理就是
debugger语句, 只要把脚本执行位置放在<body>之前就有机会打断点把__INITIAL_STATE__删掉 💥
实践
- 使用 Chromium (理论上 Firefox 也可以, 但其 DevTools 泽生用起来不是很舒服) 安装篡改猴扩展 🐒, 新建一个用户脚本, 里面是否写内容无所谓, 执行位置为
document-head, 然后在篡改猴的设置里面把调试脚本打开 - 接着打开一个使用 SSR 的网页, 不过注意要保持 DevTools 打开, 否则调试就不会生效, 页面脚本自动暂停后, 你将看到你的脚本和该页面已经加载的内容, 包含 HTML 网页, JavaScript 代码, 和 CSS 文本
- 你所需要做的就是检查 SSR 的情况是否如你所想的那样, 放在
window.__INITIAL_STATE__那里, 如果是直接渲染成页面元素的话, 抱歉上帝来了也救不了你, B 站 JavaScript 前端可不会管 HTML 的事情 🫠 - 如果在
__INITIAL_STATE__里面, 恭喜, 你可以直接继续了. 如果不是, 那就检查一下当前页面路径之类的, 看看有没有不同版本的相同内容, 毕竟专栏分新旧版, 专栏网页也分新旧版, 往往旧版能带来惊喜 ✨ - 找到了合适的
__INITIAL_STATE__, 你只需要在原地打个断点, 然后继续执行脚本, 页面就会在那里暂停, 接着执行下一步, 此时赋值完成, 可以开始改属性了 - 切到控制台, 执行那句期待已久的语句:
window.__INITIAL_STATE__ = undefined, 大功告成! 🎉 - 恢复页面脚本执行, 你会看到页面好像卡了一下, 然后文章还是加载了出来, 这个时候就可以看看网络面板的情况了
- 可以观察到, 多了一个你从来没见到过的叫
view的野生请求, 点开详细, 复制地址, 记下参数, 保存响应, 发 Issue 去也~ - 如果这时回过头看控制台, 你会发现有这么一段错误十分显眼, 无法读取
undefined的属性, 正是由于这个错误, 加之 B 站程序员的细心, 你才得以看到文章和抓到接口
后话
- Issue 已经发了, 估计写到文档里也是泽生的事情 🥴
- 这样的因 SSR 而省下的相关接口应该也有很多, 一个个慢慢打断点抓也不是个长久之计, 毕竟一旦直接渲染成 HTML, 就没的办法了 😮💨
- 学习正经的前端知识还是有利于不正经的逆向的 📚
- 希望大家都能来一起帮忙, Make BAC Great Again! 🥂