Back to Ecosystem
v1.1.0 Released
Hyde Security JS
Client-side deterrence and security helpers for modern web applications. Layered protection against XSS, DOM tampering, bots, and DevTools abuse.
500+ Users Family
•
MIT License
•
npm package
•
Zero Dependencies
🚀 We are working on a massive v1.5 which will bring incredible features! Stay tuned.
npm install @tirth1107/hyde-security-js
Important: This library provides client-side security enhancements and is NOT a replacement for server-side security measures. Always implement proper backend authentication, authorization, and validation.
Why HydeSecurityJS?
Modern web apps face real threats. HydeSecurityJS gives you ready-to-use defenses for all of these in a single, lightweight package:
- Content theft: copy, screenshot, print
- Debug/inspect abuse: tampering, devtools
- Injection attacks: XSS, SQLi via user input
- Session stealing: token exposure, replay attacks
- Automated abuse: bots, fast-clicking, CSRF
- Framing attacks: clickjacking, invisible iframes
Installation & Setup
React
Wrap your app or specific routes with HydeSecurityProvider:
import React from 'react'
import { HydeSecurityProvider, useHydeSecurity } from '@tirth1107/hyde-security-js/react'
export default function App() {
return (
<HydeSecurityProvider
config={{
appName: 'My Secure App',
mode: 'strict', // 'dev' | 'balanced' | 'strict'
enableWatermark: true,
onThreatDetected: (event) => console.warn('Threat detected:', event)
}}
>
<YourApp />
</HydeSecurityProvider>
)
}
Next.js
Use it in your root layout:
// app/layout.tsx
'use client'
import { HydeSecurityProvider } from '@tirth1107/hyde-security-js/react'
export default function RootLayout({ children }) {
return (
<html>
<body>
<HydeSecurityProvider config={{ appName: 'My SaaS', mode: 'balanced' }}>
{children}
</HydeSecurityProvider>
</body>
</html>
)
}
Vanilla HTML/JS or Vite (SPA)
import { HydeSecurity } from '@tirth1107/hyde-security-js'
HydeSecurity.init({
appName: 'My Vanilla App',
mode: 'strict',
enableWatermark: true,
onThreatDetected: (event) => {
// Send to your backend logging service
fetch('/api/security-logs', { method: 'POST', body: JSON.stringify(event) })
}
})
// Use specific modules
const secureKey = HydeSecurity.encryptText('secret-data', 'my-key')
🛡️ Core Features (v1.1.0)
1. Anti-DevTools & Anti-Debug
- Detects when users open DevTools and optional UI locking.
- Detects size traps, debugger timing, console latency, and Firebug.
- Blocks F12, Ctrl+Shift+I/J/C, and Ctrl+U.
2. Content Protection
- Anti-Copy: Blocks copy, cut, drag, and selection.
- Anti-Print: Blocks Ctrl+P and visually blurs the document if print dialog opens.
- Anti-Screen Capture: Deters screenshots using DRM APIs and Canvas overlays.
- Watermarking: Tiled, tamper-resistant canvas watermark over the entire screen.
3. Session Management & Storage
- Session Timeout: Auto-logout after inactivity, synchronized across tabs.
- Secure Storage:
storage.set(key, val, { encrypt: true, ttl: 3600 })— encrypts data and adds auto-expiring TTLs. - Secure Cookies:
cookie.setSecure(key, val)defaults to Secure and SameSite=Strict.
4. Injection & XSS Prevention
- HTML Sanitization:
sanitize.html(input)powered by DOMPurify. - URL & Text:
sanitize.url(url)ensures safe protocols. - CSP Helper:
contentSecurityPolicy.build()for easy CSP management. - Input Validation: Detect SQLi, XSS, and validate emails/URLs.
5. Bot & Abuse Deterrence
- Honeypots:
forms.addHoneypot(form)adds invisible fields. - Fast Typing: Detects superhuman typing speeds and headless browsers.
- CSRF Protection:
csrfProtection.attachToAxios(client)auto-injects CSRF tokens.
6. Network & Integrity
- Request Signing:
network.createClient({ sign: true })signs requests using HMAC-SHA256. - Auto-Retry: Network client automatically retries 5xx errors with exponential backoff.
- Script Integrity:
integrity.checkScriptIntegrity(src, hash)verifies external scripts via SHA-256.
Advanced Usage
import { HydeSecurity } from '@tirth1107/hyde-security-js'
// 1. Manually protect a specific element from DOM tampering
HydeSecurity.protectElement('#sensitive-data')
// 2. Encrypt/Decrypt
const encrypted = HydeSecurity.encryptText('Hello', 'passphrase')
const decrypted = HydeSecurity.decryptText(encrypted, 'passphrase')
// 3. Password Strength (zxcvbn)
const strength = HydeSecurity.checkPassword('P@ssw0rd123!')
console.log(strength.feedback)
// 4. Access individual modules
const { inputValidation, csrfProtection } = HydeSecurity.modules
if (inputValidation.isSQLInjection("SELECT * FROM users")) {
HydeSecurity.lockScreen("Malicious input detected")
}
Migration Guide: v1.0.0 to v1.1.0
- Scoped Package: We have moved to the scoped package
@tirth1107/hyde-security-js. Please update your package.json. - Module Improvements: Many sub-modules were fixed for memory leaks, SSR compatibility, and proper security defaults (e.g., cookie.set() defaults to Secure).
- New Modules: Explore csrfProtection, contentSecurityPolicy, and inputValidation in HydeSecurity.modules.
Configuration Options
{
// Detection & Prevention
devToolsDetection: true,
xssProtection: true,
antiDebug: true,
sessionProtection: true,
botDetection: true,
domProtection: true,
// Behavior
redirectOnDevTools: false,
redirectUrl: 'https://example.com',
autoSessionValidation: true,
sessionTimeout: 3600000, // 1 hour
// Logging
verboseLogging: false,
logToConsole: true,
// Callbacks
onDevToolsOpen: null,
onXSSAttempt: null,
onBotDetected: null,
onDOMTamper: null
}
Best Practices
-
Server-Side Validation - Always validate on the server, never rely solely on client-side checks.
-
HTTPS Only - Always serve your application over HTTPS.
-
Keep Updated - Regularly update the library to get security patches.
-
Implement CSP - Use Content Security Policy headers for defense-in-depth.
-
Rate Limiting - Implement server-side rate limiting for sensitive operations.
Examples
Protecting a Form
const security = new HydeSecurity();
security.enableXSSProtection();
document.getElementById('form').addEventListener('submit', (e) => {
const input = document.getElementById('userInput').value;
const cleaned = security.sanitizeInput(input);
// Submit cleaned data
});
Session Management
security.setSessionToken(jwtToken, 3600000);
setInterval(() => {
if (!security.validateSession()) {
window.location.href = '/login';
}
}, 60000);
Support & Resources
Access source code, NPM packages, and issue tracking for Hyde Security JS.