应该在客户端（使用JavaScript / JQuery）提供多少防火快速表单提交？ [英] How much prevention of rapid-fire form submissions should be on the client-side (with JavaScript/JQuery)?

问题描述

我有这些类似按钮在 JQuery / Django教程我写道：

<td id="toggle_color_like_cell_{{ color.id }}" class="td__toggle_color_like_button" data-color_id="{{ color.id }}">
    {% include "color_liker/color_like_link__html_snippet.txt" %}
</td>

其中 color_like_link__html_snippet.txt p>

where color_like_link__html_snippet.txt is:

<button class="button_{% if not color.is_favorited %}un{% endif %}liked"
   >{% if color.is_favorited %}Yes{% else %}No{% endif %}</button>

以下 JQuery-JavaScript是AJAX调用来切换像按钮（它改变了文本之间的是我喜欢它和否我不） ，因为每次点击都会触发数据库，​​因此它也可以防止过快的/紧密的点击。

The following JQuery-JavaScript is the AJAX call to toggle the like button (which changes the text between "Yes" I like it and "No" I don't), and, since each click hits the database, it also prevents clicks that are too rapid/close together.

我的问题是攻击预防集成在客户端？我猜想一个真正的DDOS很容易超过任何JavaScript保护，但用户可以尝试只是点击事情快速，这是可以说是值得保护的东西。

My question is how much "attack prevention" like this should be integrated on the client-side? I am guessing a true DDOS would easily get past any JavaScript protection, but a user could try to just click things rapidly, and that is arguably something worth protecting against.

这种保护将使得代码显着更不复杂。我不知道这里最好的是什么。

Eliminating this protection would make the code significantly less complicated. I'm not sure what's best here.

/*
   This file must be imported immediately-before the close-</body> 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
   <link to processLike>

   Equal to <code>500</code>.

   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 <link to MILLS_TO_IGNORE_LIKES>
 */

续：处理器功能：

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);
};

续：主要功能：

/**
   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);
});

推荐答案

客户端脚本

但是，如果您使用了以下内容，您尝试执行的操作（不是安全措施图书馆， underscore.js 具有一系列内置的功能。

But what you are trying to do ( again not a security measure ) is a lot simpler if you use a library, underscore.js has a pretty good set of functions built into it.

您可以使用debounce来完成您想要完成的操作

you can use debounce for what you are trying to accomplish

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

按钮只会在最后一次调用函数后500毫秒执行函数，每隔最多500毫秒一次...

The button will only execute the function 500 milliseconds after the last call to it, effectively limiting the call to once every 500 milliseconds at most...

这不是安全措施或DDOS防护措施，您必须服务器

这篇关于应该在客户端（使用JavaScript / JQuery）提供多少防火快速表单提交？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！