Skip to content

bioverflow/cracker-trap

Repository files navigation

Cracker Trap

JavaScript Style Guide Build Status

Detect if web developer tools is opened and change natural flow on your own web apps, you can override to redirect to another web page, show an alert, limit your own code or whatever when a possible cracker is detected.

Ok, but.. what does this?

Return next states in a global defined object or DOM event:

  • Developer Tools is opened: Boolean <true | false>
  • Developer Tools position: String <horizontal | vertical>
  • Developer Tools is undocked (in separated window): Boolean < true | false >

Demo

Install

CDN

Yarn

$ yarn add cracker-trap

NPM

$ npm install --save cracker-trap

Usage

Always use cracker-trap.min.js file, which is in the build folder

<!-- 1) Insert on your own declarations-->
<script src="YOUR_ASSETS_PATH/cracker-trap/build/cracker-trap.min.js"></script>
<!-- 2) Use after declaration -->
<script>
	/// Single usage
	// checking if developer tools it's open
	console.log('is developer tools open?: ', window.devtools.open);
	// if DevTools is opened detect their orientation
	console.log('DevTools orientation?: ', window.devtools.orientation);
	// if DevTools is undocked from main page
	console.log('DevTools is undocked?: ', window.devtools.undocked);

	/// Listening event when state is change
	// Get state when itself is changed
	window.addEventListener('onDevToolsChange', function (e) {
		console.log('is DevTools open?', e.detail.open);
		console.log('DevTools orientation?', e.detail.orientation);
		console.log('DevTools is undocked?: ', e.details.undocked);
	});
</script>

DevTools Supported

  • Chrome DevTools
  • Edge DevTools
  • Firefox DevTools
  • Opera DevTools
  • Firebug
  • Internet Explorer 11 DevTools

Standard

JavaScript Style Guide

License

GPL-3.0 © Reverse Bytes