如何防止用户在控制台中执行 js 函数

Question

Is there anything I can do to prevent users to run js function which is in file from console ? I have this getReward function here:

    function getReward(){

    $('.reward-button').remove();
    $('#rewardBtn').remove();

    document.getElementById("fightInfo").innerHTML = 

    '<strong>You</strong> won the fight.<br><strong>Reward:</strong><br>Gold: ' +gold+' <img src="/img/gold.png" style="margin-top: -1%"><br>EXP: '+exp+'<br>'
    +
    '<br>'
    +
    '<button style="font-size: 24px;" class="btn btn-danger" onclick="backToArena();">⚔️<br>Back To Arena</button>';

    socket.emit('win-fight', {
        gold: gold,
        exp: exp,
        username: userName,
        enemyname: enemyName
    });   

}

    function backToArena(){
        window.location.href = "/arena";
    }

The problem is that user can just type in console getReward(); and he automatically get's the reward because then socket works and it goes to server side from client side. Is there anyway to prevent this ?

UPDATE

 document.getElementById("rewardBtn").innerHTML = 
    '<button style="background-color: blue; font-size: 24px;" class="btn btn-primary" id="reward-button">Get reward 🏆</button>';

And then I do this:

document.querySelector('#reward-button').addEventListener('click', getReward);

But this doesn't run getReward function nothing happens no error.

Answer 1

Simply wrap the whole script in an IIFE (Immediately Invoked Function Expression) so that getReward (and all your other functions) are not on the top level. Functions (and other variables) on the top level are automatically assigned to window , and are thus callable by simply typing the function name into the console. But, if a function is declared inside another function , the inner function won't be assigned to the global object.

(() => {
  function getReward(){

    $('.reward-button').remove();
    $('#rewardBtn').remove();

    document.getElementById("fightInfo").innerHTML = 

      '<strong>You</strong> won the fight.<br><strong>Reward:</strong><br>Gold: ' +gold+' <img src="/img/gold.png" style="margin-top: -1%"><br>EXP: '+exp+'<br>'
      +
      '<br>'
      +
      '<button style="font-size: 24px;" class="btn btn-danger" onclick="backToArena();">⚔️<br>Back To Arena</button>';

    socket.emit('win-fight', {
      gold: gold,
      exp: exp,
      username: userName,
      enemyname: enemyName
    });   

  }

  function backToArena(){
    window.location.href = "/arena";
  }
})();

Wrapping your scripts in an IIFE is useful not only for security (not good security, but better than open-console-and-type-function insecurity), but also for the sake of avoiding pollution of the global namespace, which is best avoided when possible.

Answer 2

here is magic

var curWidth = document.documentElement.clientWidth;
var curHeight = document.documentElement.clientHeight;
function consoleCheck()
{
  var temp_curHeight = document.documentElement.clientHeight;
  var temp_curWidth = document.documentElement.clientWidth;

  if(curHeight != temp_curHeight || curWidth != temp_curWidth)
  {
    var devtools = function() {};
    devtools.toString = function() {
    if (!this.opened) {
      $('body').remove();
    }
    this.opened = true;
    }
    console.log('YOU CANNOT HACK THIS SITE');
    console.log('%c', devtools);
  }
  else{
    location.reload();
  }
}

$(window).resize(function () {
  consoleCheck() 
});
$( window ).on( "orientationchange", function( ) {
  consoleCheck()
});

Just add this script in your project it will definitely stops inspecting.