强制打开哔哩哔哩番剧出差空间的JS脚本
by Aobanana
本文精简提炼于我的博客
0x1 前言
B站对哔哩哔哩番剧出差账号进行了IP的屏蔽，当我们访问这个账号的空间时，会显示
实际上B站只屏蔽了一个API的请求
也就是屏蔽了https://api.bilibili.com/x/space/acc/info?mid=11783021
访问这个URL，服务器返回
而对其他的API都没有进行任何的屏蔽，所以理论上我们可以通过修改前端的逻辑，达到强制进入这个账号空间的目的。
0x2 前端分析
先看看前端是怎么修改DOM的
在<div class="content clearfix">上下一个subtree modifications（子树修改）的断点，当有js脚本试图修改这个元素，或者是子元素的时候，断点会命中。然后在最新发布、最多播放、最多收藏，切换排序的顺序的按钮上点击一下，发现断点命中，停在了一个叫
5.space.什么什么的.js脚本上
在这脚本的头部，找到了点有用的信息。
那几行绿色的注释说明了B站的前端是使用VUE做的。
既然是VUE做的，那我们们最主要的是要找到被webpack打包过的VUE文件。
我们看页面最初的请求响应结果。返回了大概是这样的HTML页面
看到最后两个script标签了吗，一个是5.space.什么什么.js，另一个是space.什么什么.js
前一个是最初DOM断点断下操作界面的脚本，这个脚本很有可能就是VUE的依赖脚本，而下一个文件就很有可能是我们要找的VUE文件，只是被webpack打包过了。
在space.什么什么.js里面搜索页面加载出错的信息，也就是“错误码”和“fetch info”，先搜前一个看看。
果然有一个匹配。
尝试下断点分析，断点命中之后，根据调用堆栈，回溯调用，来到了一片最关键的地方。
经过断点调试，和看名字猜测，http()方法就是发送http请求，断点断下后，r的值就是https://api.bilibili.com/x/space/acc/info?mid=11783021，http()函数是一个异步函数，他返回了一个promise对象，后面使用了then来处理返回的数据，then的参数是一个匿名的函数。这个函数的逻辑是如果a为0，就进入3814行的代码（请求成功，页面正常的界面），否则进入3818行的代码（也就是错误的界面）。其中r的值是服务器返回的空间内容的数据，因为被请求屏蔽了，所以值是undefined。所以我尝试拿了别的UP主返回的数据内容替代（控制台直接赋值）。在断点后，把a值赋0，r赋值，继续运行。
页面成功呈现
0x3 JS脚本的编写
讲道理最让人困扰的是这个部分，如何写JS脚本才能达到一样的效果？自己使用devtool可以很方便的使用断点，中断之后可以使用控制台访问和修改变量的值。
但是js脚本不行，因为作用域的存在，那些变量都是匿名函数（回调函数）里面的变量，外面没办法访问，事情一度陷入了僵局。
一开始想用HOOK的方法解决这个问题。我搜索了很多关于js里hook的资料，好像并没有关于匿名函数的HOOK方法。后来尝试了ajax-hook，尝试从ajax请求的回调函数入手，发现B站的请求并没有触发hook。这条路依旧不通。
那就剩下两条路可以走了。方法2需要获取VUE对象，这个对象是局部的，不能直接访问，又绕回去了。理论上可以通过vue devtools获取，虽然工具开源，但是开发资料确实太少，还是放弃这条路。那就只能走方法1了。
重构分为两种，一种是删除指定的div,然后自己用VUE写一个一样的界面，这个算是最后手段，是正向开发，主要是累，我也懒，实在没办法时候在用这个方法吧。另一种是想办法停止原本的脚本运作，换成自己的脚本。我搜索了很多的资料，发现都没有办法强行停止某个脚本的运行。于是我又尝试直接重新运行修改后的脚本，发现直接报错了。
有个库不能重复导入，我也是在没办法修改webpack打包过的脚本细致到库的导入。
后来，我转变了思维的方法，我不阻止某个脚本的运行。我直接让全部脚本停止运行，也就是停止页面的加载不就行了吗？然后自己重新写一下界面，到关键脚本的时候，替换成自己修改的脚本就行了。于是我查到了一个关键的函数window.stop();这个函数可以直接停止界面的加载。我在合适的时候使用这个函数，然后js重新写一下界面，应该就可行了。
脚本的运行使用油猴，油猴有这几种运行脚本的时机。
反复查看这几个时机window.stop()后，界面加载的情况，发现document-body的时候应该是最适合执行。document-body的意思是，当出现body标签时候，运行此脚本。不过虽然body出来了就停止界面加载，但是还是有部分标签被加载出来了，不过不是特别影响，问题不大。所以脚本首先先使用window.stop()停止加载然后$("body").empty()对body里多余的进行清除。然后重新写入原来的界面（关键的VUE脚本不写入）最后import 自己修改过的VUE脚本[JavaScript] 纯文本查看 复制代码 //停止加载界面
window.stop();
//重构body
$("body").empty()
$("body").append(
" <div id=\"biliMainHeader\" disable-sticky style=\"height:56px\"></div>\n"
+ " <div id=\"space-app\"></div>\n"
+ " <script type=\"text/javascript\">//日志上报\n"
+ " window.spaceReport = {}\n"
+ " window.reportConfig = {\n"
+ " sample: 1,\n"
+ " scrollTracker: true,\n"
+ " msgObjects: 'spaceReport'\n"
+ " }\n"
+ " var reportScript = document.createElement('script')\n"
+ " reportScript.src = '//s1.hdslb.com/bfs/seed/log/report/log-reporter.js'\n"
+ " document.getElementsByTagName('body')[0].appendChild(reportScript)\n"
+ " reportScript.onerror = function () {\n"
+ " console.warn('log-reporter.js加载失败，放弃上报')\n"
+ " var noop = function () { }\n"
+ " window.reportObserver = {\n"
+ " sendPV: noop,\n"
+ " forceCommit: noop\n"
+ " }\n"
+ " }\n"
+ "\n"
+ " // webp支持\n"
+ " function webSupportCheck() {\n"
+ " const img = new Image()\n"
+ " img.onload = function () {\n"
+ " window.supportWebP = (img.width > 0) && (img.height > 0)\n"
+ " }\n"
+ " img.onerror = function () {\n"
+ " window.supportWebP = false\n"
+ " }\n"
+ " img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA'\n"
+ " }\n"
+ " webSupportCheck()</script>\n"
+ " <script src=\"//s1.hdslb.com/bfs/static/jinkela/long/js/jquery/jquery1.7.2.min.js\"></script>\n"
+ " <script type=\"text/javascript\" src=\"//s1.hdslb.com/bfs/seed/jinkela/header-v2/header.js\" defer=\"defer\"></script>\n"
+ " <div style=\"display:none\"><a href=\"https://www.bilibili.com/v/game/match/\">赛事库</a> <a\n"
+ " href=\"https://www.bilibili.com/cheese/\">课堂</a> <a\n"
+ " href=\"https://www.bilibili.com/festival/2021bnj\">2021拜年纪</a></div>\n"
+ " <script type=\"text/javascript\"\n"
+ " src=\"//s1.hdslb.com/bfs/static/jinkela/space/5.space.c93b4516819ba4466a477a6aeb39b418c54af16a.js\"></script>")
//引入破解界面
import "./space.c93b4516819ba4466a477a6aeb39b418c54af16a";
0x4 打包过的VUE文件的修改
我把原本VUE脚本（也就是那个叫做space.什么什么.js）下载下来，放入VSCode里进行修改。
首先是对a变量的修改，a要等于0才能让界面成功加载，所以直接把a = e.code改成了a = 0然后是对r变量的修改，因为手头没有港澳台的服务器也没有办法让服务器返回正确的json数据，于是拿了别的用户（@哔哩哔哩弹幕网）的数据做了修改，直接赋值上去了。理论上这样直接写r的数据并不太好，可以写一个函数用其他的API拼凑出原本一些信息，但是属实有点累了（主要是懒，如果以后闲得无聊可以搞一下）
最后webpack打包一下，放到油猴里。大功告成！ | 
发表于 2021-7-25 19:08
|
发表于 2021-7-26 12:27
