对于双击/频繁点击的场景有时候并非恶意的攻击行为。
如网络延迟导致用户下意识多点击一次、又比如鼠标硬件异常出现单击变双击的情况。
当功能按钮被频繁点击将意味着多次向服务端发起数据请求。
在异步数据传输广泛的今天,很容易出现数据重复,数据库唯一校验失败,展示异常的情况。
举个简单易懂的例子:
比如在购物车中选中某个商品进行删除,如果无意间触发了频繁点击,界面可能提示商品不存在。
实际上是因为第一次触发删除服务端已经删除了此商品,第二次则会提示商品不存在。
这样的场景用户体验较差,此外如果一些关键性的功能没有增加频繁操作的预防措施,极有可能出现冗余的重复数据。
通过JS预防频繁点击误操作有很多种方式,主要分为两种,一种是只允许操作一次和限制时间或返回数据后放开操作限制。
如果界面中的某个按钮仅允许操作一次的实现逻辑非常简单。
在需要限制的方法外,页面中定义一个变量cFlag(点击开关),默认为true。
首次点击进入后,直接关闭开关,然后执行后续的操作。
//默认点击开关打开
var cFlag = true;
//提交方法
function submitForm() {
if(cFlag) {
//首次点击进入方法直接关闭开关
cFlag = false;
//执行后续ajax提交逻辑
//略
}else{
//如果希望增加一些友情提示可以增加else分支
alert('请勿频繁提交');
}
}
如果界面的按钮可以点击多次,但是想限制重复点击的时间。
我们可以在代码中增加一个恢复开关的语句
实例代码如下:
//默认点击开关打开
var cFlag = true;
//提交方法
function submitForm() {
if(cFlag) {
//首次点击进入方法直接关闭开关
cFlag = false;
//执行后续提交ajax逻辑
//返回数据后放开限制的场景,可以再ajax的返回方法中添加cFlag = true;
//代码执行完后增加定时恢复开关
//5秒钟恢复点击开关
setTimeout(function (){cFlag = true;}, 5000);
}else{
//如果希望增加一些友情提示可以增加else分支
alert('重复提交需要等待5秒');
}
}
如某功能按钮需要间隔30秒提交一次,时间过去15秒后,用户点击了给予提示还需要等待15秒。
该能力不建议完全通过JS实现(可以通过服务端来计算时间直接返回提示)。
并不是JS不能够实现,如果用户在10秒的时候刷新一下页面,计时就会被重置,这个限制就相当于存在漏洞。
但对于流程性强的页面实际还是可以使用的,因为这类页面一旦刷新就需要用户从头操作。
//提交按钮触发
$('#submit').click(function() {
var nowTime = new Date().getTime();
//给这个按钮增加一个点击事件的属性
var clickTime = $(this).attr('clickTime');
//存在点击时间说明被点击过,判断当前时间和单击时间
if( clickTime != "undefined" && (nowTime - clickTime < 30000)) {
var waitTime = 30000 - nowTime + clickTime;
waitTime = Math.parseInt(waitTime/1000);
alert('您需要在'+waitTime+'秒后方可提交');
return false;
}else{
//刷新最新的点击时间
$(this).attr('clickTime', nowTime);
//执行后续提交逻辑
//略
}
});
预防频繁点击可以减少数据库产生冗余数据的风险。
由于频繁点击产生的报错可能会覆盖首次点击的正常返回信息,会给用户造成很大的困扰。
当前还没有观点发布,欢迎您留下足迹!
在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换
自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在
严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()
绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果
跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码
HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作