这是Jerry在2021年的第50篇文章，也是王子熙的第327篇原创文章公众号。今天文章中提到的场景，理论上来说，这个公众号的每一位粉丝都可以在自己的电脑上操作。因为涉及的应用，几乎每个人在日常生活中都会用到它——淘宝。Jerry负责SAPCommerceCloud的前端开发。他为什么要写淘宝相关的文章？上周日，7月25日凌晨2点30分，Jerry的斯巴达克斯开发团队收到了客户升级。这个客户事件与会话管理（SessionManagement）有关，Jerry在和同事处理问题的时候忍不住想了想。淘宝作为另一家国内外顶级电子商务网站，如何应对类似问题？电脑上访问淘宝，输入淘宝用户名和密码，点击登录：你会观察到一个HTTPPost请求，登录，发送到后台服务器：https://login.taobao.com/newl...形式请求的数据包含loginId和password2两个字段，分别维护用户输入的淘宝用户名明文和淘宝密码RSA加密后的值。下面介绍如何找到淘宝前端对用户输入的登录密码进行RSA加密的具体位置。在Chrome开发者工具中找到登录请求，在Initiator面板中找到发起请求的调用栈。有经验的前端开发者从onClick和t.loginSubmit可以推断，用户名和密码的输入框是用Form形式实现的。点击登录按钮后，触发表单的提交。打开上图中找到的索引。js文件：https://x.alicdn.com/vip/hava...直接搜索关键词password2，很快就会找到RSA加密代码位置：设置断点后，运行时点击登录按钮，然后断点会触发，可以进入rsaPassword函数查看RSA加密算法的详细信息。在这个index.js中还有一些有趣的东西可以找到。比如在提供rsaPassword方法的模块内部，也维护了一个支持的国家列表countryList，里面包含了168个国家和地区：但是在浏览器端打开淘宝，里面只能看到十个国家和地区国家和地区的下拉列表。剩余记录。这应该是在前台某处通过某种逻辑进行了过滤：另外，我们可以在淘宝首页右侧区域看到快速充值面板，如下图绿色高亮区域所示：HTML源码页面的，并且不是静态写在首页的HTML文件中，而是通过一个叫做bianming-phone的HTTP请求（“便利”的拼音加上“手机”的英文单词phone，这个混搭style...)从后台读取到前台，然后注入到前台页面：同样，还有这个旅游视图片段（相当于SAPUI5中的ViewFragment）：HTTP请求读取视图片段：bianming-trip看到这里，Jerry不禁想起了SAPCommerceCloud前端的CMS驱动设计。两者都是从连接电商页面的后台系统读取部分页面配置信息，可谓大同小异。SAPS/4HANA的UI风格是FioriUX，实现的前端框架是SAPUI5；SAPCommerceCloudUI实现的前端框架是Angular；help.sap.com使用AngulaJS实现，www.sap.com使用React。详情参考Jerry的文章：SAP官方帮助网站，help.sap.com背后的那些事。淘宝网首页采用了阿里自研的前端框架。Kissy：我们在淘宝首页看到各种商品图片，都是由Kissy驱动，通过CDN服务器发起的数据请求加载的：页面片段源码中也有一些有趣的内容，比如比如这种“上线请删除”的评论。我现在浏览的是上线后的代码，怎么还能看到这些注释：）还有这种给window全局对象加一个flag属性，赋值为5的方法。作为同事，我很能理解这种workaround:)想起国外程序员很流行的一个评论，翻译成中文大意是：//下面的代码不要动，因为只有我和上帝知道这段代码你在做什么//现在，只有上帝知道这段代码在做什么。我们在淘宝购物，选择自己喜欢的商品，加入购物车后，当然不想点击结账，突然要求重新登录。那岂不是很失望。另外，当我们不小心误操作点击了浏览器刷新按钮时，我们期望页面刷新后，我们仍然是登录状态，加入购物车的商品不会丢失。这些都属于用户会话管理的范畴。淘宝页面的用户会话管理是通过客户端cookie和服务端维护的用户会话对象来实现的。用户登录淘宝网成功后，服务器创建对应的Session对象，并返回登录HTTP请求的响应头，其中包含很多set-cookie字段：浏览器解析这些响应，设置服务器下发的Cookie本地。下次用户操作淘宝，向服务器触发新的请求时，浏览器会自动将这些Cookie字段设置到请求头中。服务端收到这些cookie字段后，就可以在内存中定位到用户登录后创建的对应Session对象，从而识别用户。这些cookie也可以在Chrome开发者工具中查看。(1)cookie的Expires字段存储过期时间。当Expires为Session时，表示cookie只在当前session中有效，关闭浏览器后cookie自动删除。(2)带HttpOnly的Cookies无法被客户端JavaScript代码读取，提高了安全性，避免了Cookies被XSS攻击窃取的可能性。(3)Secure为true的Cookies不能通过HTTP协议传输到服务器，只能通过HTTPS发送。淘宝服务器下发的cookie中，字段lid存储的是淘宝用户名经过URL编码后的值，dnk存储的是淘宝用户名的Unicode：Jerry将在本文的基础上介绍SAPCommerceCloud下一篇用户会话管理中的UI，感谢阅读。更多Jerry原创文章在这里：《王子熙》：
