A lightweight JavaScript library that protects your web pages against casual inspection and developer tools access. PageProtector adds multiple layers of client-side protection to deter users from viewing or modifying your source code.
- 🚫 Disable right-click context menu
- ⌨️ Block developer tools keyboard shortcuts (F12, Ctrl+Shift+I, etc.)
- 🔒 Prevent text selection and copying
- 🔍 Tamper detection (auto-reloads page when dev tools are open)
- 🕵️♂️ Source code obfuscation
- 📊 Optional protection status indicator
- ⚙️ Fully configurable protection options
- 🧹 Clean destruction method to remove protections
<script src="https://cdn.jsdelivr.net/gh/anupammo/page-protecter@main/page-protector.js"></script>- Download the latest version:
curl -O https://raw.githubusercontent.com/anupammo/page-protecter/refs/heads/main/page-protector.js- Include in your HTML:
<script src="path/to/page-protector.js"></script><script>
// Initialize with default settings
const protector = new PageProtector();
protector.init();
</script>const protector = new PageProtector({
disableRightClick: true,
disableShortcuts: true,
disableTextSelection: false,
tamperDetection: true,
obfuscate: true,
showStatusIndicator: true,
tamperCheckInterval: 1500,
tamperThreshold: 150,
onContextMenuBlocked: function(e) {
console.log('Context menu blocked', e);
},
onShortcutBlocked: function(shortcut) {
console.log('Blocked shortcut:', shortcut);
},
onDevToolsDetected: function() {
console.log('Dev tools detected!');
}
}).init();<head>
<script>
// Set auto-init flag before loading the library
const PAGE_PROTECTOR_AUTO_INIT = true;
</script>
<script src="page-protector.js"></script>
</head>| Option | Default | Description |
|---|---|---|
disableRightClick |
true |
Disable right-click context menu |
disableShortcuts |
true |
Block developer tools keyboard shortcuts |
disableTextSelection |
true |
Prevent text selection on the page |
tamperDetection |
true |
Detect and reload when dev tools are open |
obfuscate |
true |
Add obfuscation comments to source code |
showStatusIndicator |
true |
Show protection status indicator in corner |
tamperCheckInterval |
1000 |
How often to check for dev tools (milliseconds) |
tamperThreshold |
100 |
Time threshold to detect dev tools (milliseconds) |
onContextMenuBlocked |
null |
Callback when context menu is blocked |
onShortcutBlocked |
null |
Callback when a shortcut is blocked |
onDevToolsDetected |
null |
Callback when dev tools are detected |
Initializes all enabled protection features.
Removes all protection features and cleans up event listeners.
Updates the status indicator with a custom message (only if enabled).
Triggered when a context menu is blocked.
Triggered when a keyboard shortcut is blocked. Returns the blocked shortcut name.
Triggered when developer tools are detected.
- This library provides client-side protection only
- Determined users can bypass these protections
- Always implement server-side security for sensitive operations
- These protections act as deterrents, not foolproof security
- Do not rely on client-side protection for sensitive logic or data
PageProtector works on all modern browsers including:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a new branch (
git checkout -b feature/your-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin feature/your-feature) - Create a new Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any issues or questions, please open an issue.
Disclaimer: This library makes it more difficult for casual users to inspect your source code, but determined users can still bypass these protections. Always implement proper server-side security measures for sensitive operations.