反向工程之“测测你的本命专业”

作业

问题描述

• 研究对象：测测你的本命专业
• 研究对象链接：https://cdn-act.knowyourself.cc/life_profession/
• 描述：运用所学的知识对“测测你的本命专业”进行分析（反向工程）。

要求

• 发一篇博客。
• 在博客中应当描述清楚技术路线。包括自己所尝试的所有技术路线（包括成功的和失败的）。
• 在博客中应当包含对“测测你的本命专业”中算法的分析。
• 在博客中应当记录所花费的时间。
• 截止日期9月15日23时59分59秒（以发博客的时间为准）。

作答

技术路线

1.使用浏览器打开该网站，右键点击检查，进入在开发者工具。
2.在开发者工具界面中，在该网站输入信息，完成测试。在选择选项的过程中，对元素进行检查，发现选择项元素的类名更改，新增“selected”,如图1 所示。

图1 类名更改

3.进入控制台，重新完成一遍测试，观察每次选择后传出的数组，结果如图2所示。观察并分析可知，填空题填写的<名字><性别>、序号为10的选择题，未在控制台中打印数据，即不影响结果。<性别>和序号1-9的选择题，共10题影响测试结果。

图2 控制台打印数据

4.按下“ctrl”并鼠标左键点击目标文件，目标文件如图3所示。跳转后界面如图4所示。

• 该测试网站使用了“React”、“html2Canvas”等库。

• 猜测当前路径的 ‘./result’ 、’…/p-2/q-10’的两个文件，包含该网站的核心算法。

• select.slice(1) ，使得result函数的参数传入值，变为原select索引值为1至末尾。即切片<性别>选项，它不再影响结果。

图3 点击对应文件据 图4 对应文件界面
5.根据路径找到"result.js"文件，页面显示如图5。进行算法分析，可知该文件是对所选选项信息的处理，测试网站的算法是在前端处理并显示的。

图5 result.js

算法分析

1. getResult()函数

• 参数：select。具体指传入数组，用户对序号1-9选项的选择值。多选题时，数组内套数组。
• 输出：max。具体指已选频率最高的数字编号，即最终结果的专业编号。
• 变量config：定义索引值0-9题目的每个选项对应的多个专业编号，存储于数组中。索引为9的各选项未赋值，验证（最后一个）序号为10选择题不影响结果。
• 变量result：将用户每道题已选择的对应专业编号，连接并存放于数组中。
• 对象result_map：记录"result"数组中各专业编号[key],以及各专业编号出现的频率次数[value]。

2. 算法过程分析
   ①定义函数shuffle()，对数组的原型链上添加一个shuffle方法，实现打乱元素顺序的功能。
   ②定义变量config、result。
   ③对于每次传入的参数select,进行遍历，获取它对应的每个专业编号，以数组的形式存于变量tmp。完成测试后，所有题的所选选项的对应的专业编号连接起来，存储于result中。
   ④定义变量config、result。
   ⑥定义对象result_map，定义变量max并初始化赋值-1。
   ⑦对result执行shuffle函数，即打乱数组result中各元素。
   ⑧遍历数组result，用result_map存储result中互不相同的专业编号，用max存储各专业编号的频率，相关代码如图6所示。

result_map中，依次进入result数组的每个专业编号，如果key[第一次进入的专业编号]，value赋值为0，再+1,其value值变为1；如果key[已经含有的专业编号]，其value值+1。
max 先赋值为result数组（打乱后）中第一个专业编号。如果两个result_map对象的value不同，将vaule更大的key[专业编号]赋值于max；如果两个result_map对象的value相同，则不做处理，（随机打乱后）序列在前的key[专业编号]赋值于max。最终，result_map中[value]最大的专业编码[key]，赋值于max变量。

图6 max逻辑代码

3. 测试
   根据”result.js“中的测试数据，如图7所示。选择对应的选项，进行测试。可得出最后的测试专业与专业代码所对应。故，上文算法分析正确。

图7 测试用例

PSP

任务	开始时间	结束时间	中断时间/min	delta时间/min
调试网站	9. 11 14:25	9. 11 15:30	5	65
算法分析	9.13 19:24	9.13 21:15	5	106
写博客	9.13 22:00	9.13 24:08	5	123
博客格式调整+修改	9.14 7:55	9.14 8:32	0	37
总计				331

备注

• 要分析什么，有哪些主要的技术路线，猜测的技术路线、希望如何设计实验验证。
• 网络分析要充分，有细节。过滤了哪些条件，实验过程中用户如何操作。
• 核心代码部分，要有分析。
• 代码怎么跑的，数据流图和流程图什么样。
  如果非常朴素，那么，“你”能迅速实现么？
  如果你能够迅速实现，能否迅速写出引擎或者代码生成器，用于批量生产和部署。
• PSP中，若中断时间大于5分钟，应分为两条记录。
• 使用 ”Save All Resource“ -google浏览器应用市场，批量下载源文件.可获得所有源码，但是缺少相关package.json(定义项目所需要的各种模块,以及项目的配置信息)，无法运行。
• 技术 react ，文件格式：tsx,react文件的写法之一。用js文件运行html ，并加入了ts类型