ban-devtools
v1.0.5
Published
A lightweight React/Next.js component and hook to prevent inspecting elements and using developer tools.
Maintainers
azzamcodexReadme
ban-devtools
Enterprise-Grade Anti-DevTools Protection for React & Next.js
Engineered to protect proprietary Source Code and API Keys from unauthorized inspection in React and Next.js environments.
Open Source Commitment
ban-devtools is a fully Open Source library. It is built by the community, for the community. Developers are encouraged to audit the source code, fork the repository, and contribute to the ongoing security and optimization of this package. We believe in transparency and robust security through peer review.
Core Features
This library utilizes a multi-layered security architecture.
Under The Hood (Architecture Logic)
The internal mechanism, useBanDevTools, operates on three distinct vectors of detection:
- Shortcut Interception:
Intercepts keydown events globally and invokes
e.preventDefault(). This stops the browser's native behavior without immediately triggering a redirect, maintaining a seamless user experience for accidental keystrokes. - Debugger Trap Loop:
Executes a continuous
debuggerinstruction within a 100ms interval loop. When DevTools is opened, the JavaScript engine halts execution. Our script calculates the execution delay; if it exceeds 100ms, it confirms a breach and executes the redirect protocol. - Resize Heuristic Detection:
A failsafe mechanism. If the debugger trap is bypassed and DevTools docks to the browser window, it forcefully reduces the
window.innerWidthorwindow.innerHeight. The script detects this aggressive delta (>160px) and immediately redirects the user.
Installation
npm install ban-devtools
# or
yarn add ban-devtoolsImplementation Guide
Global Protection (Next.js App Router)
To secure the entire application, wrap your application at the root layout level.
// app/layout.tsx
import { BanDevTools } from 'ban-devtools';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<BanDevTools redirectUrl="https://www.azzamcodex.site/" />
{children}
</body>
</html>
);
}Component-Level Protection (React Hooks)
For granular control, utilize the useBanDevTools hook directly inside specific functional components.
import React from 'react';
import { useBanDevTools } from 'ban-devtools';
export default function SecureDashboard() {
// Initialize the protection hook
useBanDevTools({
redirectUrl: 'https://www.azzamcodex.site/',
disableRightClick: true,
disableShortcuts: true,
debuggerLoop: true,
});
return (
<div>
<h1>Enterprise Dashboard</h1>
<p>This component is protected against source inspection.</p>
</div>
);
}Configuration Reference
| Property | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| redirectUrl | string | 'https://www.azzamcodex.site/' | The secure URL destination when an inspection attempt is detected. |
| disableRightClick | boolean | true | Disables the context menu to prevent manual inspection. |
| disableShortcuts | boolean | true | Intercepts F12 and common Chromium/WebKit inspection shortcuts. |
| debuggerLoop | boolean | true | Activates the infinite debugger trap and execution timer. |
Tech Stack
Credits & License
Designed & Engineered by Azzam Codex
Copyright © 2026 Azzam Codex. All Rights Reserved. Licensed under the MIT License.