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

Javascript 如何防止用户在控制台中执行js函数,javascript,Javascript,我能做些什么来阻止用户从控制台运行文件中的js函数吗?我在这里有一个getReward功能: function getReward(){ $('.reward-button').remove(); $('#rewardBtn').remove(); document.getElementById("fightInfo").innerHTML = '<strong>You</strong> won the fight.<

我能做些什么来阻止用户从控制台运行文件中的js函数吗?我在这里有一个
getReward
功能:

    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";
    }
函数getReward(){ $('.reward button').remove(); $('#rewardBtn')。删除(); document.getElementById(“fightInfo”).innerHTML= “你赢了这场战斗。
奖励:
金牌:'+Gold+'
经验:'+EXP+'
' + “
” + '⚔️
返回竞技场'; socket.emit(“双赢”{ 黄金:黄金, exp:exp, 用户名:用户名, enemyname:enemyname }); } 函数backToArena(){ window.location.href=“/arena”; } 问题是用户只需输入console
getReward()他会自动得到奖励,因为套接字工作了,它从客户端转到服务器端。有没有办法防止这种情况发生

更新

 document.getElementById("rewardBtn").innerHTML = 
    '<button style="background-color: blue; font-size: 24px;" class="btn btn-primary" id="reward-button">Get reward 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";
  }
})();
document.getElementById(“rewardBtn”).innerHTML=

'Get reward只需将整个脚本包装在一个IIFE(立即调用的函数表达式)中,这样
getReward
(以及所有其他函数)就不在顶层。顶层的函数(和其他变量)自动分配给
窗口
,因此只需在控制台中键入函数名即可调用。但是,如果在另一个函数中声明了一个函数,则内部函数将不会分配给全局对象

(()=>{
函数getReward(){
$('.reward button').remove();
$('#rewardBtn')。删除();
document.getElementById(“fightInfo”).innerHTML=
“你赢了这场战斗。
奖励:
金牌:'+Gold+'
经验:'+EXP+'
' + “
” + '⚔️
返回竞技场'; socket.emit(“双赢”{ 黄金:黄金, exp:exp, 用户名:用户名, enemyname:enemyname }); } 函数backToArena(){ window.location.href=“/arena”; } })();

在IIFE中包装脚本不仅有助于安全性(安全性不高,但比开放控制台和类型函数不安全性更好),而且也有助于避免污染全局名称空间,这在可能的情况下是最好避免的。

这使得它对用户来说稍微不那么琐碎,但是作弊还是不难。好吧,但是现在当我点击奖励按钮时,它说函数
getraward
不是defined@abraom_185听起来您使用的是内联属性处理程序,这不是一个好主意-而是使用Javascript分配侦听器,在IIFE内。@确保性能,因此最好在
$(按钮)内运行此函数
?@abraom_185当然可以,但是不需要导入像jQuery这样的大型库来附加侦听器,您可以使用
addEventListener
,例如,
document.querySelector(“”).addEventListener('click',getReward))我知道这个评论不会回答你的问题,但是考虑到你的架构和实现,是不是要在后端实现成功的逻辑。通过这种方式,您可以将getReward()逻辑导出到用户无法触发奖励过程的位置。任何和所有客户端代码都是不安全的。您可以截取所有JavaScript并在控制台中运行它。您甚至可以编写自己的代码来针对页面运行。您可以隐藏代码,但不能使其无法在开发工具中执行。Web组装可能是一种可能的选择,但我敢说,使用它实现的任何功能仍然可以通过JS执行,所以可能不会有任何区别。(尚未对web组件进行足够的研究。)