javascript - How can I build a secure timer based button? -


here's mean:

i have written simple timer counts down 5 minutes. @ end of 5 minutes, i'd display button user press. can see code @ end of post.

i not want user able press see button before timer runs out. don't want user able go js console , call "document.getelementbyid("button").style.display = 'block';" , have access button.

what ways can this, preferably entirely on client side? there way entirely on client side?

my backend ruby on rails - if there's easy solution using ror, i'd curious too. frankly, i'd love know if there's client side way of doing this!

<html>  <script>  function starttimer(duration, display) {    var start = date.now(),        diff,        minutes,        seconds;      function timer(timerintervalid) {      diff = duration - (((date.now() - start) / 1000) | 0);        minutes = (diff / 60) | 0;      seconds = (diff % 60) | 0;        minutes = minutes < 10 ? "0" + minutes : minutes;      seconds = seconds < 10 ? "0" + seconds : seconds;        display.textcontent = minutes + ":" + seconds;         if (minutes == "00" && seconds == "00" && timerintervalid != undefined) {        clearinterval(timerintervalid);        document.getelementbyid("button").style.display = 'block';      }        if (diff <= 0) {        start = date.now() + 1000;      }    };      timer();    var timerintervalid = setinterval(function() { timer(timerintervalid) }, 1000);  }    window.onload = function () {    var timerlength = 60 * .15,      display = document.queryselector('#time');    starttimer(timerlength, display);  };    </script>  <body>    <div>registration closes in <span id="time"></span> minutes!</div>    <div id = "button" style = "display: none;">button</div>  </body>  </html>

there no client side solution. because if yo implement using client side, user can @ way change timer (as said, show button).

to sure 5 minutes pass have communicate server, can implement using ajax.

at timer start can call action @ server , start timer on server side, using sessions variable, when 5 minutes pass execute ajax call on other action check if 5 minutes have pass (this way 5 minutes, , user can not change on client).

if 5 minutes have passed, return html user, inside html return button want show, user can not inspect html, , set visible, because server returns button after 5 minutes, , user can click on it.


Comments