After I made this implementation, I found related issue on stack overflow.
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.
Side note: If the users of your app are interested in console usage, they're probably familiar with dev tools, and will not be surprised…
but this code is just a showcase. I will show you how to really detecting devtools for all major browsers.
If you know debugger, You're all set!
this statement will active when devtools opened, no any other cases.
many people found difficult ways to find to detect devtools, but these have been blocked by latest browsers. so it's only, simple way to detect devtools for protect your webapps, maybe.
here's the code. insert this <script> to bottom of <body> in your webapp, and run it.
!function() {
function detectDevTool(allow) {
if(isNaN(+allow)) allow = 100;
var start = +new Date(); // Validation of built-in Object tamper prevention.
debugger;
var end = +new Date(); // Validates too.
if(isNaN(start) || isNaN(end) || end - start > allow) {
// input your code here when devtools detected.
}
}
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);
}
}();
you can see demo how it works: https://jsfiddle.net/composite/3r6dq51y/
that's all. but remember, you can detect only devtools, not security concerns.
happy coding!
Top comments (13)
It's very naive to think that detecting dev tools will prevent someone from copying your code. So long as your code is delivered to a browser it can be copied. Never think that anything you send to a browser is secure.
This not works to "protect the code", it only crashes the app. You can continue using, except for real-time apps because if I change the var "allow" to 99999 and close Devtools, can continue using without problems, also is a great state for any "hacker" for the check without any state change.
Also, decrease performance and can break any app if is executed on devices that can take more than 100ms to process every cycle. That is possible too in browsers have too many tabs opened, test it!
The best example is to try to use WebRTC with this, which consumes a lot of CPU and decreases performance.
Interesting code, but not to add to apps in production.
I saw that web video service detects devtools for protect its video source url. I caught the video source easily, but I can't play because of token system. uhhh. it's a fun case of production.
Why is it important to recognize that the dev tools are open?
It would be nice if banks would detect this, b/c a common scam is for the scammer to get access to the target's computer, have them log into their bank, and then use the dev tools to edit the DOM to make it look like there was an unintentionally large deposit. Then they ask the target to send them a refund for the excess money that appears to be deposited into their account, but never was. The bank could realize that they had the devtools open shortly before trying to purchase thousands of dollars worth of gift cards, and then decline the transaction under the assumption that the person is being scammed.
Maybe to prevent XSS, or…
Back then, there were people using JavaScript to disable selection and right-click event to prevent them copying the article contents. This must be something like that.
Well, Some stupid web developers who need protection for their contents, resources, other copyrights, etc. I think.
You should not say such... Are you an hacker... Aren't you security wise too... Stop negative words...
debugger; is good command which is compatible with almost all browsers But one flaw in this script is, it will not show alert message right after the debugger is open. it will show message when you close the console window, which is useless!. So we have to wait until client close the devtool window and during this time He refresh page and see all source codes from network tab, So will you please modify this script to show alert message right after the debugger is open. or anyone tell us in comments how to do this?
mousemove listener without debounce / throttle is never a good idea
It will no longer work if the user opens the browser's "Deactivate breakpoints" .
That's a good news!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.