在客户端（使用JavaScript / JQuery）应该提供多少预防快速表单提交？

我在JQuery / Django教程中有这些按钮 ，我写道：

 {% include "color_liker/color_like_link__html_snippet.txt" %}  

其中color_like_link__html_snippet.txt是：

 {% if color.is_favorited %}Yes{% else %}No{% endif %} 

以下 JQuery-JavaScript是用于切换类似按钮的AJAX调用（它将文本更改为“是”我喜欢它和“否”我不喜欢），并且，因为每次单击都会访问数据库，所以它也会阻止点击过于快速/紧密相连。

我的问题是这样的“防攻击”应该在客户端集成多少？ 我猜测真正的DDOS很容易通过任何JavaScript保护，但用户可以尝试快速点击，这可以说是值得保护的东西。

消除这种保护会使代码变得更加复杂。 我不确定这里最好的是什么。

 /* This file must be imported immediately-before the close- tag, and after JQuery is imported. */ /** The number of milliseconds to ignore clicks on the *same* like button, after a button *that was not ignored* was clicked. Used by  Equal to 500. The disabling and re-enabling is logged to the console. */ var MILLS_TO_IGNORE_LIKES = 500; /** Executes a like click. Triggered by clicks on the various yes/no links. The disabling and re-enabling is logged to the console. See  */ 

续：处理器function：

 var processLike = function() { //The click listener is no longer attached to THIS button //In this scope, "this" is the button just clicked on. //The "this" in processLikeInner is *not* the button just clicked on. var $button_just_clicked_on = $(this); //The value of the "data-color_id" attribute. var color_id = $button_just_clicked_on.data('color_id'); var processLikeInner = function(data, textStatus_ignored, jqXHR_ignored) { //alert("sf data='" + data + "', textStatus_ignored='" + textStatus_ignored + "', jqXHR_ignored='" + jqXHR_ignored + "', color_id='" + color_id + "'"); $('#toggle_color_like_cell_' + color_id).html(data); //Attack prevention. Dont process requests too close together. console.log('Like disabled for: ' + MILLS_TO_IGNORE_LIKES); setTimeout(function() { $button_just_clicked_on.one('click', processLike); console.log('Like re-enabled for color_id ' + color_id + ' '); }, MILLS_TO_IGNORE_LIKES); } var config = { url: LIKE_URL_PRE_ID + color_id + '/', dataType: 'html', success: processLikeInner }; $.ajax(config); }; 

续：主要function：

 /** The Ajax "main" function. Attaches the listeners to the elements on page load. */ $(document).ready(function() { /* There are many buttons having the class td__toggle_color_like_button This attaches a listener to *every one*. Calling this again would attach a *second* listener to every button, meaning each click would be processed twice. When a button is clicked, the listener for that *single button* is disabled. It's re-enabled in processLikeInner with $button_just_clicked_on.one('click', processLike); */ $('.td__toggle_color_like_button').one('click', processLike); }); 

Answer 1

您无法从客户端脚本执行安全性或攻击防范

但是如果你使用一个库，那么你想要做的事情（ 同样不是安全措施 ）要简单得多， 下划线.js内置了很多很好的function。

你可以使用debounce来完成你想要完成的任务

 $('#mybtn').click(_.debounce(function(e){ //do stuff },500)); 

该按钮仅在最后一次调用后500毫秒执行该function，有效地将呼叫限制为每500毫秒一次…

这不是安全性或DDOS预防措施，您必须在服务器上执行此类操作

Answer 2

基于konkked的回答 ，这就是我想出的。 请注意，这只需要underscore-min.js ，而不是underscore-min.map 。

 /** The number of milliseconds to ignore clicks on the *same* like button, after a button *that was not ignored* was clicked. Used by `$(document).ready()`. Equal to 500. The disabling and re-enabling is logged to the console. */ var MILLS_TO_IGNORE_LIKES = 500; 

续：处理器function

 /** Executes a like click. Triggered by clicks on the various yes/no links. The disabling and re-enabling is logged to the console. See  */ var processLike = function() { //In this scope, "this" is the button just clicked on. //The "this" in processServerResponse is *not* the button just clicked //on. var $button_just_clicked_on = $(this); //The value of the "data-color_id" attribute. var color_id = $button_just_clicked_on.data('color_id'); var processServerResponse = function(sersverResponse_data, textStatus_ignored, jqXHR_ignored) { //alert("sf sersverResponse_data='" + sersverResponse_data + "', textStatus_ignored='" + textStatus_ignored + "', jqXHR_ignored='" + jqXHR_ignored + "', color_id='" + color_id + "'"); $('#toggle_color_like_cell_' + color_id).html(sersverResponse_data); } var config = { url: LIKE_URL_PRE_ID + color_id + '/', dataType: 'html', success: processServerResponse //Should probably include a "fail" call, too. }; $.ajax(config); }; 

续：主要function：

 /** The Ajax "main" function. Attaches the listeners to the elements on page load. */ $(document).ready(function() { /* There are many buttons having the class td__toggle_color_like_button This attaches a listener to *every one*. Calling this again would attach a *second* listener to every button, meaning each click would be processed twice. --- Warning: Placing the true parameter outside of the debounce call: $('#color_search_text').keyup(_.debounce(processSearch, MILLS_TO_IGNORE_SEARCH), true); results in "TypeError: e.handler.apply is not a function" - https://stackoverflow.com/questions/24283006/e-handler-apply-is-not-a-function-in-jquery-table-sorter - https://stackoverflow.com/questions/22588794/firefox-only-error-with-jquery-handleobj-handler-apply-is-not-a-function */ // API: http://jashkenas.github.io/underscore/#debounce $('.td__toggle_color_like_button').click(_.debounce(processLike, MILLS_TO_IGNORE_LIKES, true)); });