写简历找工作啦，某民简历提取vip才能下载的简历
本帖最后由 狂三丶 于 2024-3-2 03:31 编辑本文章中所有内容仅供学习交流使用，不用于其他任何目的，不提供完整代码，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！本文章未经许可禁止转载，禁止任何修改后二次传播，擅自使用本文讲解的技术而导致的任何意外，作者均不负责，若有侵权，请联系作者立即删除！0 更简单的方法
经过与评论区老哥@openbilibili的讨论，出现一个更加简单的第二种方法！
直接f12之后在控制台输入下列代码之后打印即可。
document.body.innerHTML = document.querySelector(".tpl_main").innerHTML
也就是说一行代码就可以解决了。不过逆向过程依然留着。
1 前言
写简历找工作啦，百度随便搜索了一个简历制作网站。一顿编辑简历突然发现这个网站导出为任何一个简历为pdf居然需要vip，网站上面写着免费制作但是下载收费是吧，实属吃相有点难看了。
地址：aHR0cHM6Ly93d3cucW1qaWFubGkuY29tLw==点击下载简历会提示开vip
https://pic.ziyuan.wang/user/guest/2024/02/_8L1__OZ_YJ@K6XMB__OBNC_ca5dc396cc8d2.png
2 逆向分析
在没有vip的情况下通过fiddler抓包发现下载时会先发送请求获取vip信息
所有链接关键字符已替换
获取vip信息请求链接:https://——————/xxxx/resume/getVipInfo?userId=xxx&loginCode=xxxx&t=xxxxx
获取vip信息响应结果:{"code":1,"status":"success","data":[{"id":xxxxx,"vip":0,"resumeList":"","downNum":0,"aiNum":0,"vipTime":null}]}
直观上感觉vip为1时就代表有vip，然后vipTime代表vip到期时间。
替换后响应如下：
https://pic.ziyuan.wang/user/guest/2024/02/QSJYRMK_Z31__M5SOV_Q97M_95c683349d289.png
然后手动修改了一下响应体之后再次点击下载简历，果然点击下载简历的时候，开始进行pdf的下载请求。
下载请求：https://---------/online/downpdf HTTP/1.1
https://pic.ziyuan.wang/user/guest/2024/02/1F@LQN_N9YHL`XV_ZOK`IQO_09005acf6c93d.png
但是故事到这里还没有结束，请求接口会发现响应为{"code":2,"status":"error","data":"您不是会员，没有下载权限！"}，无法下载。显然后端验证了vip权限，此时无解。
但是我们的目的是得到pdf文件。而不是一定需要通过接口去得到pdf文件
观察了下载链接的请求，请求体为：
{
"userId": xxxxx,
"loginCode": "xxxx",
"resumeId": "xxxx",
"cssStr": "css样式",
"htmlDom": "html元素",
"type": "pdf"
}
通过观察可以知道简历文件由请求体的cssStr与htmlDom共同构成最终由html样板代码代码加上这两个字符串，保存为一个html文件，之后在浏览器打开之后在利用浏览器自带的pdf打印即可打印出来简历
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
cssStr
</style>
<body>
htmlDom(注意这里需要取出转义字符"\")
</body>
</html>
3 最终结果
网页端编辑结果为：
https://pic.ziyuan.wang/user/guest/2024/02/_2RR78SY_QJ7V@JHQ_GK32E_fac984f48ab67.png
最终通过浏览器打印出来的pdf如下，可以看出是一致的：
https://pic.ziyuan.wang/user/guest/2024/02/ZXCR__AVH8B~RQRD_A_~ZWS_874a734eccf2f.png
4 后续部分问题处理
浏览器打印需要进行如下设置才能正确打印出需要的简历
https://pic.ziyuan.wang/user/ahh556/2024/02/_~AF79G3CL9G_8RC69AU_XH_262f9c5732084.png
经回复反映确实存在图标缺失的问题。经过排查是因为没有导入字体文件的原因，按照图示即可找到引入字体文件的css，只需要导入css以及字体文件，就会有图标了
https://pic.ziyuan.wang/user/guest/2024/02/4Q1@S___1_644_4LR8OINB6_3272329928d88.png
字体文件在网络选项卡中可以找到，根据网站host在拼接引入字体文件的css中的字体文件地址即可下载字体文件
https://pic.ziyuan.wang/user/guest/2024/02/BH@RRR5_87LV__J_G_`_J_F_39208204dadc6.png
我整理好了如果出现技能条缺失或者出现图表缺失导入下列css代码即可
字体css链接:https://www.alipan.com/s/M8BJifghQ4P
5 补充图标的pdf
https://pic.ziyuan.wang/user/guest/2024/02/88CG30WNV4_G1@_~R110_HV_0ef5bac80caa9.png
https://pic.ziyuan.wang/user/ahh556/2024/02/_K_HW_V9X@Y2_`_6TT@_~~Q_5a6ad5da67975.png
本帖最后由 BestSum 于 2024-3-1 21:44 编辑
还是用楼主的方法吧 本帖最后由 openbilibili 于 2024-3-2 12:47 编辑
根据楼主的思路 写了一个脚本 方法一：路由在/cv/edit/的路由里面去用执行
function getPdfCss() {
for (var e = document.querySelector("head").querySelectorAll("style"), t = "", i = 0; i < e.length; i++) {
var n = e.innerHTML || e.sheet.cssText || ""
, a = n.substring(0, 300);
if (/(\.resume_box)|(\.cover_all)/.test(a) || /qmfont/.test(a) && /data:application/.test(a)) {
var s = n.replace(/(\)|(\/\*.*\*\/)|\r\n|\r|\n/g, "");
if (document.querySelector("#resume_cover") && /\.cover_all/.test(s)) {
var o = s.replace(/(\.cover_all )|\n|()/g, "");
t += o.substring(o.indexOf(".resume_cover"))
}
/\.resume_box/.test(s) && (/qmfont/.test(a) ? t += '@font-face {font-family: "qmfont";src:url("https://www.qmjianli.com/font/resume/iconfont.ttf") format("truetype");' + s.substring(s.indexOf("}")).replace(/(\.resume_all \.pc_main )|\n|()/g, "") : t += s.replace(/(\.resume_all \.pc_main )|\n|()/g, ""))
}
}
return 'html{font-size:12px;}body{font: 12px/1.5 Arial,PingFang SC,"Microsoft YaHei",SimSun;color:#333;}div,p,input,textarea,ul,li,dl,dt,dd{box-sizing:border-box}*{margin:0;padding:0;border:0}*,*:before,*:after{box-sizing:border-box;margin:0}h1,h2,h3,h4,h5{font-weight:normal}ul,li{list-style:none}img{vertical-align:top}dfn{font-style:normal}i{font-style:normal}a{color:#333;text-decoration:none}a:hover{color:#13d8a7!important}table{border-collapse:collapse}th,td{padding:0}' + (t = t.replace(/font-size:50px/g, "")) + ".jineng_list .el-progress__text{vertical-align: top;line-height: 16px;}.jineng_list .is_text .el-progress__text{display: none;}.jineng_list .is_text .shuliandu{display: block!important;}"
}
var n = document.querySelector("#resume_cover") ? document.querySelector("#resume_cover").innerHTML.replace(/\r\n|\r|\n/g, "").replace(/data-v-{4,9}=""/g, "") : ""
, a = document.querySelector("#resume_pc").innerHTML.replace(/<!---->|\r\n|\r|\n/g, "").replace(/data-v-{4,9}=""/g, "")
, o = document.querySelector("#zijianxin_tpl_box") ? document.querySelector("#zijianxin_tpl_box").innerHTML.replace(/<!---->|\r\n|\r|\n/g, "").replace(/data-v-{4,9}=""/g, "") : "";
document.documentElement.innerHTML = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/_nuxt/app.94b91fdc14df6dd7632538db6975b113.css">
<style type="text/css">
${getPdfCss()}
</style>
</head>
<body>
${a}
</body>
</html>`
方法二： 路由在cvs/:resumeId 那个页面可以去直接下载 JS代码如下
document.body.innerHTML = resume_tpl_box.getInnerHTML()
保存的方法有两种。
利用打印PDF保存(目前看来可能有颜色或者图标缺失，有些模板可能比较麻烦)。
还可以就是选择该节点，截取节点屏幕截图(路由在cvs/:resumeId或者/cv/edit/，都为完整)。
最终效果
学习了，谢谢！ 学习了. 谢谢分享. 学习了. 谢谢分享.学习了 卧槽大佬牛逼666 虽然我用不上了，但是学到了 非常感谢，收藏一下 虽然我用不上了，但是学到了 感谢分享