Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Avoid the detection of "whether Chrome DevTools(console) is open"

Today I see this post Find out whether Chrome console is open .

@zswang gave the way to detect if Chrome DevTools(console) is open. That's really suprise me, then I began to think is there any way to walk around this detection technique?

There are two way to detect chrome DevTools is open(detail in above post)

  1. Using Object.defineProperty

    I can walk around this, it can be assign to another function.I have tried Object.defineProperty=null ,then the detect function die(I know write a mock function is better, here just an example)

  2. Using obj.__defineGetter__ (Object.prototype.__defineGetter__)

    Object.prototype.__defineGetter__= null would not break the detection, how to walk around?


Finally, I have to say I don't like to be monitored.Hope there is a proper way to walk around.

like image 462
Mithril Avatar asked Aug 12 '16 05:08

Mithril


People also ask

How do I stop Devtools from popping up in Chrome?

enabled - double-click the entry and toggle its value to false. this will generally disable the developer toolbar after you restart the browser.

How do I know if dev tools is open?

answer re: Detect if console/devtools is open in all browsers. If you are willing to accept an interference for the user you could use the debugger statement, as it is available in all major browsers.

How do you hide Devtools?

We can hide an element by inspecting it with Chrome DevTools, right-clicking the element under the Elements tab, and choosing the Hide element menu from the context menu. If you're a fan of using the shortcut, then pressing the h key has the same effect.

How do you freeze Devtools?

Freezing: In order to “freeze” the browser, we will need to first open devTools, and then use F8 (fn + F8 on osx) to pause script execution whenever you want. The debugger will pause, and you'll be able to inspect the elements on the screen in their current state, Simple as that!


2 Answers

There are so many ways to detect the use of DevTools, that it would be difficult to block them all. As DevTools gains new features, there are new ways to detect its use. Any third-party tool to block detection can't be trusted to block 100% of detection techniques.

There is a bug reported to the Chromium team here on the idea of integrating detection blocking directly into Chrome.

Disable javascript

The only way to definitively block any detection of the use of DevTools is to disable javascript. You can still execute javascript in the DevTools console when javascript for a page is disabled. I have found it sufficient to disable javascript immediately after opening DevTools, like this:

  1. Open DevTools Command+Option+J (Mac) or Control+Shift+J (Windows, Linux)
  2. Type the hotkey to open the command menu – Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux)
  3. Type dis and hit return to select the Disable Javascript option.
  4. … inspect the website …
  5. Re-enable javascript by evoking the command menu and typing ena and hit return (selecting the Enable Javascript option)

Of course, this method is useless for monitoring malicious code because no code is running when javascript is disabled. But at least it may give you a chance to set breakpoints before re-enabling javascript.

Chrome DevTools Protocol

It may be possible to use the Chrome DevTools Protocol to connect to a separate instance of Chrome and inspect a website without opening DevTools in that instance at all:

The Developer Tools front-end can attach to a remotely running Chrome instance for debugging. For this scenario to work, you should start your host Chrome instance with the remote-debugging-port command line switch:

chrome.exe --remote-debugging-port=9222

Then you can start a separate client Chrome instance, using a distinct user profile:

chrome.exe --user-data-dir=<some directory>

Now you can navigate to the given port from your client and attach to any of the discovered tabs for debugging: http://localhost:9222

like image 114
Quinn Comendant Avatar answered Nov 13 '22 09:11

Quinn Comendant


The most popular method of detecting if dev tools is open involves invoking console.log() which happens only when devtools is opened.

Below is an example:

var image = new Image();
Object.defineProperty(image, 'id', {
    get: function() {
        $('#<element_to_remove_on_detection>').remove();
        console.clear();
    }
});
console.log('%c', image);

In the above case, a new image object is created and the getter is overridden for the 'id'. When console.log is invoked, the getter is called as well. So basically, any time the getter is called, the website knows that the devtools has been opened because console.log() doesn't get called until devtools is open. It is a really clever way of detection. Nonetheless, when trying to debug such code, Simply using extension like Resource Override and injecting

console.log = null;

Into the head of the page should stop the website from detecting if devtools is open.

like image 44
user10404181 Avatar answered Nov 13 '22 07:11

user10404181