从淘宝首页登录说起

2024-01-16 15:15:52

这是 Jerry 2021 年的第 50 篇文章，也是汪子熙公众号总共第 327 篇原创文章。

今天文章提到的场景，理论上本公众号每一位粉丝，都可以在自己的电脑上进行操作。因为涉及到的应用，几乎每一个人日常生活中都会使用到——淘宝网。

Jerry 负责的是 SAP Commerce Cloud 前台开发，为何要写和淘宝网相关的文章？

上个周日即7月25日凌晨两点半，Jerry 所在的 Spartacus 开发团队，收到了一个客户 escalation.

这个客户 incident 和会话管理 (Session Management) 相关，因此 Jerry 一边和同事处理问题，一边不禁联想起，作为另一款国内外数一数二的电商网站，淘宝网是如何处理类似问题的？

在电脑端访问淘宝网，输入淘宝用户名和密码，点击登录：

会观察到一个 HTTP Post 请求，login，发送往后台服务器：

该请求的 Form Data 中包含 loginId 和 password2 两个字段，分别维护了用户输入的淘宝用户名的明文，以及淘宝密码进行 RSA 加密后的值。

下面介绍如何自行找到淘宝网前端将用户输入的登录密码进行 RSA 加密的准确位置。

在 Chrome 开发者工具里找到 login 请求，在 Initiator 面板里找到发起该请求的调用栈。稍有经验的前端开发人员，从 onClick 和 t.loginSubmit 就能推断出，用户名和密码的输入框，实现在一个 Form 表单里，点击登录按钮后，触发表单的 Submit.

打开上图找到的 index.js 文件：

直接搜索关键字 password2，很快就能找到 RSA 加密的代码位置：

设置断点后，运行时点击登录按钮，断点触发，可以进入 rsaPassword 函数，查看 RSA 加密算法的明细。

这个 index.js 里还能发现一些有趣的东西。比如提供了 rsaPassword 方法的模块内部，还维护了一个支持的国家列表，countryList，里面有 168 个国家和地区：

但是在浏览器端打开淘宝网，国家和地区的下拉列表里，只能看到十余条记录。这应该是前台某处根据某种逻辑做了过滤：

此外，我们在淘宝网首页右边区域，能看到快速充值话费的面板，如下图绿色高亮区域所示：

该页面的 HTML 源代码，并不是静态编写于首页的 HTML 文件中，而是通过一个叫做 bianming-phone("便民"的拼音加上"手机"的英文单词 phone，这混搭风格......) 的 HTTP 请求，从后台读取到前台，然后再注入到前台页面中：

同理，还有这个旅行视图片段(相当于 SAP UI5 里的 View Fragment)：

读取该视图片段的 HTTP 请求：bianming-trip

看到这里，Jerry 不由得联想起 SAP Commerce Cloud 前台的 CMS 驱动设计，二者都是从电商页面连接的后台系统读取部分页面配置信息，可谓异曲同工。

SAP S/4HANA 的 UI 风格是 Fiori UX，实现的前端框架是 SAP UI5；SAP Commerce Cloud UI 实现的前端框架是 Angular；

help.sap.com 采用 AngulaJS 实现，www.sap.com 使用的是 React.详情参考 Jerry 的文章：SAP官方帮助网站，help.sap.com 背后那些事儿。

而淘宝网首页，采用的是阿里自研的前端框架，Kissy：

我们在淘宝网首页看到琳琅满目的商品图片，都是被 Kissy 驱动，通过向 CDN 服务器发起的数据请求而被加载的：

在这些页面片段的源代码里还看到一些有意思的内容，比如这种“上线请删除”的注释。我现在浏览的就是上线后的代码呀，咋还能够看到这些注释

码农公寓