如何防止客户端用JS模拟点击（方案修正版）

 

该方案的原理是利用人的肉眼识别和程序识别的差距，实现防止JS模拟点击，想法类似网上的各种验证码。

 

1 首先我们要建立N个感应区(div)，假设为7个，这个复杂度可以自行调整，数量越大复杂度越高。

2 然后在服务器端生成4个数组，分别对应按钮的上下左右4角,4个数组成员分别用顺序表示从上到下，从左到右，假设生成如图：

 

随机设定一个原始状态，那么对应的数组假设为 arrtop={7:true,6:true,1:false} arrleft={2:true} arrright={3:false,4:false} arrbottom={5:true}

3 通过该数组动态生成div并通过css/js将div放置到对应位置,并设定感应区onmouseover/onmouseout时分别做一次非运算，并将结果存入一hidden元素，假设叠加最大层数是5，那么做一个保存最近5次划动的队列，按钮提交时提交该队列的值。

4 假设鼠标经过无目的晃悠后从上方划入并点击按钮，那么我们可能得到这么一个数组：

arrx1={2:false,4:true,7:false,6:false,1:true}，其实这个数字就相当于本次点击验证码，要几位你可以自行设定，

从最后1位为1，可以得到该划入方向是arrtop,将该数组根据arrtop大小从后往前截取，我们可以得到：

 arrx2={7:false,6:false,1:true}  原始的arrtop={7:true,6:true,1:false}

然后将arrx2与 arrtop比较，得到结果为全非，那么即表示该次点击有效。

 

可靠性：

该方法只需要在鼠标划过时做一次非运算保存到队列即可，安全方便。

 

为什么他能防止JS模拟：

1 JS只能得到感应区（div）的ID和值，但无法了解值的含义。

2 JS不可能从代码上判断哪个区被放置在按钮周围，也无法判断防止了几层，相反如果将区域染色用肉眼可以轻松识别，人工用鼠标点击也必然触发正确结果。

所以JS无法模拟用户点击，因为传回去的参数是错误的，为了防止暴力猜测，服务器端可设置点击间隔。

 

 

PS：个人觉得采用复杂的技术（如JS沙箱，多层嵌套，动态生成脚本等）不可行，因为越复杂的技术会带来越多的问题，可能防是防住了其他漏洞又跳出来，所以这个方案是跳过复杂的脚本控制，而直接从程序的识别能力上着手，欢迎讨论。