《Web测试囧事》——1.4 利用JavaScript加载的漏洞提前购买抢购商品
本节书摘来自华章计算机《Web测试囧事》一书中的第1章,第1.4节,作者 黄勇 雷辉 徐潇 杨雪敏,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1.4 利用JavaScript加载的漏洞提前购买抢购商品自从小米手机推出以来,抢购风潮在各类网站上盛行起来,小蔡测试的网站自然也不能免俗,项目组开发的网站也包含了抢购功能。
对于抢购来说,只有到了特定的时间后,商品才会开放并允许抢购,并且抢购网页的代码里使用的时间会定期和服务器进行同步。
小蔡设计了丰富和全面的测试用例,在执行基础测试用例过程中没有发现抢购功能的Bug,不过在进行多地区和多语言的性能测试时,她发现了一个功能上的漏洞,发现漏洞的过程是这样的。
在执行性能测试时,需要选取不同国家和地区的服务器去模拟用户的真实访问,以验证产品性能是否能满足用户体验的要求。显然,通过这些不同国家和地区的服务器访问网站,会比小蔡在公司内部使用内网访问速度慢,更别提有些国家和地区网络发展慢,这些区域的访问速度就更慢了。
然而正是通过使用这些网速很慢的服务器,小蔡发现了这个功能上的漏洞。
1)在高速或者说正常网速的情况下,当用户打开抢购商品的页面时,页面JavaScript会很快加载并执行完成,这时“加入购物车”的按钮会变灰,无法进行操作(见图1-5)。
2)而当网速很慢时,由于网页中JavaScript是顺序加载执行的,所以“加入购物车”按钮先会显示为可以操作的状态,等JavaScript加载完成后,才会变灰,不可操作(见图1-6)。
3)所以在慢速网络中,当页面JavaScript没有加载完成时,用户会看到“加入购物车”按钮是可用状态,因此用户可以点击该按钮,并把抢购商品加入购物车,于是用户就可以在正式抢购开始之前顺利地抢到该商品了。实际上甚至在商品无货的情况下,用户也可以在JavaScript没有加载完时点击“加入购物车”按钮,并且成功把无货商品加入购物车 (见图1-7和图1-8)。
这个问题是由JavaScript没有加载完成引起的,但是稍懂技术的人甚至可以禁用浏览器的JavaScript,或者通过查看网络访问的URL后,在按钮是灰色的状态下也有可能提交购买请求。所以,修改这个Bug时,还需要在提交订单时做二次验证,去验证该商品是否有货,或者是否已经处于抢购状态,当状态为“是”的时候,才允许后续操作。
当小蔡把这个问题提交给开发人员和产品经理后,经过大家的讨论,发现如果调整商品页面上的JavaScript加载顺序,会涉及很多JavaScript文件的修改,影响范围会很广,包括移动页面上的代码也需要大幅修正,因此整体工作量比较大。鉴于刚才提到的在提交订单时做二次验证也能避免这样的问题,所以他们一致决定采取做二次验证这种方案来进行修复。
(1)加载
不管是script标签直接引入的情况,还是src加载的外部资源,都会阻塞页面的渲染。所以一般为了从体验上考虑,我们会将JS文件放置在body标签闭合之前。不过新版的IE、Firefox、Safari和Chrome都允许并行下载JavaScript文件。但是只是JavaScript文件可以并行下载,渲染还是被阻塞的,页面仍然必须等待所有JavaScript代码下载并执行完成才能继续。
(2)执行
每当JavaScript文件加载完成后,都会立刻执行该文件。所以你会看到下一次的请求并不是在上一次请求结束之后立即开始,中间的耗时就是上一个脚本文件的执行时间。
一般对于JavaScript的优化建议如下。
1)将script脚本文件放置在body标签闭合之前。
2)减少script请求数量。
3)无阻塞脚本,在页面加载完成后才加载JavaScript代码。这就意味着在window对象的onload事件触发后再下载脚本。
不过在上面这个故事中,正是由于对JavaScript的优化引发了抢购页面先显示元素可操作,然后在JavaScript加载完成后,JavaScript执行使元素不可操作。
阿里云服务器购买后如何使用?阿里云服务器搭建Web站点图文教程 阿里云服务器购买后如何使用?本文为大家介绍两种最常见且简单的搭建Web站点的方式,第一种是在Windows Server 2012 R2 64位系统的ECS实例上使用IIS服务器搭建多个Web站点。第二种是通过阿里云云市场镜像在Windows操作系统的ECS实例上快速部署Web环境。利用宝塔Windows面板一键安装IIS组件、PHP环境、MySQL数据库。
springboot测试中主程序中能加载bean测试中无法加载bean 如遇到springboot版本的问题导致bean类无法注入到项目中,可能是注解和springboot版本不匹配导致启动类启动时扫描不到相应的bean类
相关文章
- javascript包装对象
- 细说JavaScript对象(3):hasOwnProperty
- Javascript Prototypes之旅(A Plain English Guide to JavaScript Prototypes译文)
- JavaScript经典代码【二】【javascript判断用户点了鼠标左键还是右键】
- [Javascript] Filter out Duplicates from Flat JavaScript Array with array.filter / reduce / Set
- [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript
- [Javascript] Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()
- [Javascript] Create an Image with JavaScript Using Fetch and URL.createObjectURL
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] JavaScript赋值时的传值与传址
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [WASM] Read WebAssembly Memory from JavaScript
- [Javascript] Linting JavaScript with ESLint
- es6 javascript的class的静态方法、属性和实例属性
- 由闭包引起的对javascript代码可维护性的思考
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain (Object.setPrototypeOf())
- [Javascript] Hide Properties from Showing Up in "for ... in" Loops in JavaScript
- [Javascript] Create an Image with JavaScript Using Fetch and URL.createObjectURL
- [Algorithms] Refactor a Loop in JavaScript to Use Recursion
- [Javascript] JavaScript赋值时的传值与传址
- [Javascript] Compose multiple functions for new behavior in JavaScript
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] Linting JavaScript with ESLint
- [Javascript] Hoisting in JavaScript
- javascript面向对象之Javascript 继承
- SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示试读版
- 使用HANA Web-based Development Workbench创建最简单的Server Side JavaScript
- jQWidgets 15.1.0 JavaScript UI Crack
- JavaScript基础语法(数据类型)
- JavaScript-4.6鼠标事件监听,获取鼠标坐标window.event---ShinePans
- Javascript中String对象的的简单学习
- 每天一个JavaScript实例-动态省份选择城市
- Javascript 将一个句子中的单词首字母转成大写
- web前端Javascript学习之了解JavaScript弹出框
- web前端框架Javascript开发基础之JavaScript作用域