This is the 4th day of my participation in the August More Text Challenge

preface

See a lot of community are discussing how to debug, how advanced debugging, and some of the strange technology of debugging, today I want to talk with you, how to forbid debugging, forbid others to debug our program

Why do I have this article? It comes from my experience of looking for pirated movies. Driven by curiosity, many of these platforms only do handling, not storage, because it is illegal to store pirated movies and provide them to others, especially the new movies that have just come out! At that time, I was curious to see the console of a certain station, to know how they used what interface, how to request, and what format the request came from. With such curiosity, I started my wonderful journey.

I’m not sure what you’ll learn, but here’s what I hope you’ll learn from this article:

  1. How to easily prevent your program from being maliciously debugged by others
  2. How can reverse thinking learn to debug better

The specific implementation

Methods to prevent debugging, here we mainly through the continuous debugger method to frantically output breakpoints, so that the console opened after the program can not normally execute We all know that the debugger only executes when the console is opened, so all the following methods are based on this feature. Without further ado, I will show you the truth through the following cases, first code:

Method one:

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

From the code above, we can see that when we open the console in the page, we get the following result:

The following points need to be stated here:

  1. Application isdebuggerBecause of the blockage, we cannot add breakpoint debugging to the corresponding JS code in Source Tab as usual, and cannot debug the execution logic of the program. Code that is unbelievably complex and obfuscated is unbelievably hard to read! Usually we add it to the left of sourcebreakpointTo make the program stop every time it reaches the dotted point, so that we can look at the value of some variable or the flow logic of the step (as shown below).

  1. As we all know, 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 either, when we open the console, it will displaydebuggerBlocking us, we can handle it with the following workaround, or we can use a packet capture tool to see the specific request

Instead of looking at the solution, think about how you would break through this barrier at this point. The first time I encountered this situation, I was also very confused and did not know how to deal with it. Later, I found that the problem was not too simple, we can look at it with questions:

How do we solve the first example? (Bypass it)

The answer is: Disable breakpoints

As you can see, simply click the Deactivate BreakPoints button on the Source Tab of the Chrome console or press Ctrl + F8 (as shown below). But for those unfamiliar with the console, it’s hard to think of going there.

But is this the end of the article? Well, I can’t resist my friends’ “That’s it?” 😂

In fact, the above solution does not help us solve the fundamental problem, we need to do debugging, although the above debugger is removed, but we can not click on the left of each line of code to add breakpoints, so the fundamental problem, not solved, just remove the crazy eyesore Debugger, we still have to find another way

Method 2:

By setting logPoint to false for the corresponding line of code, and then pressing Enter to refresh the page, the infinite Debugger is skipped and we can debug happily

There’s another way to do it

Add script Ignore list to add lines of code or files that need to be ignored



As you can see, we can also restore the original state by removing the added ignore code from the Script Ignore list

But, you’re so smart, you can’t think of a solution?

For the first method above 🎈

The setInterval () = > {debugger; }, 50); On one line, you can set logPoint to false, it doesn’t work, it’s still crazy debugger, even though you might want to format setInterval(() => {debugger; }, 50); Making it multi-line is also useless and will still reload the debugger after refreshing

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

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

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

We can rewrite the debugger as Function(“debugger”)(); In the form of; The debugger generated by the Function constructor opens a temporary JS file every time it executes

The result is the following

This infinite set of Eva, the true enough malicious, we should firmly believe that justice will eventually win, not to want to illicit debugging program of us, so we’re going to put all sorts of conditions are considered, this method is the most hated, but this isn’t the ~ (boy ~ 😀 want to illegal debugging I program, that you have to beat me)

Reinforce the above methods

Because the above code is not encrypted confusion, more or less may be read by others, so we encrypt confusion to see what kind of good guy, you how to read?

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,{}));Copy the code

After formatting

Function(“debugger”).call() instead of (Function(){return false; })[“constructor”](“debugger”)[“call”](); When the difference between the width and height of the window outside and the width and height of the window inside is greater than a certain value, I will empty the contents of the body and see if you can operate my button ah what ~ hahaha 😀

In particular, it should be noted that: Like toG or to protect their copyright or are some of the project is more sensitive, for security reasons after deployment to a production environment is best not to let others debugging, of course, the front end is some, before and after the need to end together, can be very good for the protection of the private 🧡 programs or data

Finally: attach this unconfused hard-won code (remember to use after the confusion oh ~) 😢 must remember to like add attention ~ original is not easy.

You can use this as your utility function for projects where you want to make sure that no one else can easily debug it. (Of course, it still has bugs, but we can use similar logic to change many more complicated restrictions, the most violent of which can even be passed window.close() as soon as the console opens; To close the debug window), feel free to leave a more fun way to learn together in the comments section at ✨

(() = > {
    function block() {
        if (
            window.outerHeight - window.innerHeight > 200 ||
            window.outerWidth - window.innerWidth > 200
        ) {
            document.body.innerHTML =
                "Illegal debugging detected, please close and refresh again!";
        }
        setInterval(() = >{(function () {
                return false;
            }
                ["constructor"] ("debugger")
                ["call"] ()); },50);
    }
    try {
        block();
    } catch (err) {}
})();
Copy the code

Recommend a tip for debugging your page

After all this talk about preventing debugging, one of the most interesting ways to debug styles is to add style=”display: block” to the style TAB, which is contenteditable

Copy the code below into your HTML file and play with it

<! DOCTYPEhtml>
<body>
    <div>Debug me</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>
Copy the code

The last

As far as I know, this is the only way to disable debugging, but there are plenty of other fun ways to do it. Leave a comment and learn together

Finally throw a question, and how to monitor whether the console is opened (I mentioned above through the inside and outside the window of high to width difference can bypass) by using the method of independent debugging window, online to find some methods, seem useless, interested in and have a clue, or method has a friend can be a friend in the comments below about your own ideas, also can add We play together as a group

Follow my public account Qianpu Village for 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 we will invite you to join our front-end communication learning group to program for happiness ~ 🦄. I am Rong Ding, and I am very happy to grow stronger with you in this era of crazy and rapid iteration of Internet technology! 😉