本帖最后由 李恒道 于 2023-9-6 15:46 编辑
感谢
在写本文之前
感谢@涛之雨 大佬在我失业期间
为了抚平我内心的伤痛
赠送给我了美国拉斯维加斯豪华七日游(越南中转，需携带配型报告以及身体健康证明)旅游套餐
下周日出发，羡慕死你们
正文
这里我们以一篇百度文库的文章为例
https://wenku.baidu.com/view/5d102fd05322aaea998fcc22bcd126fff7055dfd.html?fr=hp_Database&_wkts_=1688832801754
随便选中一段文字，然后点击复制
发现跳转到了百度文库会员购买
那么我们开始分析这个按钮
查看事件监听器，只有一个click事件，跳转进去
到了
[JavaScript] 纯文本查看 复制代码 e = o._wrapper = function(t) {
if (t.target === t.currentTarget || t.timeStamp >= i || t.timeStamp <= 0 || t.target.ownerDocument !== document)
return o.apply(this, arguments)
}
这里基本没什么分支，我们直接在o.apply(this, arguments)打断点
点击复制按钮后断下，往里走，到了
[JavaScript] 纯文本查看 复制代码 function n() {
var t = arguments
, r = n.fns;
if (!Array.isArray(r))
return Jt(r, null, arguments, e, "v-on handler");
for (var i = r.slice(), o = 0; o < i.length; o++)
Jt(i[o], null, t, e, "v-on handler")
}
这里我们就是Vue的分发代码了，如果是单个的就只调用一次，如果是多个同样的事件就循环触发事件的回调函数代码
我们这里直接打印n.fns，看到是一个函数，直接跳转进去
发现是一个明显的render模板
我们在t.clickCopy()部分打一个断点继续往里追
找到了
[JavaScript] 纯文本查看 复制代码 clickCopy: function() {
var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "reader";
if (a.log.xsend(102222, {
position: t
}),
a.log.xsend(dt, {
behavior: ut.CLICK,
module: [vt.ReaderPlugin, "copy", t].join("_")
}),
"remind" === t && !this.canCopy)
return this.buyVip("remind");
if (this.setVisible(!1),
this.setReminderVisible(!1),
this.setIsCopyActivated(!0),
this.isTaskUser && 1 === this.taskStatus) {
var e = this.taskStatus
, i = ++e;
(0,
at.Q)(1, i)
}
},
根据调试我们并走到了
[JavaScript] 纯文本查看 复制代码 if (this.setVisible(!1),
this.setReminderVisible(!1),
this.setIsCopyActivated(!0),
this.isTaskUser && 1 === this.taskStatus) {
var e = this.taskStatus
, i = ++e;
(0,
at.Q)(1, i)
}
所以这里一定有跳转到购买会员页面的代码，我们先从setVisible跟一下看看
走进去到了
[JavaScript] 纯文本查看 复制代码 n[r] = function() {
for (var e = [], n = arguments.length; n--; )
e[n] = arguments[n];
var r = this.$store.commit;
if (t) {
var o = S(this.$store, "mapMutations", t);
if (!o)
return;
r = o.context.commit
}
return "function" == typeof i ? i.apply(this, [r].concat(e)) : r.apply(this.$store, [i].concat(e))
}
有store字样，疑似是Vuex或者pinia，是vue的全局状态存储
我们看代码可以直接在最后一行打断点
走到了
[JavaScript] 纯文本查看 复制代码 function(n, r, i) {
var o = _(n, r, i)
, a = o.payload
, s = o.options
, c = o.type;
s && s.root || (c = e + c),
t.commit(c, a, s)
}
还是在最后一行跟
[JavaScript] 纯文本查看 复制代码 this.commit = function(t, e, n) {
return s.call(o, t, e, n)
}
[JavaScript] 纯文本查看 复制代码 p.prototype.commit = function(t, e, n) {
var r = this
, i = _(t, e, n)
, o = i.type
, a = i.payload
, s = (i.options,
{
type: o,
payload: a
})
, c = this._mutations[o];
c && (this._withCommit((function() {
c.forEach((function(t) {
t(a)
}
))
}
)),
this._subscribers.slice().forEach((function(t) {
return t(s, r.state)
}
)))
}
这里c = this._mutations[o];就是对应的store的分发函数了
我们打印一下c跳转进去
发现是
[JavaScript] 纯文本查看 复制代码 (function(e) {
n.call(t, r.state, e)
}
是一层包裹代码，我们直接打断点，然后进n里
就找到了用户写的分发函数啦！
[JavaScript] 纯文本查看 复制代码 setVisible: function(e, t) {
e.visible = t
},
用同样的方法可以找到全部设置状态的函数，这里我们分别找到了三个，发现没什么特殊的地方，那一定还有其他原因！
我们把目光挪到this.isTaskUser && 1 === this.taskStatus
因为代码是
[JavaScript] 纯文本查看 复制代码 if (this.setVisible(!1),
this.setReminderVisible(!1),
this.setIsCopyActivated(!0),
this.isTaskUser && 1 === this.taskStatus) {
,表达式前面的都对if没有任何意义，那么缩减代码就是
[JavaScript] 纯文本查看 复制代码 if (this.isTaskUser && 1 === this.taskStatus) {
我们应该去看isTaskUser和taskStatus！
因为这个是vue的sfc文件生成的代码
我们直接在同文件搜索
[JavaScript] 纯文本查看 复制代码 (0,s.mapState)("visitUserInfo", ["isTaskUser", "taskStatus"]))
这是一个mapState函数，即将全局状态的数据映射到文件中，从而缩减代码的长度
如正常我们获取状态数的数据需要store.visitUserInfo.isTaskUser，而使用mapState缩减了代码长度，只需要使用isTaskUser即可等价于store.visitUserInfo.isTaskUser。
那我们的目标就是触发this.isTaskUser && 1 === this.taskStatus的逻辑
我们可以在(0,s.mapState)("visitUserInfo", ["isTaskUser", "taskStatus"]))上打一个断点，因为这个是组件初始化的时候执行，所以我们需要刷新页面可以发现正常断下了，然后往里走
走到了
[JavaScript] 纯文本查看 复制代码 return function(e, n) {
return "string" != typeof e ? (n = e,
e = "") : "/" !== e.charAt(e.length - 1) && (e += "/"),
t(e, n)
}
可以看到是兼容性判断，继续看t函数
里面将e进行兼容性处理，然后遍历，挂载到对象n上，所以读取属性是在挂载的函数里
我们在var e = this.$store.state打一个断点等待断下
然后输入
[JavaScript] 纯文本查看 复制代码 this.$store.state.visitUserInfo.isTaskUser=true
this.$store.state.visitUserInfo.taskStatus=1
解除这部分的断点，再次触发复制尝试一下
发现流程进去了
走进去后唯一比较有意义的代码就是
[JavaScript] 纯文本查看 复制代码 (a.ZP.commit("visitUserInfo/setTaskStatus", e
我们按之前的流程走就可以走到函数里，但是也有一个比较方便的办法，就是直接搜索setTaskStatus，找到了
[JavaScript] 纯文本查看 复制代码 setTaskStatus: function(e, t) {
e.taskStatus = t
},
上面的代码可以看到修改了taskStatus，因为全局状态如果被修改是会在其他地方响应的，所以我们尝试搜索taskStatus，除了我们的代码只有另外一处
[JavaScript] 纯文本查看 复制代码 H.Z)({
url: "/user/interface/setuserbackground",
data: c,
method: "POST"
})).then((function() {
if (n.setThemeDefaultVal(n.viewTheme),
n.showBttomTheme = !1,
n.isTaskUser && 2 === n.taskStatus) {
var t = n.taskStatus
, e = ++t;
(0,
it.Q)(1, e)
}
}
其代码是在api"/user/interface/setuserbackground后调用该属性判断，所以我们可以确定该属性几乎没有作用。
那我们的目光只能放在
this.setVisible(!1),
this.setReminderVisible(!1),
this.setIsCopyActivated(!0),
这三个里了，根据之前的经验，我们再进行搜索> 严谨的说应该按刚才的方式找函数，如果你有经验了可以直接搜索 他们分别修改了
visible
remindVisible
isCopyActivated
所以我们依次再分别搜索这三个遍历看看谁依赖了他们三个，这个时候优先排查搜索结果最少的，我们细致排查后找到了
[JavaScript] 纯文本查看 复制代码 watch: {
isCopyActivated: function(t) {
t && !this.canCopy && (a.log.xsend(H, {
behavior: U.SHOW,
module: [G.ReaderPlugin, "Copy", "copybtn"].join("_"),
content: this.selectedTextTrim
}),
this.fetchCopyTimes(this.selectedTextTrim, !0))
},
},
这个函数专门监听了isCopyActivated变量，还检测了this.canCopy是否可以复制，如果不可以复制调用this.fetchCopyTimes(this.selectedTextTrim, !0))，我们进这个函数看看
发现明显的clickBuyVipBtn字样和开通vip，很有可能就是这个函数跳转到百度Vip付费页面的！
我们在
[JavaScript] 纯文本查看 复制代码 isCopyActivated: function(t) {
...
this.fetchCopyTimes(this.selectedTextTrim, !0))
},
这个函数中还没执行到 this.fetchCopyTimes之前下断点，设置 this.fetchCopyTimes=()=>{}，发现没有跳转到付费购买vip页面，说明我们找对了！那问题就变成了canCopy设置为true了
在该js文件搜索canCopy找到了
[JavaScript] 纯文本查看 复制代码 s.mapGetters)("readerPlugin", ["canCopy", "selectedTextTrim", "formatedText"]))
[JavaScript] 纯文本查看 复制代码 canCopy: function(e, t, n) {
var r = n.vipInfo
, o = n.docInfo;
return !!(null != r && r.isVip || (null == o ? void 0 : o.docBizType) === c.RV.SECRET || (null == o ? void 0 : o.docBizCategory) === c.ll.FREE || null != o && o.hasGot)
},
获取的是n.vipInfo.isVip，我们在这里打印n，发现n就是vuex的状态树
往上堆栈回溯一层可以看到
[JavaScript] 纯文本查看 复制代码 t._wrappedGetters[e] = function(t) {
return n(r.state, r.getters, t.state, t.getters)
}
根据对比发现r是局部状态树，t是根状态树，那我们的问题就变成了如何得到根状态树并且设置vipInfo.isVip
说明该变量在vuex中，继续搜索canCopy
查阅vuex源码可知会挂载到$store上，具体分析就不表明了
所以可以写出代码
[JavaScript] 纯文本查看 复制代码 document.querySelector('.header-wrapper').__vue__.$store.state.vipInfo.isVip=true
根据测试可以正常复制
我们成功破解了百度文库复制！
因为写文章到发表具有一定时效性
很多人都说不可以复制
实际是可以复制的
只是默认进去百度文库搞了个AI助手上去，取消编辑就可以回归到正常页面
文章其实主要为了抛砖引玉，解决Vue如何从入口函数追踪到正确函数和VUEX的分析方案
随手复制的内容：
就响起了激烈的掌声，原来，超市里正在进行包粽子比赛。我们全
家人都在观看着。最厉害的一个人一分钟包了十一个粽子。看完包粽子比赛后，爸爸说：
“海边今天举行大胃王吃粽子比赛和赛龙舟比赛，我们也去参加呗！”妈妈说：“赛龙舟
比赛那可是许多人一起划的呀，我们就三个人怎么参加呀？”爸爸说：“这次的吃粽子和
划龙舟比赛是经一家三口为单位参加比赛的。”妈妈这下才 | 
[复制链接]
发表于 2023-9-6 23:43
|
发表于 2023-9-6 06:58
|楼主
收藏
淘帖
有用
分享到朋友圈
