Client-side deterrence and security helpers for web applications. Provides layered protection against common client-side threats: XSS, copy/paste abuse, DevTools interference, session hijacking, iframe injection, and more.
⚠️ Important: This is NOT a "hack-proof" system. Browser JavaScript cannot provide server-level security. HydeSecurityJS provides deterrence, best-practice helpers, and hardening layers with safe defaults.
Modern web apps face real threats:
- Content theft (copy, screenshot, print)
- Debug/inspect abuse (tampering, devtools)
- Injection attacks (XSS via user input)
- Session stealing (token exposure, replay attacks)
- Automated abuse (bots, fast-clicking)
- Framing attacks (clickjacking, invisible iframes)
HydeSecurityJS gives you ready-to-use defenses for all of these.
- Detect DevTools open and react (blur UI, warn, lock screen)
- Block/detect common shortcuts (F12, Ctrl+Shift+I, etc.)
- Sanitize user-generated HTML (XSS prevention)
- Encrypt sensitive data before storage
- Rate-limit actions (clicks, API calls)
- Detect session anomalies via fingerprinting
- Protect DOM nodes from tampering
- Add session timeout and multi-tab logout
- Block iframe framing
- Detect headless browsers and fast automation
- Prevent determined attackers (browser is client-side)
- Enforce crypto on the wire (use HTTPS + server-side validation)
- Prevent all screen capture tools
- Replace server-side validation and security
- Protect against network-level interception
npm install hyde-security-jsOr from CDN (when UMD build is available):
<script src="https://cdn.example.com/hyde-security-js@1.0.0/dist/hyde-security-js.umd.js"></script>
<script>
window.HydeSecurity.init({ appName: 'My App', mode: 'balanced' })
</script><!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>Protected Content</h1>
<video id="protected" src="video.mp4"></video>
<script type="module">
import { HydeSecurity } from 'hyde-security-js'
// Initialize with strict mode
HydeSecurity.init({
appName: 'My Streaming App',
mode: 'strict',
enableLogs: true,
enableWatermark: true,
onThreatDetected: (event) => {
console.warn('🚨 Threat detected:', event)
}
})
// Protect a specific element
HydeSecurity.protectElement('#protected')
// Show toast notification
HydeSecurity.toast('Security initialized')
</script>
</body>
</html>import React from 'react'
import { HydeSecurityProvider } from 'hyde-security-js/react'
export default function App() {
return (
<HydeSecurityProvider
config={{
appName: 'Streaming Platform',
mode: 'balanced',
enableWatermark: true,
onThreatDetected: (event) => console.warn(event)
}}
>
<YourApp />
</HydeSecurityProvider>
)
}Wrap your root layout with HydeSecurityProvider:
// app/layout.tsx
import { HydeSecurityProvider } from 'hyde-security-js/react'
export default function RootLayout({ children }) {
return (
<html>
<body>
<HydeSecurityProvider
config={{
appName: 'My SaaS',
mode: 'balanced'
}}
>
{children}
</HydeSecurityProvider>
</body>
</html>
)
}Same as vanilla; import at app entry:
// src/main.ts
import { HydeSecurity } from 'hyde-security-js'
HydeSecurity.init({
appName: 'My Vite App',
mode: 'balanced',
enableLogs: false
})Initialize the security system.
Config:
interface HydeSecurityConfig {
appName?: string // App name for logging/watermark
mode?: 'dev' | 'balanced' | 'strict' // Security level
enableLogs?: boolean // Console logging
enableWatermark?: boolean // Add watermark overlay
onThreatDetected?: (event) => void // Threat callback
allowedIframes?: string[] // Allowed iframe origins
}Modes:
- dev: Minimal blocking, logs only
- balanced: Blocks shortcuts, encrypts storage (recommended)
- strict: All features enabled, blocks most actions, locks UI
Change security mode at runtime.
Disable or re-enable all security features.
Show a toast notification (auto-dismisses after 3s).
Show a full-screen overlay with a message. Use after detecting threats.
Remove the lock screen overlay.
Encrypt a string using AES-256 (CryptoJS).
Decrypt an encrypted string.
Encrypt a JSON object.
Store data with optional encryption.
Retrieve stored data, optionally decrypted.
Clear all storage.
Watch a DOM element for tampering via MutationObserver. Triggers onThreatDetected if modified.
Block paste events on a password/sensitive input.
Sanitize HTML using DOMPurify. Safe for innerHTML.
const safe = HydeSecurity.safeHTML('<img src=x onerror=alert(1) />')
element.innerHTML = safe // Safe!Enable DevTools detection. Detects window size changes and debugger traps.
HydeSecurity.modules.antiDevtools.enable({
onThreat: (event) => console.warn(event),
autoLock: true // Lock screen when detected
})Disable anti-devtools.
Block copy/cut/drag operations.
Blur content on print preview.
Block right-click context menu.
Initialize session timeout and multi-tab logout.
HydeSecurity.modules.session.init({
timeoutMinutes: 30,
onExpire: () => location.href = '/login'
})End session and clear all tabs.
Auto-sanitize all form inputs on submit.
Add a hidden honeypot field to detect bots.
const form = document.querySelector('form')
HydeSecurity.modules.forms.addHoneypot(form)
HydeSecurity.modules.forms.attachSanitize(form)Create an axios client with security headers.
const client = HydeSecurity.modules.network.createClient({
apiKey: 'your-api-key',
sign: true
})
await client.get('/api/data')Add security headers to an existing axios instance.
Detect rapid keyboard input (automation).
const check = HydeSecurity.modules.antiBot.detectFastTyping(passwordInput, 30)
// later: const { fast } = check()Detect headless browser (navigator.webdriver, etc.).
Get device info (browser, OS, type) using Bowser.
Get a browser fingerprint ID for session replay detection.
Watch a DOM node; call onTamper if modified.
Watch route changes.
✅ Detect DevTools open (size trap)
✅ Detect DevTools (debugger timing)
✅ Block F12
✅ Block Ctrl+Shift+I
✅ Block Ctrl+Shift+J
✅ Block Ctrl+Shift+C
✅ Block Ctrl+U
✅ Console logging bait
✅ Auto-lock UI on detection
✅ Security warning overlay
✅ Block Ctrl+S
✅ Block Ctrl+P
✅ Blur on print
✅ Disable copy on protected elements
✅ Disable cut
✅ Block paste in password fields
✅ Prevent image drag
✅ Watermark overlay
✅ HTML sanitization (DOMPurify)
✅ Safe innerHTML setter
✅ URL sanitizer
✅ Form input sanitization
✅ Suspicious DOM injection detection
✅ MutationObserver guard
✅ Remove inline event handlers
✅ Block script tag injection
✅ CSP helper
✅ Clickjacking prevention (frame busting)
✅ AES encrypt/decrypt
✅ Encrypt JSON objects
✅ Secure localStorage wrapper
✅ Secure sessionStorage wrapper
✅ localforage fallback
✅ Token vault with expiry
✅ Auto-wipe on tamper
✅ Mask sensitive values
✅ Prevent raw secrets
✅ PBKDF2 key derivation
✅ Session idle timeout
✅ Tab close cleanup
✅ Multi-tab sync logout
✅ JWT decode helper
✅ Session replay detection
✅ Login attempt limiter
✅ Honeypot fields
✅ Fast typing detection
✅ Rate limiter for clicks
✅ Headless browser detection
✅ Suspicious repeat action detection
✅ Device trust score
✅ Axios wrapper with signing
✅ Integrity headers
✅ Auto-retry with backoff
✅ Block if integrity fails
✅ API error sanitizer
✅ Script integrity check
✅ DOM watermark overlay
✅ Source mod detection
✅ Iframe detection
✅ Lock UI on tamper
HydeSecurity.init({
appName: 'FlixPro',
mode: 'strict',
enableWatermark: true,
enableLogs: false,
onThreatDetected: (event) => {
if (event.severity === 'critical') {
HydeSecurity.lockScreen('Your session has been secured.')
}
// Send to backend for logging
fetch('/api/security/event', { method: 'POST', body: JSON.stringify(event) })
}
})
// Protect video element
HydeSecurity.protectElement('#video-player')
// Encrypt sensitive tokens before storage
const token = HydeSecurity.encryptText(authToken, 'secret')
localStorage.setItem('auth', token)HydeSecurity.init({
appName: 'DataDash',
mode: 'balanced',
enableLogs: true,
onThreatDetected: console.warn
})
// Protect forms
const form = document.querySelector('form')
HydeSecurity.modules.forms.attachSanitize(form)
HydeSecurity.modules.forms.addHoneypot(form)
// Protect password input
HydeSecurity.protectInput('#password')
// Session timeout
HydeSecurity.modules.session.init({
timeoutMinutes: 15,
onExpire: () => location.href = '/login'
})HydeSecurity.init({
appName: 'DevSite',
mode: 'dev',
enableLogs: true
})
// Minimal blocking, inspect as needed- Always use HTTPS: Client-side security is worthless without transport security.
- Validate on the server: Never trust client-side validation alone.
- Use CSP headers: Set
Content-Security-Policyheaders server-side. - Monitor events: Send
onThreatDetectedevents to your backend for analysis. - Combine layers: Use HydeSecurityJS with server-side protections.
- Test regularly: Verify your security configuration works as expected.
- Keep dependencies updated: Run
npm auditand update regularly.
Q: DevTools detection not working?
A: Some browsers may bypass size-based detection. HydeSecurityJS uses multiple methods (size, debugger trap, timing). For guaranteed prevention, use CSP and server-side validation.
Q: Encryption keys are in client-side code?
A: For client-side encryption, keys must be in code (or fetched). This is not secure for sensitive data. Use server-side encryption for real secrets.
Q: Does this stop screenshots?
A: No. Screenshots are OS-level and cannot be blocked from the browser. Watermarks add a deterrent.
Q: Can I use this with my framework?
A: Yes! Import and use in any React, Vue, Angular, Svelte app. For React, use HydeSecurityProvider. For others, call HydeSecurity.init() in your root component/entry.
- Not hack-proof: This is client-side; determined attackers can bypass anything.
- Browser-dependent: Features vary by browser and can be disabled by users.
- Performance: Some features (fingerprinting, encryption) add overhead.
- Privacy: Watermarks and logging may impact user privacy; inform users.
Contributions welcome! Please:
- Fork the repo
- Create a feature branch
- Add tests if applicable
- Submit a PR
MIT — See LICENSE
- Docs: See examples in
examples/folder - Issues: Open a GitHub issue
- Questions: Check the FAQ above
Made with 🔥 by Hyde Team