Block Dev Tools, Right-Click & Text Selection with PageProtector.js Library

PageProtector.js is a lightweight JavaScript library that adds a layer of client-side protection to deter casual inspection of your web pages.

This library targets casual users who might attempt to inspect or copy your frontend code through standard browser interfaces. It combines event blocking, shortcut interception, and runtime detection methods to create barriers against basic inspection attempts.

Features:

Sponsored
• Disables right-click context menu across the entire page
• Blocks all major developer tools keyboard shortcuts (F12, Ctrl+Shift+I, Ctrl+U, etc.)
• Prevents text selection and copying functionality
• Automatically reloads the page if developer tools are opened.
• Configurable protection options with callback support
• Visual status indicator showing protection status
• Clean destruction method for removing all protections
• Auto-initialization option for immediate deployment

How to use it:

1. Download the library and load the PageProtector.js script in the document.

<script src="page-protector.js"></script>

2. Initialize the library with all default protections active.

const protector = new PageProtector();
protector.init()

3. The PageProtector method accepts a configuration object that controls all protection behaviors:

• disableRightClick (default: true) – Prevents the context menu from appearing when users right-click anywhere on the page
• disableShortcuts (default: true) – Blocks F12, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+U, and Ctrl+Shift+C keyboard combinations
• disableTextSelection (default: true) – Prevents users from selecting text content using mouse or keyboard
• obfuscate (default: true) – Add obfuscation comments to your source code
• tamperDetection (default: true) – Monitors for developer tools and reloads the page when detected
• tamperCheckInterval (default: 1000) – Frequency in milliseconds for checking developer tools status
• tamperThreshold (default: 100) – Time delay threshold in milliseconds that indicates developer tools are open
• showStatusIndicator (default: true) – Displays a small status badge in the bottom-right corner

const protector = new PageProtector({
  disableRightClick: true,
  disableShortcuts: true,
  disableTextSelection: true,
  obfuscate: true,
  tamperDetection: true,
  tamperCheckInterval: 1000,
  tamperThreshold: 100,
  showStatusIndicator: true,
});

4. Event callbacks:

const protector = new PageProtector({

  // fires every time a user attempts to right-click on the page 
  onContextMenuBlocked: function(e){},

  // triggered whenever a user presses a keyboard shortcut 
  onShortcutBlocked: function(shortcut){},

  // fires when the `tamperDetection` mechanism concludes that the developer tools are open
  onDevToolsDetected: function(){},
  
});

5. API methods.

• init(): Activates the configured protections.
• destroy(): Removes all protections and event listeners.
• updateStatus(message): Shows a custom message in the status indicator.

How It Works:

PageProtector operates through multiple browser API layers to create protection coverage. The library attaches event listeners to the document object that intercept and prevent default behaviors for context menus, keyboard events, and text selection attempts.

The right-click protection works by listening for contextmenu events and calling preventDefault() to stop the browser from displaying its standard context menu. Keyboard shortcut blocking operates at the keydown event level, checking for specific key combinations and preventing their default actions before they can trigger developer tools.

Text selection prevention utilizes the selectstart event, which fires before the browser begins text selection. By preventing this event’s default behavior, PageProtector stops users from highlighting content.

The tamper detection system runs on a configurable interval using setInterval(). Each check measures execution time around a debugger statement using performance.now(). When developer tools are open, the debugger statement pauses execution significantly longer than normal. If this delay exceeds the configured threshold, the library triggers the reload behavior.

The status indicator creates a fixed-position DOM element with high z-index values to remain visible above other page content. Font Awesome icons load dynamically if not already present, and status updates use opacity transitions for smooth visual feedback.

FAQs:

Q: Can determined users bypass these protections?
A: Yes, experienced developers can disable JavaScript, use browser extensions, or employ other methods to circumvent client-side protections. PageProtector acts as a deterrent for casual inspection rather than foolproof security.

Q: Does PageProtector affect website performance?
A: The library has minimal performance impact since it primarily adds event listeners and runs lightweight detection checks. The tamper detection interval represents the most resource-intensive feature, but the default 1000ms interval keeps overhead negligible.

The post Block Dev Tools, Right-Click & Text Selection with PageProtector.js Library appeared first on CSS Script.