How to prevent others from maliciously debugging your web program

Preface

Seeing that many communities are discussing , how to advanced debugging, and some debugging , today I want to talk to you, , prohibit others from debugging our program

Why is there this article? It originated from an encounter when I was looking for pirated movies, driven by a curiosity, because many of these platforms only do handling, not storage, because it is illegal to store pirated movies to others. , Especially the kind of new movie that just came out! I was curious about watching the console of a certain station to understand how they used what interface, how to request, and the format of the request. I was holding such curiosity. , Started my wonderful journey...

reading this article, you will learn
I can't tell what you can learn, but here is what I hope you can learn from this article:

1. How to simply prevent your program from being maliciously debugged by others
2. Reverse thinking to learn how to better debug

Implementation

To prevent debugging, here we mainly debugger the method of constantly 061285a83bf41e to output breakpoints wildly, so that the program cannot execute normally after the console is opened.
We all know that debugger will only be executed when the console is opened, so all the following methods are carried out around this feature, not much nonsense, I will show you The principle of the ruler is one foot high , first go to the code:

method one:

(() => {
    function block() {
        setInterval(() => {
            debugger;
        }, 50);
    }
    try {
        block();
    } catch (err) {}
})();

From the code above, we can see that after opening the console on the page, the following results will be displayed:

The following points need to be explained here:

1. The program was debugger . We could not add breakpoint debugging at the corresponding js code in the Source Tab as before, and could not debug the execution logic of the program. The code after the program is extremely complex and obfuscated is extremely difficult to read! Usually breakpoint to the left of the source to stop the program every time we go to the dotted place, so that we can view the value of some variables or the flow logic of the steps (as shown in the figure below)

2. We all know that the first time we open the console, we can't see any requests in the network tab, so we want to use the network tab to see what requests the web page has made, but we can't see it. When we open the console, it will debugger blocked us, we can deal with the following solutions, or use a packet capture tool to view the specific request

everyone can ignore the solution first, think about how to break through this barrier at this time if it is you? I don’t know how to deal with it, and I found that the problem is not too simple. We can look at it with questions:

For the first example, how do we solve it? (bypass it)

answer to 161285a83bf64c is: Prohibit breakpoints

It can be seen that it is very simple, click the Deactivate breakpoints button on the Source Tab page of the Chrome console or press Ctrl + f8 (as shown in the figure below). But for those who are not familiar with the console, it is difficult to think of going here.

But, does this article end like this? Then I can't stand up to my friends' "This is it?" 😂

In fact, the above solution did not help us solve the fundamental problem. we need to do for debugger breakpoint to by clicking the line number on the left of each line of code, so The fundamental problem has not been solved, but the crazy debugger is removed, we still have to find another way

Method Two:

For the corresponding line of code, by adding logpoint to false, and then press Enter to refresh the web page, we found that the unlimited debugger was successfully skipped, so we can debug freely happily~

corresponds to another method

That is, through add script ignore list to add lines or files that need to be ignored for execution

you can see from 161285a83bf7b9, we can also restore the initial state by deleting the ignored code that has been added in the script ignore list

But, you are so smart, so people can't think of countermeasures?

for the first method above 🎈

setInterval(() => {debugger;}, 50); in one line. Even if you add logpoint to false, it is useless. It is still a crazy debugger. Even if you might think, format the code in the lower left corner to format setInterval(() => {debugger;}, 50); make it multi-line. Useless, it will still re-pop the debugger after refresh

(() => {
    function block() {
        setInterval(() => {debugger;}, 50);
    }
    try {
        block();
    } catch (err) {}
})();

For the second method, we modify the code as follows 😬

(() => {
    function block() {
        setInterval(() => {
            Function("debugger")();
        }, 50);
    }
    try {
        block();
    } catch (err) {}
})();

We can debugger rewriting Function("debugger")(); ; the debugger generated by the Function constructor will open a temporary js file every time it is executed, haha~ the other party expressed helplessness😅

then will have the following result

. We must firmly believe that 161285a83bf919 justice will always win , and we cannot give people who want to illegally debug our programs a chance, so we must consider all situations thoroughly. can say that this method is The most hated one, but this is not over yet~ (good guy~ 😀 If you want to debug my program illegally, then you have to beat me)

Strengthen the above methods

Since the above code is not encrypted and obfuscated, it is more or less likely to be read by others, so let's encrypt and obfuscate to see what it is.
Good guy, how do you read this?

eval(function(c,g,a,b,d,e){d=String;if(!"".replace(/^/,String)){for(;a--;)e[a]=b[a]||a;b=[function(f){return e[f]}];d=function(){return"\\w+"};a=1}for(;a--;)b[a]&&(c=c.replace(new RegExp("\\b"+d(a)+"\\b","g"),b[a]));return c}('(()=>{1 0(){2(()=>{3("4")()},5)}6{0()}7(8){}})();',9,9,"block function setInterval Function debugger 50 try catch err".split(" "),0,{}));

What it looks like after formatting

We continue to modify the code to make it as difficult as possible for the other party to identify our code
Function("debugger").call() to (function(){return false;})["constructor"]("debugger")["call"]();
And, add a condition, when the difference between the outer width and height of the window and the inner width and height is greater than a certain value, I will clear all the content in the body, and see if you can operate my buttons~hahaha😀

needs special explanation is : projects like toG or some to protect their copyrights or some more sensitive projects, for security reasons, it is best not to let others debug after deployment to the production environment, of course , The front-end does just a little bit, and the front-end and back-end work together to protect the project or data privately 🧡

Finally: Attach this unobfuscated hard-won code (remember to use it after obfuscation~) 😢 Be sure to remember to like and pay attention~ The original is not easy.

You can use it as your tool function and reference it in projects that need not be easily debugged by others

(() => {
    function block() {
        if (
            window.outerHeight - window.innerHeight > 200 ||
            window.outerWidth - window.innerWidth > 200
        ) {
            document.body.innerHTML =
                "检测到非法调试,请关闭后刷新重试!";
        }
        setInterval(() => {
            (function () {
                return false;
            }
                ["constructor"]("debugger")
                ["call"]());
        }, 50);
    }
    try {
        block();
    } catch (err) {}
})();

Recommend a tip to debug the page

Having said so much to prevent being debugged, then finally I also talk about a debugging style method that I think is bright.
By adding the style="display: block" and contenteditable two attributes to the style tag to achieve a convenient debugging style on the page

Copy the code below into your html file, and play with it~

<!DOCTYPE html>
<body>
    <div>来调试我吧~</div>
    <style style="display: block" contenteditable>
        body {
            background-color: rgb(140, 209, 230);
            color: white;
        }
        div {
            background-color: green;
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center;
        }
    </style>
</body>

finally

The only methods I know to prohibit debugging are as mentioned above, but there must be a lot of fun, friends can leave a message in the comment area and learn together~

finally raised a question, how to monitor whether the console is opened (the difference between the height and width of the window inside and outside I mentioned above can actually be bypassed by the independent debugging window), I found some methods on the Internet, and they seem to be useless , Friends who are interested and have a clue, or who already have a method can talk about their thoughts under the comments, or join our exchange group to play together~

Follow my public to get more fun and interesting front-end knowledge. If you are also passionate about technology and fascinated by it, welcome to add my personal WeChat (ChicSparrow), and I will invite you to join our front-end communication learning group and work together for happy programming~ 🦄
I am Rongding. In this era of crazy and rapid iteration of Internet technology, I am very happy to become stronger with you! 😉