Client-side deterrence and security helpers for modern web applications. Provides layered protection against common client-side threats: XSS, copy/paste abuse, DevTools interference, session hijacking, iframe injection, CSRF, and more.
⚠️ Important: Browser JavaScript cannot provide server-level security. HydeSecurityJS provides deterrence, best-practice helpers, and hardening layers with safe defaults. Always pair with server-side validation.
Modern web apps face real threats:
- 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)
HydeSecurityJS gives you ready-to-use defenses for all of these in a single, lightweight package.
npm install @tirth1107/hyde-security-jsWrap 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>
)
}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>
)
}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')Initialize with HydeSecurity.init(config) or via the React Provider:
interface HydeSecurityConfig {
appName?: string // Used for watermarks and logging
mode?: 'dev' | 'balanced' | 'strict' // Overall security posture
enableLogs?: boolean // Show console logs
enableWatermark?: boolean // Tiled canvas watermark overlay
onThreatDetected?: (ev: HydeSecurityEvent) => void
// Granular Overrides (defaults depend on mode)
enableAntiCopy?: boolean
enableAntiPrint?: boolean
enableAntiContextMenu?: boolean
enableTabGuard?: boolean
enableAntiScreenCapture?: boolean
enableAntiIframe?: boolean
allowedIframes?: string[]
}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.
- 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.
- 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 toSecureandSameSite=Strict.
- HTML Sanitization:
sanitize.html(input)andsanitize.safeSetHTML(el, input)powered by DOMPurify. - URL & Text:
sanitize.url(url)ensures safe protocols;sanitize.text(input)escapes HTML. - CSP Helper:
contentSecurityPolicy.build()andinject()for easy Content Security Policy management. - Input Validation: Detect SQLi, XSS, and validate emails/URLs with
inputValidation.validateField().
- Honeypots:
forms.addHoneypot(form)adds invisible fields;honeypot.isTriggered(form)detects bots. - Fast Typing & Headless: Detects superhuman typing speeds and headless browser artifacts.
- CSRF Protection:
csrfProtection.attachToAxios(client)auto-injects CSRF tokens from meta tags.
- 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.
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")
}- Scoped Package: We have moved to the scoped package
@tirth1107/hyde-security-js. Please update yourpackage.jsonand imports. - Module Improvements: Many sub-modules were fixed for memory leaks, SSR compatibility, and proper security defaults (e.g.,
cookie.set()now defaults to Secure). - New Modules: Explore
csrfProtection,contentSecurityPolicy, andinputValidationinHydeSecurity.modules.
MIT © Tirth1107