Talk about the problem of preventing others from debugging websites through console based on JS implementation

Preface

Hello everyone , Today, let's talk about the browser console , As a programmer , I definitely don't want my code to be debugged repeatedly by others , In case of being debugged by others bug What do I do ？ How to deal with malicious attacks by malicious people who obtain interface information ？ therefore , Now JavaScript It is necessary to prevent censorship from opening the console ~

Well known , To open the console , There are three ways ,

• F12

• Right click ==》 Check

• browser ==》 More tools ==》 Developer tools （ Shortcut key ：ctrl+shift+i）

It should be noted that ： The first two can be blocked by code , But the last way to open the console cannot be stopped . Then let's start from this angle , Take care of this process ~

Prevent opening the console

If you can stop it, stop it first , Strangle the action of opening the console in the cradle ~

prevent F12 event

window.onkeydown = window.onkeyup = window.onkeypress = function (event) { 
 //  Determine whether to press F12,F12 The key code is 123 
 if (event.keyCode = 123) { 
 event.preventDefault() //  Prevent default event behavior  
 window.event.returnValue = false 
 } 
}


The effect is as follows （ Press F12 No response ）：

I can't see any effect hey ！

Block right click events

Add a custom event for the right-click , You can disable  

oncontextmenu

  Event is triggered when the user right clicks the mouse in the element and opens the context menu .

window.oncontextmenu = function() { 
 event.preventDefault() //  Prevent default event behavior  
 return false 
}


The effect is as follows （ Right click no response ）：

Still can't see any effect hey ！

JS Operation console

Although it prevents some ways to open the console , But there will still be fish that slip through the net

browser ==》 More tools ==》 Developer tools （ Shortcut key ：ctrl+shift+i）

  Open the console , Then we need to do some more articles on the console after opening ~

Regularly check browser window changes

If you open the console , The browser window will change , Take advantage of this feature , We can make the following monitoring ：

let threshold = 160 //  Open the wide or high threshold of the console  
window.setInterval(function() { 
 if (window.outerWidth - window.innerWidth > threshold || 
 window.outerHeight - window.innerHeight > threshold) { 
 //  If you open the console , Then refresh the page  
 window.location.reload() 
 } 
}, 1000)


The effect is as follows （ It can be seen that after opening the console , The page is constantly refreshed ）：

Of course , If the user changes the console to floating window mode , Then this monitoring will be invalid , And when the user switches to non full screen , This function may also be touched by mistake , So this method still has some shortcomings , You can make a supplement .

Open the console pop-up window , Enable debugging debug debugging

Console pop-up debug debugging , Maybe a lot of people don't know much about , It's actually a very simple function .

debugger

  Statement is used to stop execution JS Code , And call  ( If available )  Debug function .

Use  

debugger

  Statement is similar to setting breakpoints in code .

We can add the following code to the code to realize

debugger

Debugging of ：

The first one is debug debugging

setInterval(function() {
 check()
}, 1000);
var check = function() {
 function doCheck(a) {
 if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
 (function() {}
 ["constructor"]("debugger")())
 } else {
 (function() {}
 ["constructor"]("debugger")())
 }
 doCheck(++a)
 }
 try {
 doCheck(0)
 } catch (err) {}
};
check();


The effect is as follows （ It can be seen that after opening the console , become debug Pattern ）：

The second kind debug debugging

if(window.location.href.indexOf('#debug')==-1){
 setInterval(function(){
 (function (a) {return (function (a) {return (Function('Function(arguments[0]+"' + a + '")()'))})(a)})('bugger')('de', 0, 0, (0, 0))
 }, 1000)
}


The effect is as follows （ And the last one debug Same pattern , It can be seen that after opening the console , become debug Pattern ）：

Although the console pop-up window is opened debug debugging , But the console is still on , You can still view relevant files and codes , It can also be cleared on the console again debug The mode will be partially debugged . So is there a better way ？

Open the console prompt （ Jump can be realized url Or refresh ）

function toDevtools(){

 let num = 0
 var devtools = new Date()
 devtools.toString = function() {
 num++;
 if(num>0){
 alert(' The console is open ')
 //  You can write the logic of refresh or jump
 }
 }
 console.log(devtools);
}
toDevtools()


The effect is as follows ：

End of the flower ！！！

Postscript

I hope the content shared today will help you , Through the above code, you can monitor whether the console is opened and the subsequent logical operations , Prevent others from debugging code , There are many scenarios in practical applications ~