Chrome/Opera detect devTools [duplicate] - javascript
I am using this little script to find out whether Firebug is open:
if (window.console && window.console.firebug) {
//is open
};
And it works well. Now I was searching for half an hour to find a way to detect whether Google Chrome's built-in web developer console is open, but I couldn't find any hint.
This:
if (window.console && window.console.chrome) {
//is open
};
doesn't work.
EDIT:
So it seems that it is not possible to detect whether the Chrome console is open. But there is a "hack" that works, with some drawbacks:
will not work when console is undocked
will not work when console is open on page load
So, I am gonna choose Unsigned´s answer for now, but if some1 comes up with a brilliant idea, he is welcome to still answer and I change the selected answer! Thanks!
Leaving previous answers below for historical context.
Debugger (2022)
While not fool-proof, this debugger-based approach in another answer does appear to still work.
requestAnimationFrame (Late 2019)
Currently Muhammad Umer's approach works on Chrome 78, with the added advantage of detecting both close and open events.
function toString (2019)
Credit to Overcl9ck's comment on this answer. Replacing the regex /./ with an empty function object still works.
var devtools = function() {};
devtools.toString = function() {
if (!this.opened) {
alert("Opened");
}
this.opened = true;
}
console.log('%c', devtools);
// devtools.opened will become true if/when the console is opened
regex toString (2017-2018)
Since the original asker doesn't seem to be around anymore and this is still the accepted answer, adding this solution for visibility. Credit goes to Antonin Hildebrand's comment on zswang's answer. This solution takes advantage of the fact that toString() is not called on logged objects unless the console is open.
var devtools = /./;
devtools.toString = function() {
if (!this.opened) {
alert("Opened");
}
this.opened = true;
}
console.log('%c', devtools);
// devtools.opened will become true if/when the console is opened
console.profiles (2013)
Update: console.profiles has been removed from Chrome. This solution no longer works.
Thanks to Paul Irish for pointing out this solution from Discover DevTools, using the profiler:
function isInspectOpen() {
console.profile();
console.profileEnd();
if (console.clear) {
console.clear();
}
return console.profiles.length > 0;
}
function showIfInspectIsOpen() {
alert(isInspectOpen());
}
<button onClick="showIfInspectIsOpen()">Is it open?</button>
window.innerHeight (2011)
This other option can detect the docked inspector being opened, after the page loads, but will not be able to detect an undocked inspector, or if the inspector was already open on page load. There is also some potential for false positives.
window.onresize = function() {
if ((window.outerHeight - window.innerHeight) > 100) {
alert('Docked inspector was opened');
}
}
Chrome 65+ (2018)
r = /./
r.toString = function () {
document.title = '1'
}
console.log('%c', r);
demo: https://jsbin.com/cecuzeb/edit?output (Update at 2018-03-16)
package: https://github.com/zswang/jdetects
When printing “Element” Chrome developer tools will get its id
var checkStatus;
var element = document.createElement('any');
element.__defineGetter__('id', function() {
checkStatus = 'on';
});
setInterval(function() {
checkStatus = 'off';
console.log(element);
console.clear();
}, 1000);
Another version (from comments)
var element = new Image();
Object.defineProperty(element, 'id', {
get: function () {
/* TODO */
alert('囧');
}
});
console.log('%cHello', element);
Print a regular variable：
var r = /./;
r.toString = function() {
document.title = 'on';
};
console.log(r);
Very Reliable hack
Basically set a getter on property and log it in console. Apparently the thing gets accessed only when console is open.
https://jsfiddle.net/gcdfs3oo/44/
var checkStatus;
var indicator = document.querySelector('#devtool-status');
var element = new Image();
Object.defineProperty(element, 'id', {
get: function() {
checkStatus='on';
throw new Error("Dev tools checker");
}
});
requestAnimationFrame(function check() {
checkStatus = 'off';
console.dir(element);
indicator.className = checkStatus;
requestAnimationFrame(check);
});
.on{
color:limegreen;
}
.off{
color:red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.css" integrity="sha256-DVK12s61Wqwmj3XI0zZ9MFFmnNH8puF/eRHTB4ftKwk=" crossorigin="anonymous" />
<p>
<ul>
<li>
dev toolbar open: icon is <span class="on">green</span>
</li>
<li>
dev toolbar closed: icon is <span class="off">red</span>
</li>
</ul>
</p>
<div id="devtool-status"><i class="fas fa-7x fa-power-off"></i></div>
<br/>
<p><b>Now press F12 to see if this works for your browser!</b></p>
I created devtools-detect which detects when DevTools is open:
console.log('is DevTools open?', window.devtools.open);
You can also listen to an event:
window.addEventListener('devtoolschange', function (e) {
console.log('is DevTools open?', e.detail.open);
});
It doesn't work when DevTools is undocked. However, works with the Chrome/Safari/Firefox DevTools and Firebug.
------ Update: ------
This is an old question with many great answers that worked for a while. The current best answer as of September 5th 2022 is by #david-fong https://stackoverflow.com/a/68494829/275333
Btw, my answer is still working the same since I've posted it, it's just a bit difficult to make it always accurate. Click on the "Manual Benchmark" link in my demo with the console closed/opened to see what I mean - there is always a big difference.
----------------------
I found a way to tell if the Chrome Console is opened or not.
It’s still a hack but it’s way more accurate and will work whether the console is undocked or not.
Basically running this code with the console closed takes about ~100 microseconds and while the console is opened it takes about twice as much ~200 microseconds.
console.log(1);
console.clear();
(1 millisecond = 1000 microsecond)
I’ve written more about it here.
Demo is here.
console.log(Object.defineProperties(new Error, {
message: {get() {alert('Chrome/Firefox')}},
toString: {value() {(new Error).stack.includes('toString#')&&alert('Safari')}}
}));
Demo: https://jsbin.com/cateqeyono/edit?html,output
There seem to be a few common classes of solutions:
Rely on detecting resizing of the screen when the devtools appear (this doesn't work when the devtools/console are opened as a separate window)
Intercept certain user actions that can bring up the devtools/console such as right click menu, F12, Ctrl+Shift+C, etc. This can't cover UI mechanisms that are in the browser chrome that aren't detectable by the page.
Log something to the console and rely on browser-specific behaviour for lazy, fancy printing. Historically, these seem to not be highly reliable, but they're nice and simple. If you want them to work repeatedly in the same browsing session, you'll probably have to accept some degree of console spam.
Use timing heuristics with the debugger statement. The tricky part is to find a way so that the timers can't get messed up by long running tasks in the event loop queue, and the fact that the debugger statement pauses execution of the thread it runs on. There's also the challenge that regular debugger statements can be disabled by the user on a case-by-case or disable-all basis.
What follows is my solution to the specific problems with the debugger approach. Ie. Avoid false positives when the main thread runs a long task between a heuristic timer, avoid the debugger statement from blocking the main thread, and prevent disabling the debugger statement. Note: I don't think there is a way to prevent a user from disabling all debugger breakpoints, and that is probably for the best.
How It Works
The Chrome browser enters debugging when devtools are open and a thread encounters a debugging statement.
Main thread sends a message to a webworker thread.
Worker thread replies with an opening heartbeat.
Main thread reacts by starting a timer to expect the closing heartbeat.
Worker thread's message handler encounters a debugger statement (optionally wrapped in an eval statement to prevent the user from disabling it).
If devtools are closed, the worker will immediately send an acknowledgement to the main thread, and the main thread will conclude that devtools are closed.
If devtools are opened, the worker will enter a debugging session, and the main thread will notice that the Worker has not responded sufficiently quickly, concluding that the debugger must be open. The main thread will not be blocked by the worker's debugging session, but it's timeout response will be blocked by any heavy processing in the main thread ahead of it in the event queue.
I've published a reference implementation (authored by me) here on GitHub, and a demo here.
Pros
Unlike screen-size-change-detection approaches, this works when the console is in a separate window.
Unlike user-action-interception approaches, this works regardless of what user action brings up the console.
Unlike console.log approaches, this can work for multiple open-closes of the console without spamming the console with messages.
Unlike basic timer-debugger approaches, the detection should never trigger false positives due to busy threads (main thread, or other workers), the debugger statement is in the worker instead of the main thread, so the main thread won't get blocked, and the eval-debugger statement prevents disabling that specific debugger statement.
Cons
The user can disable all breakpoints, which will disable this method of detection.
The eval-wrapped debugger statement won't work on sites which disable eval via their Content Security Policy, in which case only a regular debugger statement can be used.
I found new methods work at Chrome 89
Using console.profile, setInterval and function toString
var devtools = function() {};
devtools.toString = function() {
alert('NOPE!!')
return '-'
}
setInterval(()=>{
console.profile(devtools)
console.profileEnd(devtools)
}, 1000)
In safari, it doesn't works.
Below chrome 89, i can't check whether it works.
The Chrome developer tools is really just a part of WebKit's WebCore library. So this question applies to Safari, Chrome, and any other WebCore consumers.
If a solution exists, it'll be based off a difference in the DOM when the WebKit web inspector is open and when it's closed. Unfortunately, this is a kind of a chicken and egg problem because we can't use the inspector to observe the DOM when the inspector is closed.
What you may be able to do is write a bit of JavaScript to dump the entire DOM tree. Then run it once when the inspector is open, and once when the inspector is closed. Any difference in the DOM is probably a side-effect of the web inspector, and we may be able to use it to test if the user is inspecting or not.
This link is a good start for a DOM dumping script , but you'll want to dump the entire DOMWindow object, not just document.
Update:
Looks like there's a way to do this now. Check out Chrome Inspector Detector
There is a tricky way to check it for extensions with 'tabs' permission:
chrome.tabs.query({url:'chrome-devtools://*/*'}, function(tabs){
if (tabs.length > 0){
//devtools is open
}
});
Also you can check if it open for your page:
chrome.tabs.query({
url: 'chrome-devtools://*/*',
title: '*example.com/your/page*'
}, function(tabs){ ... })
I wrote a blog post about this: http://nepjua.org/check-if-browser-console-is-open/
It can detect whether it's docked or undocked
function isConsoleOpen() {
var startTime = new Date();
debugger;
var endTime = new Date();
return endTime - startTime > 100;
}
$(function() {
$(window).resize(function() {
if(isConsoleOpen()) {
alert("You're one sneaky dude, aren't you ?")
}
});
});
var div = document.createElement('div');
Object.defineProperty(div,'id',{get:function(){
document.title = 'xxxxxx'
}});
setTimeout(()=>console.log(div),3000)
Muhammad Umer's approach worked for me, and I'm using React, so I decided to make a hooks solution:
const useConsoleOpen = () => {
const [consoleOpen, setConsoleOpen] = useState(true)
useEffect(() => {
var checkStatus;
var element = new Image();
Object.defineProperty(element, "id", {
get: function () {
checkStatus = true;
throw new Error("Dev tools checker");
},
});
requestAnimationFrame(function check() {
checkStatus = false;
console.dir(element); //Don't delete this line!
setConsoleOpen(checkStatus)
requestAnimationFrame(check);
});
}, []);
return consoleOpen
}
NOTE: When I was messing with it, it didn't work for the longest time and I couldn't figure out why. I had deleted console.dir(element); which is critical to how it works. I delete most non-descriptive console actions since they just take up space and aren't usually necessary to the function, so that was why it wasn't working for me.
To use it:
import React from 'react'
const App = () => {
const consoleOpen = useConsoleOpen()
return (
<div className="App">
<h1>{"Console is " + (consoleOpen ? "Open" : "Closed")}</h1>
</div>
);
}
I hope this helps anyone using React. If anyone wants to expand on this, I would like to be able stop the infinite loop at some point (since I don't use this in every component) and to find a way to keep the console clean.
Javascript Detect Developer Tools Console Opening
Working from 2/2/2022
Chrome Version 97 (Developer Tools Undocked/Docked/Keyboard shortcuts)
Edge Version 97 (Developer Tools Undocked/Docked/Keyboard shortcuts)
FireFox Version 96.0.03 (Developer Tools Undocked/Docked/Keyboard shortcuts)
Safari ?
FireBug Detection (Developer Tools)
// Prevent Right Click (Optional)
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
}, true);
// DevTools Opened Script
function DevToolsOpened() {
alert("Developer Tools Opened");
}
// Detect DevTools (Chrome/Edge)
// https://stackoverflow.com/a/67148898/9498503 (SeongJun)
var devtools = function() {};
devtools.toString = function() {
DevToolsOpened();
return '-';
}
setInterval(()=>{
console.profile(devtools);
console.profileEnd(devtools);
if (console.clear) {
console.clear();
}
}, 1000);
// Detect DevTools (FireFox)
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
// Detect Resize (Chrome/Firefox/Edge Works) but (Triggers on Zoom In Chrome and Zoom Out FireFox)
window.onresize = function() {
if ((window.outerHeight - window.innerHeight) > 100 || (window.outerWidth - window.innerWidth) > 100) {
DevToolsOpened();
}
}
}
// Detect Fire Bug
if (window.console && window.console.firebug || console.assert(1) === '_firebugIgnore') {
DevToolsOpened();
};
// Detect Key Shortcuts
// https://stackoverflow.com/a/65135979/9498503 (hlorand)
window.addEventListener('keydown', function(e) {
if (
// CMD + Alt + I (Chrome, Firefox, Safari)
e.metaKey == true && e.altKey == true && e.keyCode == 73 ||
// CMD + Alt + J (Chrome)
e.metaKey == true && e.altKey == true && e.keyCode == 74 ||
// CMD + Alt + C (Chrome)
e.metaKey == true && e.altKey == true && e.keyCode == 67 ||
// CMD + Shift + C (Chrome)
e.metaKey == true && e.shiftKey == true && e.keyCode == 67 ||
// Ctrl + Shift + I (Chrome, Firefox, Safari, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 73 ||
// Ctrl + Shift + J (Chrome, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 74 ||
// Ctrl + Shift + C (Chrome, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 67 ||
// F12 (Chome, Firefox, Edge)
e.keyCode == 123 ||
// CMD + Alt + U, Ctrl + U (View source: Chrome, Firefox, Safari, Edge)
e.metaKey == true && e.altKey == true && e.keyCode == 85 ||
e.ctrlKey == true && e.keyCode == 85
) {
DevToolsOpened();
}
});
Also you can try this: https://github.com/sindresorhus/devtools-detect
// check if it's open
console.log('is DevTools open?', window.devtools.open);
// check it's orientation, null if not open
console.log('and DevTools orientation?', window.devtools.orientation);
// get notified when it's opened/closed or orientation changes
window.addEventListener('devtoolschange', function (e) {
console.log('is DevTools open?', e.detail.open);
console.log('and DevTools orientation?', e.detail.orientation);
});
If you are developers who are doing stuff during development. Check out this Chrome extension. It helps you detect when Chrome Devtoos is opened or closed.
https://chrome.google.com/webstore/detail/devtools-status-detector/pmbbjdhohceladenbdjjoejcanjijoaa?authuser=1
This extension helps Javascript developers detect when Chrome Devtools is open or closed on current page.
When Chrome Devtools closes/opens, the extension will raise a event named 'devtoolsStatusChanged' on window.document element.
This is example code:
function addEventListener(el, eventName, handler) {
if (el.addEventListener) {
el.addEventListener(eventName, handler);
} else {
el.attachEvent('on' + eventName,
function() {
handler.call(el);
});
}
}
// Add an event listener.
addEventListener(document, 'devtoolsStatusChanged', function(e) {
if (e.detail === 'OPENED') {
// Your code when Devtools opens
} else {
// Your code when Devtools Closed
}
});
Some answers here will stop working in Chrome 65. Here's a timing attack alternative that works pretty reliably in Chrome, and is much harder to mitigate than the toString() method. Unfortunately it's not that reliable in Firefox.
addEventListener("load", () => {
var baseline_measurements = [];
var measurements = 20;
var warmup_runs = 3;
const status = document.documentElement.appendChild(document.createTextNode("DevTools are closed"));
const junk = document.documentElement.insertBefore(document.createElement("div"), document.body);
junk.style.display = "none";
const junk_filler = new Array(1000).join("junk");
const fill_junk = () => {
var i = 10000;
while (i--) {
junk.appendChild(document.createTextNode(junk_filler));
}
};
const measure = () => {
if (measurements) {
const baseline_start = performance.now();
fill_junk();
baseline_measurements.push(performance.now() - baseline_start);
junk.textContent = "";
measurements--;
setTimeout(measure, 0);
} else {
baseline_measurements = baseline_measurements.slice(warmup_runs); // exclude unoptimized runs
const baseline = baseline_measurements.reduce((sum, el) => sum + el, 0) / baseline_measurements.length;
setInterval(() => {
const start = performance.now();
fill_junk();
const time = performance.now() - start;
// in actual usage you would also check document.hasFocus()
// as background tabs are throttled and get false positives
status.data = "DevTools are " + (time > 1.77 * baseline ? "open" : "closed");
junk.textContent = "";
}, 1000);
}
};
setTimeout(measure, 300);
});
As for Chrome/77.0.3865.75 a version of 2019 not works. toString invokes immediately without Inspector opening.
const resultEl = document.getElementById('result')
const detector = function () {}
detector.toString = function () {
resultEl.innerText = 'Triggered'
}
console.log('%c', detector)
<div id="result">Not detected</div>
use this package isDevToolsOpened() function from the package dev-tools-monitor
which works as expected in all browsers except for firefox.
Force a colorized welcome message, each time the console is opened.
// Force a colorized welcome message
// each time the console is opened.
(() => {
w = new Function()
w.toString = () => { (!this.z) ? console.log("%cWelcome to the console\n %cMaster password:\n %c window.password = ' ... ':", "color: white; font-size: 20px; background-color: blue", "color: white; font-size: 16px; background-color: red;margin 20px 0", "background: #222; color: #bada55") : this.z = true
}
console.log('%c', w)
})()
You can catch the event of opening the dev. tools by adding event listeners to the keyboard shortcuts with which it opens. This is not a "hack" and it works 100% of the time.
The only case it won't catch is when the user opens it manually with mouse. So it is a "partial solution" perhaps it is useful for somebody.
<script>
function devToolsOpened(e){
alert("devtools opened");
// uncomment to prevent opening dev.tools:
// e.preventDefault();
}
window.addEventListener('keydown', function(e) {
if (
// CMD + Alt + I (Chrome, Firefox, Safari)
e.metaKey == true && e.altKey == true && e.keyCode == 73 ||
// CMD + Alt + J (Chrome)
e.metaKey == true && e.altKey == true && e.keyCode == 74 ||
// CMD + Alt + C (Chrome)
e.metaKey == true && e.altKey == true && e.keyCode == 67 ||
// CMD + Shift + C (Chrome)
e.metaKey == true && e.shiftKey == true && e.keyCode == 67 ||
// Ctrl + Shift + I (Chrome, Firefox, Safari, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 73 ||
// Ctrl + Shift + J (Chrome, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 74 ||
// Ctrl + Shift + C (Chrome, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 67 ||
// F12 (Chome, Firefox, Edge)
e.keyCode == 123 ||
// CMD + Alt + U, Ctrl + U (View source: Chrome, Firefox, Safari, Edge)
e.metaKey == true && e.altKey == true && e.keyCode == 85 ||
e.ctrlKey == true && e.keyCode == 85
){
devToolsOpened(e);
}
});
</script>
Keyboard shortcuts to open Developer Tools:
Chrome: https://developers.google.com/web/tools/chrome-devtools/shortcuts
Firefox: https://developer.mozilla.org/hu/docs/Tools
Safari: https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/KeyboardShortcuts/KeyboardShortcuts.html
Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/shortcuts
Timing solution (works for docked and undocked)
It is a bit intrusive but not as much as the debugger trap
var opened = false;
var lastTime = Date.now();
const interval = 50;
const threshold = 30;
setInterval(() => {
let delta = Date.now() - lastTime;
if (delta > interval + threshold) {
document.title = "P3nis";
opened = true;
}
lastTime = Date.now();
if (!opened) {
debugger;
}
}, interval)
When a browser's DevTools is open, breakpoints marked by 'debugger;' will be attached as long as you don't deactivate breakpoints.
So here is the code to check if debugger is enabled:
let workerUrl = 'data:application/javascript;base64,' + btoa(`
self.addEventListener('message', (e) => {
if(e.data==='hello'){
self.postMessage('hello');
}
debugger;
self.postMessage('');
});
`);
function checkIfDebuggerEnabled() {
return new Promise((resolve) => {
let fulfilled = false;
let worker = new Worker(workerUrl);
worker.onmessage = (e) => {
let data = e.data;
if (data === 'hello') {
setTimeout(() => {
if (!fulfilled) {
resolve(true);
worker.terminate();
}
}, 1);
} else {
fulfilled = true;
resolve(false);
worker.terminate();
}
};
worker.postMessage('hello');
});
}
checkIfDebuggerEnabled().then((result) => {
if (result) {
alert('browser DevTools is open');
}else{
alert('browser DevTools is not open, unless you have deactivated breakpoints');
}
});
Note: if CSP is used then you need either to add worker-src 'unsafe-inline' to CSP policy or to move worker source code above to a CSP-allowed resource and change workerUrl to that resource.
Best way to have Debug-Mode on/off feature is to set a flag 'debugMode'='off' in localStorage by default -
localStorage.setItem('debugMode', 'off');
Then, change it in Local Storage of browser manually to 'on' while development -
Then use below condition in code to do differrent action if it's 'on' -
if(localStorage.getItem('debugMode') === 'on'){
//do something 1
}else {
//do something 2
}
Related
How to detect Caps Lock is ON on web browser on Android Devices using JavaScript?
We can very well detect CapsLock is ON/not on iPhone web browser using KeyboardEvent.getModifierState(), with sample code,
function checkCapsLock(e) {
if (e.getModifierState("CapsLock")) {
alert("Caps ON");
}
}
But it doesn't work on a browser on Android Devices. I've tried many other solutions using charCode, keyCode, shiftKey, which, etc. methods on the event with listeners like keyup, keydown, keypress, etc. But no luck.
I've gone through the answers mentioned on stackoverflow, and other links too. But still no luck.
Is there any workaround for this?
I'm asking about the issue on the Android web browser!
With Key Event Viewer, we can observe that CapsLock can be detected on Web or mobile web browser on iPhone, but not on a web browser on Android devices.
While this code works on some Android devices, it won't work on all, because the e.ShiftKey turns out to be false in Android. On android, it actually depends on your keyboard.
This is the best, I was able to come up with.
document.addEventListener ('keyup', function (event){
let status = checkCapsLock(event);
document.getElementById("status").innerHTML += ('<span class="'+ status +'">Status: ' + status + '</span>');
});
function checkCapsLock(e) {
e = e ? e : window.event;
if (e.getModifierState('CapsLock'))
return true;
let isShiftOn = e.shiftKey;
let s = e.key;
if(s.length != 1){
let keyCode = e.keyCode; //e.KeyCode is always 229 on Android;
if(keyCode == 229)
s = (e.target.value).split('').pop();
}
if ( (s.length != 0 ) && (s.toUpperCase() === s) && !isShiftOn )
return true;
return false;
}
span{
display: block;
background: red;
}
span.true{
background: green;
}
Input: <input id="targetInput">
<p id="status"></p>
How to disable View source and inspect element
How do you disable/ view source/ and /inspect element/, ctrl + u ctrl+shift+I f12 menu bar and right click, also ctrl + s ctrl p ctrl+v ctrl+a ctrl+c and drag select page, please answer all parts that's possible, I prefer to do this will JavaScript array keycodes or html no php or other languages.also I want to block ifram use on my site like somesites such as google. As I understand it is not possible to completely disable view source and inspect element, so I want minification of code and rest of my question answered instead. Edit: I solved alot of it myself, I used onkeydown return false to disable all keys, still need the arrays, I disabled inspect element menu bar by forcing browser to window.open I still need right click, however would like to add that I need a custom right click menu, I disabled the possibility to disable Javascript in order to stop the key block by using noscript function redirects. I also still need the drag and select part. I would still like betterways to fix it...maybe even just minify the code or encrypt it. Of anyone needs some of the code I used just reply. I just need to fix it.
It is not possible to prevent the user from inspecting code running on their machine. At the end of the day the HTMl they are getting delivered will be readable in plain text. You can cause a nuisance for most people, but this will not be a valid security measure - chrome extensions will still run, for instance, so if someone is using the NoScript extension it will disable all javascript. A much better option would be to handle your logic serverside, and only send the client the information they need to know/requested. There are some free javascript obfuscators, such as https://javascriptobfuscator.com/. Please remember that it is not a secure method, though.
I mean no matter how much you block it a person can just type view-source:https://example.com
document.onkeydown = function(e)
{
if(event.keyCode == 123)
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0))
{
return false;
}
}
e is a keyboard event. e.[key] returnes true if key pressed.
If document.onkeydown returns false, key doesn't count.
This programm seeing if code view combination pressed and returning false.
Example. if ctrl, shift and 'J' pressed - return false.
Bump
To the people saying it isn't possible, how would you recon this website managed to do so?
The following website disabled, view source, right click and the dev console.
I am genuinely interested.
https://www.techgyd.com/contact-facebook-directly/6579/
Edit:
all input from keyboard is disabled, but by adding "view-source:" before the httpps:// to the url to become:
view-source:https://www.techgyd.com/contact-facebook-directly/6579/
makes me able to see.
If you would like to know how they did that then take a look at their JS, raw copy/paste:
<script type="text/javascript">
//<![CDATA[
var show_msg = '';
if (show_msg !== '0') {
var options = {view_src: "View Source is disabled!", inspect_elem: "Inspect Element is disabled!", right_click: "Right click is disabled!", copy_cut_paste_content: "Cut/Copy/Paste is disabled!", image_drop: "Image Drag-n-Drop is disabled!" }
} else {
var options = '';
}
function nocontextmenu(e) { return false; }
document.oncontextmenu = nocontextmenu;
document.ondragstart = function() { return false;}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode === 123) {
if (show_msg !== '0') {show_toast('inspect_elem');}
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
//alert(event.keyCode); return false;
if (event.keyCode === 123 ||
event.ctrlKey && event.shiftKey && event.keyCode === 73 ||
event.ctrlKey && event.shiftKey && event.keyCode === 75) {
if (show_msg !== '0') {show_toast('inspect_elem');}
return false;
}
if (event.ctrlKey && event.keyCode === 85) {
if (show_msg !== '0') {show_toast('view_src');}
return false;
}
}
function addMultiEventListener(element, eventNames, listener) {
var events = eventNames.split(' ');
for (var i = 0, iLen = events.length; i < iLen; i++) {
element.addEventListener(events[i], function (e) {
e.preventDefault();
if (show_msg !== '0') {
show_toast(listener);
}
});
}
}
addMultiEventListener(document, 'contextmenu', 'right_click');
addMultiEventListener(document, 'cut copy paste print', 'copy_cut_paste_content');
addMultiEventListener(document, 'drag drop', 'image_drop');
function show_toast(text) {
var x = document.getElementById("amm_drcfw_toast_msg");
x.innerHTML = eval('options.' + text);
x.className = "show";
setTimeout(function () {
x.className = x.className.replace("show", "")
}, 3000);
}
//]]>
</script>
or just look from line 86
I hope it helps
After if statment nothing will fire in javascript
There is very strange. It looks like after the If statement, the script it stop. The page has a javascript function is called by clicking the button. If the browser on IE, I will do something. Otherwise I close the page. I put alert statement to test it. However the alert has never fired. Would someone tell me what's wrong will my code.
There is my button call the function:
<input class="btn" id="btnClose" onclick="javascript:openFile();" type="button" value="Close" name="btnClose" />
There is the javascript function:
function openFile() {
var url = 'file://' + document.getElementById("hdURL").value;
//alert('Open File' + url);
var location = document.getElementById("hdURL").value;
////http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
if ((/*#cc_on!#*/false || !!document.documentMode) ||(!isIE && !!window.StyleMedia))
{
alert('IE');
//do something
window.self.close();
}
alert('test'); //never fire
closeWindow();
}
First off, going to give credit to Amy in the comments on the question for realizing that your isIE is not defined.
Take a look at the accepted answer to the question you referenced in your code. It says the following: (I've added an arrow to show the use of isIE)
// Internet Explorer 6-11
var isIE = /*#cc_on!#*/false || !!document.documentMode;
// |________
// |
// Edge 20+ V
var isEdge = !isIE && !!window.StyleMedia;
Notice how their example for detecting edge references the variable for detecting IE, isIE. In your example, you don't have var isIE, and so this is coming back as undefined - the code fails.
Why does it work in IE but not Firefox/Chrome?
JavaScript will not evaluate the second condition of an OR if the first is true - this is known as Short Circuit Evaluation.
When using IE, the first condition evaluates to true. This means that the second condition (and the syntax error therein) is ignored.
However, Chrome and Firefox get false for the first condition, and must evaluate the second. Once they get to the undefined variable, an error will be thrown.
Solution:
// Internet Explorer 6-11
var isIE = /*#cc_on!#*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
if (isIE || isEdge) {
//DO STUFF
}
it is always helpful to prepare jsifddle, so you can immediately test your solution and see errors.
It is also good to check browser console which shows errors
see working example
https://jsbin.com/sipukovono/edit?html,css,js,console,output
function openFile() {
var isIE=false; // temporary definition
var url = 'file://' + document.getElementById("hdURL").value;
//alert('Open File' + url);
var location = document.getElementById("hdURL").value;
if ((false || !!document.documentMode) ||(!isIE && !!window.StyleMedia))
{
alert('IE');
window.self.close();
}
alert('test'); //never fire
closeWindow();
}
How do I detect popup blocker in Chrome?
I have searched many issue in stack overflow and might be duplicate here Detect Popup
But not helped for me while testing in Chrome (tested v26.0.1410.64)
Following Approach Worked in IE and Firefox but not in Chrome
var popup = window.open(winPath,winName,winFeature,true);
if (!popup || popup.closed || typeof popup.closed=='undefined'){
//Worked For IE and Firefox
alert("Popup Blocker is enabled! Please add this site to your exception list.");
window.location.href = 'warning.html';
} else {
//Popup Allowed
window.open('','_self');
window.close();
}
Any better solution that works for Chrome also?
Finally, it success by combining different answer from Stackoverflow's member
This code worked for me & tested in IE, Chrome & Firefox
var popup = window.open(winPath,winName,winFeature,true);
setTimeout( function() {
if(!popup || popup.outerHeight === 0) {
//First Checking Condition Works For IE & Firefox
//Second Checking Condition Works For Chrome
alert("Popup Blocker is enabled! Please add this site to your exception list.");
window.location.href = 'warning.html';
} else {
//Popup Blocker Is Disabled
window.open('','_self');
window.close();
}
}, 25);
Try Below..!!
var pop = window.open("about:blank", "new_window_123", "height=150,width=150");
// Detect pop blocker
setTimeout(function() {
if(!pop || pop.closed || pop.closed == "undefined" || pop == "undefined" || parseInt(pop.innerWidth) == 0 || pop.document.documentElement.clientWidth != 150 || pop.document.documentElement.clientHeight != 150){
pop && pop.close();
alert("Popups must be enabled.");
}else{
alert("Popups is enabled.");
pop && pop.close();
}}, 1000);
Look on below question
Detect blocked popup in Chrome
How do I detect whether popups are blocked in chrome
On Google It will more help you..
https://www.google.com/search?q=how+to+detect+a+blocked+popup+in+chrome
I found it much more effective to use try-catch as follows:
var popup = window.open(winPath,winName,winFeature,true);
try {
popup.focus();
} catch (e) {
alert('popup blocked!');
}
I know this is "resolved", but this simple code worked for me detecting "Better Popup Blocker" extension in Chrome:
if (!window.print) {
//display message to disable popup blocker
} else {
window.print();
}
}
Ockham's razor! Or am I missing something and it couldn't possibly be this simple?
I had used this method to open windows from js and not beeing blocked by Chrome. http://en.nisi.ro/blog/development/javascript/open-new-window-window-open-seen-chrome-popup/
The below code works in chrome,safari and firefox. I have used jquery for this.
var popupWindow = window.open("http://www.google.com","directories=no,height=100,width=100");
$(document).ready(function(e) {
detectPopup();
function detectPopup() {
if(!popupWindow) {
alert("popup will be blocked");
} else {
alert("popup will be shown");
window.open('','_self');
window.close();
}
}
});
How to detect Ctrl+V, Ctrl+C using JavaScript?
How to detect Ctrl+V, Ctrl+C using JavaScript? I need to restrict pasting in my textareas, end user should not copy and paste the content, user should only type text in textarea. How can I achieve this?
I just did this out of interest. I agree it's not the right thing to do, but I think it should be the op's decision... Also the code could easily be extended to add functionality, rather than take it away (like a more advanced clipboard, or Ctrl+S triggering a server-side save).
$(document).ready(function() {
var ctrlDown = false,
ctrlKey = 17,
cmdKey = 91,
vKey = 86,
cKey = 67;
$(document).keydown(function(e) {
if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
}).keyup(function(e) {
if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
});
$(".no-copy-paste").keydown(function(e) {
if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) return false;
});
// Document Ctrl + C/V
$(document).keydown(function(e) {
if (ctrlDown && (e.keyCode == cKey)) console.log("Document catch Ctrl+C");
if (ctrlDown && (e.keyCode == vKey)) console.log("Document catch Ctrl+V");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Ctrl+c Ctrl+v disabled</h3>
<textarea class="no-copy-paste"></textarea>
<br><br>
<h3>Ctrl+c Ctrl+v allowed</h3>
<textarea></textarea>
Also just to clarify, this script requires the jQuery library.
Codepen demo
EDIT: removed 3 redundant lines (involving e.which) thanks to Tim Down's suggestion (see comments)
EDIT: added support for Macs (CMD key instead of Ctrl)
With jquery you can easy detect copy, paste, etc by binding the function:
$("#textA").bind('copy', function() {
$('span').text('copy behaviour detected!')
});
$("#textA").bind('paste', function() {
$('span').text('paste behaviour detected!')
});
$("#textA").bind('cut', function() {
$('span').text('cut behaviour detected!')
});
More information here: http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/
While it can be annoying when used as an anti-piracy measure, I can see there might be some instances where it'd be legitimate, so:
function disableCopyPaste(elm) {
// Disable cut/copy/paste key events
elm.onkeydown = interceptKeys
// Disable right click events
elm.oncontextmenu = function() {
return false
}
}
function interceptKeys(evt) {
evt = evt||window.event // IE support
var c = evt.keyCode
var ctrlDown = evt.ctrlKey||evt.metaKey // Mac support
// Check for Alt+Gr (http://en.wikipedia.org/wiki/AltGr_key)
if (ctrlDown && evt.altKey) return true
// Check for ctrl+c, v and x
else if (ctrlDown && c==67) return false // c
else if (ctrlDown && c==86) return false // v
else if (ctrlDown && c==88) return false // x
// Otherwise allow
return true
}
I've used event.ctrlKey rather than checking for the key code as on most browsers on Mac OS X Ctrl/Alt "down" and "up" events are never triggered, so the only way to detect is to use event.ctrlKey in the e.g. c event after the Ctrl key is held down. I've also substituted ctrlKey with metaKey for macs.
Limitations of this method:
Opera doesn't allow disabling right click events
Drag and drop between browser windows can't be prevented as far as I know.
The edit->copy menu item in e.g. Firefox can still allow copy/pasting.
There's also no guarantee that for people with different keyboard layouts/locales that copy/paste/cut are the same key codes (though layouts often just follow the same standard as English), but blanket "disable all control keys" mean that select all etc will also be disabled so I think that's a compromise which needs to be made.
If you use the ctrlKey property, you don't need to maintain state.
$(document).keydown(function(event) {
// Ctrl+C or Cmd+C pressed?
if ((event.ctrlKey || event.metaKey) && event.keyCode == 67) {
// Do stuff.
}
// Ctrl+V or Cmd+V pressed?
if ((event.ctrlKey || event.metaKey) && event.keyCode == 86) {
// Do stuff.
}
// Ctrl+X or Cmd+X pressed?
if ((event.ctrlKey || event.metaKey) && event.keyCode == 88) {
// Do stuff.
}
}
There's another way of doing this: onpaste, oncopy and oncut events can be registered and cancelled in IE, Firefox, Chrome, Safari (with some minor problems), the only major browser that doesn't allow cancelling these events is Opera.
As you can see in my other answer intercepting Ctrl+V and Ctrl+C comes with many side effects, and it still doesn't prevent users from pasting using the Firefox Edit menu etc.
function disable_cutcopypaste(e) {
var fn = function(evt) {
// IE-specific lines
evt = evt||window.event
evt.returnValue = false
// Other browser support
if (evt.preventDefault)
evt.preventDefault()
return false
}
e.onbeforepaste = e.onbeforecopy = e.onbeforecut = fn
e.onpaste = e.oncopy = e.oncut = fn
}
Safari still has some minor problems with this method (it clears the clipboard in place of cut/copy when preventing default) but that bug appears to have been fixed in Chrome now.
See also: http://www.quirksmode.org/dom/events/cutcopypaste.html and the associated test page http://www.quirksmode.org/dom/events/tests/cutcopypaste.html for more information.
Live Demo :
http://jsfiddle.net/abdennour/ba54W/
$(document).ready(function() {
$("#textA").bind({
copy : function(){
$('span').text('copy behaviour detected!');
},
paste : function(){
$('span').text('paste behaviour detected!');
},
cut : function(){
$('span').text('cut behaviour detected!');
}
});
});
Short solution for preventing user from using context menu, copy and cut in jQuery:
jQuery(document).bind("cut copy contextmenu",function(e){
e.preventDefault();
});
Also disabling text selection in CSS might come handy:
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Another approach (no plugin needed) it to just use ctrlKey property of the event object that gets passed in. It indicates if Ctrl was pressed at the time of the event, like this:
$(document).keypress("c",function(e) {
if(e.ctrlKey)
alert("Ctrl+C was pressed!!");
});
See also jquery: keypress, ctrl+c (or some combo like that).
You can use this code for rightclick, CTRL+C, CTRL+V, CTRL+X detect and prevent their action
$(document).bind('copy', function(e) {
alert('Copy is not allowed !!!');
e.preventDefault();
});
$(document).bind('paste', function() {
alert('Paste is not allowed !!!');
e.preventDefault();
});
$(document).bind('cut', function() {
alert('Cut is not allowed !!!');
e.preventDefault();
});
$(document).bind('contextmenu', function(e) {
alert('Right Click is not allowed !!!');
e.preventDefault();
});
instead of onkeypress, use onkeydown.
<input type="text" onkeydown="if(event.ctrlKey && event.keyCode==86){return false;}" name="txt">
If anyone is interested in a simple vanilla JavaScript approach, see below.
Fiddle Link: DEMO
let ctrlActive = false;
let cActive = false;
let vActive = false
document.body.addEventListener('keyup', event => {
if (event.key == 'Control') ctrlActive = false;
if (event.code == 'KeyC') cActive = false;
if (event.code == 'KeyV') vActive = false;
})
document.body.addEventListener('keydown', event => {
if (event.key == 'Control') ctrlActive = true;
if (ctrlActive == true && event.code == 'KeyC') {
// this disables the browsers default copy functionality
event.preventDefault()
// perform desired action(s) here...
console.log('The CTRL key and the C key are being pressed simultaneously.')
}
if (ctrlActive == true && event.code == 'KeyV') {
// this disables the browsers default paste functionality
event.preventDefault()
// perform desired action(s) here...
console.log('The CTRL key and the V key are being pressed simultaneously.')
}
})
The code above would disable the default copy in the browser. If you'd like keep the copy functionality in the browser, just comment out this bit: event.preventDefault() and you can then run any desired actions while allowing the user to copy content.
I wrote a jQuery plugin, which catches keystrokes. It can be used to enable multiple language script input in html forms without the OS (except the fonts). Its about 300 lines of code, maybe you like to take a look: http://miku.github.com/jquery-retype Generally, be careful with such kind of alterations. I wrote the plugin for a client because other solutions weren't available.
Don't forget that, while you might be able to detect and block Ctrl+C/V, you can still alter the value of a certain field. Best example for this is Chrome's Inspect Element function, this allows you to change the value-property of a field.
A hook that allows for overriding copy events, could be used for doing the same with paste events. The input element cannot be display: none; or visibility: hidden; sadly
export const useOverrideCopy = () => {
const [copyListenerEl, setCopyListenerEl] = React.useState(
null as HTMLInputElement | null
)
const [, setCopyHandler] = React.useState<(e: ClipboardEvent) => void | null>(
() => () => {}
)
// appends a input element to the DOM, that will be focused.
// when using copy/paste etc, it will target focused elements
React.useEffect(() => {
const el = document.createElement("input")
// cannot focus a element that is not "visible" aka cannot use display: none or visibility: hidden
el.style.width = "0"
el.style.height = "0"
el.style.opacity = "0"
el.style.position = "fixed"
el.style.top = "-20px"
document.body.appendChild(el)
setCopyListenerEl(el)
return () => {
document.body.removeChild(el)
}
}, [])
// adds a event listener for copying, and removes the old one
const overrideCopy = (newOverrideAction: () => any) => {
setCopyHandler((prevCopyHandler: (e: ClipboardEvent) => void) => {
const copyHandler = (e: ClipboardEvent) => {
e.preventDefault()
newOverrideAction()
}
copyListenerEl?.removeEventListener("copy", prevCopyHandler)
copyListenerEl?.addEventListener("copy", copyHandler)
copyListenerEl?.focus() // when focused, all copy events will trigger listener above
return copyHandler
})
}
return { overrideCopy }
}
Used like this:
const customCopyEvent = () => {
console.log("doing something")
}
const { overrideCopy } = useOverrideCopy()
overrideCopy(customCopyEvent)
Every time you call overrideCopy it will refocus and call your custom event on copy.
Another simple way using Jquery:
$(document).keydown( function(e)
{
if (e.ctrlKey && e.key == 'c')
{
console.log('got ctrl c');
}
else if (e.ctrlKey && e.key == 'v')
{
console.log('got ctrl v');
}
});
element.addEventListener('keydown', function (e) {
if (e.key == 'c' && e.ctrlKey) {
e.preventDefault(); // prevent from copying
}
if (e.key == 'v' && e.ctrlKey) {
e.preventDefault(); // prevent from pasting
}
}
i already have your problem and i solved it by the following code .. that accept only numbers
$('#<%= mobileTextBox.ClientID %>').keydown(function(e) {
///// e.which Values
// 8 : BackSpace , 46 : Delete , 37 : Left , 39 : Rigth , 144: Num Lock
if (e.which != 8 && e.which != 46 && e.which != 37 && e.which != 39 && e.which != 144
&& (e.which < 96 || e.which > 105 )) {
return false;
}
});
you can detect Ctrl id e.which == 17
Important note
I was using e.keyCode for a while and i detected that when i press Ctrl+., This attribute returns a wrong number, 190, while the ascii code of . is 46!
So you should use e.key.toUpperCase().charCodeAt(0) instead of e.keyCode.
$(document).keydown(function(event) {
let keyCode = e.key.toUpperCase().charCodeAt(0);
...
}
You can listen to the keypress event, and halt the default event (entering the text) if it matches the specific keycodes
There is some ways to prevent it.
However the user will be always able to turn the javascript off or just look on the source code of the page.
Some examples (require jQuery)
/**
* Stop every keystroke with ctrl key pressed
*/
$(".textbox").keydown(function(){
if (event.ctrlKey==true) {
return false;
}
});
/**
* Clear all data of clipboard on focus
*/
$(".textbox").focus(function(){
if ( window.clipboardData ) {
window.clipboardData.setData('text','');
}
});
/**
* Block the paste event
*/
$(".textbox").bind('paste',function(e){return false;});
Edit: How Tim Down said, this functions are all browser dependents.