How to prevent user from executing js function in console

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.

• SCO: I know this comment will not answer your question, but given your architecture and implementation, is it to implement the winning logic on the backend side. This way you could export the getReward() logic to a place where the user has no chanc of triggering the rewarding process.
• ste2425: Any and all client side code is insecure. You can intercept all JavaScript and run it in the console. You can even write your own code to run against the page. You can obscure the code but not make it impossible to execute in dev tools. Web Assembly might be an a possible option but i dare say any features implemented with it can can still be executed through JS so probably wont make any difference. (Not looked into web assembly enough yet.)
• CoderMuffin: Even if you somehow manage to prevent console usage, users can still run js bookmarklets for the same effect

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.

• Quentin: That makes it slightly less trivial for the user, but it still isn't hard to cheat.
• zlotte: Okay but now when I click the button for the reward it says that function getReward is not defined
• CertainPerformance: @abraom_185 Sounds like you're using inline attribute handlers, which are not a good idea - assign the listener with Javascript instead, inside the IIFE.
• zlotte: @CertainPerformance So it would be good idea to run this function inside $(button).on('click', function(){}); ?
• CertainPerformance: @abraom_185 Sure, but there's no need to import a big library like jQuery just to attach a listener, you can use addEventListener, for example, document.querySelector('<yourbuttonselector>').addEventListener('click', getReward);

Answer 2

here is magic

"use strict";
!function() {
 function detectDevTool(allow) {
 if(isNaN(+allow)) allow = 100;
 var start = +new Date();
 debugger;
 var end = +new Date();
 if(isNaN(start) || isNaN(end) || end - start > allow) {
 consoleCheck();
 }
 }
 if(window.attachEvent)
 {
 if (document.readyState === "complete" || document.readyState === "interactive")
 {
 detectDevTool();
 window.attachEvent('onresize', detectDevTool);
 window.attachEvent('onmousemove', detectDevTool);
 window.attachEvent('onfocus', detectDevTool);
 window.attachEvent('onblur', detectDevTool);
 }
 else
 {
 setTimeout(argument.callee, 0);
 }
 }
 else
 {
 window.addEventListener('load', detectDevTool);
 window.addEventListener('resize', detectDevTool);
 window.addEventListener('mousemove', detectDevTool);
 window.addEventListener('focus', detectDevTool);
 window.addEventListener('blur', detectDevTool);
 }
}();
function consoleCheck()
{
 document.querySelector('body').innerHTML = 'We strongly support to not using console for extra actions!';
}

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

• Community: Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
• saf1: if you have the console open before loading, you can still see the console and execute function.
• Mahesh Thorat: Hello @saf1 you can try out above code hope this could helps you and other community.