如何防止upvote / downvote按钮的Autoclick Spam？

Question

I have a upvote button, which the user can press and a vote will be registered. On clicking this button again, the vote gets cancelled.

So each press of this button is doing a DataBase Write. If an autoclicker is used on this button continuously, continuous DB calls will happen. I want to prevent this. What can I do?

PS. I am sending an ajax query to the backend(running Django) when the upvote button is clicked.

Answer 1

You'd really want to check this on the server, so it doesn't matter if someone disables javascript.

If you're using PHP one option is to set a time limit between votes.. eg only allow one vote per minute.

So on every vote, store the time of the vote in a session variable, then ignore subsequent votes if it is within the time limit:

//on vote
$now=date('U');
if(!isset($_SESSION['lastvote']) || $now - $_SESSION['lastvote']<LIMIT){
    $_SESSION['lastvote']=$now;
    // do database call

}else{
    //throw error
}

Answer 2

Probably the easiest approach is to disable the buttons while a single operation is running.

To obtain this, assuming you're using a JQuery ajax request to call the "upvote" / "downvote" method you simply have to:

$("#upvoteButton").click(function)
{
    $("#upvoteButton").attr("disabled");
    $.ajax({
      url: 'url/upvote.extension',
      success: function(data) {
        $("#upvoteButton").removeAttr("disabled");
      }
    });
}

This way a single request is send & resolved per single tab / window.

Answer 3

If you trust that your users accept cookies, you could store the click together with the object id and a timestamp in the session, and test whether the user clicked the vote button during the last n seconds.

You also could disable the vote button on the web page with javascript, and enable it again after n seconds to revoke the vote.

Both suggestions are dependent on users who use a javascript enabled or cookie enabled browser.

If you have to take bots into consideration who just send the url repeatetly to the server, you need to take a different approach - eg check whether the current ip address has called the url in the last n seconds and raise a 403 Forbidden http error or something.

Answer 4

If you can use setTimeout you can try something like this:

var toggleVote = (function () {
  var voted = false,timeout;
  return function () {
     if( timeout )
       clearTimeout(timeout)

     voted = !voted

      timeout = setTimeout(function() {
        console.log("Ajax call - vote : " + voted)
      },400)
    }
  })()

document.getElementById("vote").addEventListener("click",toggleVote)

Heres an example on JSBin

Try mashing the "Click me" div

Answer 5

Easy way:

<button id="upvote" onclick="upvote(this)">Up</button>

<script>
   var upvote = function(x){
      $(x).removeAttr('onclick'); //if you click this button again, it will do nothing

      //call ajax to do something here...
      //...............
      //after finishing, add attribute onclick to the button
      $(x).attr('onclick', 'upvote(this)')
   };
</script>