@ridhof_1/optiguard-security 🛡️

Enterprise-grade frontend security shield: Anti-DevTools, Anti-Debugger, Forensic Watermarking, Tab-Switch Privacy Shield, Inactivity Auto-Lock, Anti-Print, Content Protection, Security Incident Telemetry, dan customizable OptiGuard Lock Screen untuk aplikasi Web & SPA (React, Next.js, Vue, Inertia.js, Vite, dan Vanilla JS).

📑 Daftar Isi

• Fitur Utama
• Instalasi
• Panduan Penggunaan Cepat (Quick Start)
• Fitur Lanjutan & Konfigurasi
  • 1. Dynamic Forensic Watermark
  • 2. Tab-Switch Privacy Shield (Anti-Peeking)
  • 3. Inactivity & Idle Auto-Lock
  • 4. Anti-Print & Anti-Save PDF
  • 5. Content Protection (Copy, Cut, Drag, Selection)
  • 6. Security Incident Telemetry & Webhooks
  • 7. Storage Wiper on Breach
• Integrasi React (Component & Hook)
• Konfigurasi Lengkap (Full Options API)
• Lisensi

✨ Fitur Utama

• 🔍 Real-time DevTools & Inspector Detection: Mendeteksi pembukaan console (docked/undocked), inspect element, debugger trap, dan console sniffing secara presisi.
• 💧 Dynamic Forensic Watermark: Menghasilkan watermark dinamis transparan (Email, IP, Timestamp, Nama User) dengan proteksi anti-tamper MutationObserver.
• 👁️ Tab-Switch Privacy Shield: Otomatis mem-blur layar dan memunculkan barrier anti-peeking saat pengguna berpindah tab / minimize window.
• ⏱️ Inactivity & Idle Auto-Lock: Mengunci layar atau logout otomatis saat pengguna tidak melakukan aktivitas (mouse/keyboard/scroll) selama waktu yang ditentukan.
• 🖨️ Anti-Print & PDF Blocker: Memblokir shortcut Ctrl+P/Cmd+P dan mematikan tampilan dokumen pada mode print preview.
• 📋 Content Copy & Selection Blocker: Mencegah copy-paste, cut, drag-and-drop, dan text selection pada data sensitif.
• 🚨 Incident Telemetry & Webhooks: Mengirimkan laporan insiden keamanan ke backend API / Webhook saat ada upaya manipulasi.
• 🧹 Storage Wiper on Breach: Otomatis menghapus localStorage, sessionStorage, atau cookies saat terjadi pelanggaran keamanan sebelum redirect.
• 🔒 Modern Lock Screen Dialog: Tampilan glassmorphism dark-mode beranimasi dengan custom branding dan logo.
• ⚛️ React Support: Dilengkapi hook useOptiGuard dan komponen <OptiGuardShield>, <OptiGuardWatermark>.

📦 Instalasi

# Melalui GitHub Repository langsung:
npm install github:ridho-f/optiguard

# Atau melalui package NPM:
npm install @ridhof_1/optiguard-security

🚀 Panduan Penggunaan Cepat (Quick Start)

1. Inisialisasi Paling Sederhana (JavaScript / TypeScript)

import { initSecurityProtection } from '@ridhof_1/optiguard-security';

// Aktifkan semua proteksi standar
initSecurityProtection({
  disableInDev: true, // Nonaktif di localhost saat coding
  redirectBehavior: 'logout',
  watermark: {
    text: ['PT Tata Optima Property', '[email protected]'],
    appendTimestamp: true,
  },
  privacyBlur: true,
  blockPrint: true,
});

🛡️ Fitur Lanjutan & Konfigurasi

1. Dynamic Forensic Watermark

Menambahkan overlay watermark semi-transparan untuk pelacakan forensik foto layar:

initSecurityProtection({
  watermark: {
    text: ['John Doe (NIK: 884920)', 'IP: 182.253.110.22', 'CONFIDENTIAL'],
    opacity: 0.08,
    fontSize: 14,
    rotate: -25,
    gap: [200, 100],
    appendTimestamp: true, // Otomatis menambahkan tanggal & jam real-time
    antiTamper: true,      // Otomatis recreate jika dihapus lewat DevTools
  },
});

2. Tab-Switch Privacy Shield (Anti-Peeking)

Menutup tampilan layar saat user membuka tab lain:

initSecurityProtection({
  privacyBlur: {
    enabled: true,
    blurAmount: '16px',
    overlayTitle: 'OptiGuard Privacy Shield',
    overlaySubtitle: 'Tampilan disembunyikan untuk menjaga kerahasiaan data.',
    unblurOnFocus: true, // Otomatis kembali normal saat tab dibuka lagi
  },
});

3. Inactivity & Idle Auto-Lock

Mengunci aplikasi jika user tidak menyentuh mouse/keyboard selama 5 menit:

initSecurityProtection({
  idleLock: {
    enabled: true,
    timeout: 5 * 60 * 1000, // 5 menit
    action: 'lockscreen',    // 'lockscreen' | 'logout' | 'redirect' | custom callback
    warnBeforeSeconds: 30,
    onWarning: (secondsLeft) => {
      console.warn(`Sesi akan terkunci dalam ${secondsLeft} detik`);
    },
  },
});

4. Anti-Print & Anti-Save PDF

initSecurityProtection({
  blockPrint: {
    enabled: true,
    hideContent: true,
    printMessage: 'DOKUMEN DILINDUNGI: Dilarang mencetak atau menyimpan dokumen ini.',
  },
});

5. Content Protection (Copy, Cut, Drag, Selection)

initSecurityProtection({
  contentProtection: {
    blockCopy: true,          // Blokir Ctrl+C & Copy context
    blockCut: true,           // Blokir Ctrl+X
    blockDragDrop: true,      // Blokir Drag gambar / teks
    blockTextSelection: true, // user-select: none
  },
});

6. Security Incident Telemetry & Webhooks

Otomatis mengirim payload telemetry ke endpoint backend atau webhook Slack/Discord:

initSecurityProtection({
  telemetry: {
    endpoint: '/api/security/incidents',
    headers: {
      'X-CSRF-TOKEN': '...',
    },
    metadata: () => ({
      userId: 123,
      role: 'Finance Admin',
    }),
    onIncident: (incident) => {
      console.warn('Security Incident Detected:', incident);
    },
  },
});

7. Storage Wiper on Breach

Membersihkan token di localStorage & sessionStorage saat ada hacker/user membuka Inspect Element:

initSecurityProtection({
  wipeStorageOnDetect: {
    localStorage: true,
    sessionStorage: true,
    cookies: ['auth_session', 'jwt_token'],
  },
});

⚛️ Integrasi React (Component & Hook)

Tersedia import khusus untuk ekosistem React:

import React from 'react';
import {
  OptiGuardShield,
  OptiGuardWatermark,
  useOptiGuard
} from '@ridhof_1/optiguard-security/react';

export function App() {
  // Opsi 1: Menggunakan Hook
  const { triggerLock } = useOptiGuard({
    watermark: { text: 'INTERNAL USE ONLY' },
    privacyBlur: true,
  });

  return (
    // Opsi 2: Menggunakan Component Shield
    <OptiGuardShield
      disableInDev={true}
      privacyBlur={true}
      idleLock={{ enabled: true, timeout: 300000 }}
    >
      <div className="container">
        <h1>Financial Dashboard</h1>

        {/* Opsi 3: Watermark hanya pada area sensitif */}
        <OptiGuardWatermark text="CONFIDENTIAL SALARY DATA">
          <table className="salary-table">
            {/* Tabel Data Gaji */}
          </table>
        </OptiGuardWatermark>
      </div>
    </OptiGuardShield>
  );
}

🛠️ Konfigurasi Lengkap (Full Options API)

interface SecurityConfig {
  enabled?: boolean;                           // Default: true
  disableInDev?: boolean;                      // Default: true
  redirectBehavior?: 'logout' | 'back' | 'google' | 'home' | 'blank' | string;
  redirectUrl?: string;                        // Default: '/login'
  blockContextMenu?: boolean;                  // Default: true
  blockShortcuts?: boolean;                    // Default: true
  detectDelay?: number;                        // Default: 200
  checkInterval?: number;                      // Default: 300

  // Fitur Baru v1.1.0:
  watermark?: boolean | WatermarkConfig;
  privacyBlur?: boolean | PrivacyBlurConfig;
  idleLock?: boolean | IdleLockConfig;
  blockPrint?: boolean | PrintBlockConfig;
  contentProtection?: ContentProtectionConfig;
  telemetry?: string | TelemetryConfig;
  wipeStorageOnDetect?: boolean | StorageWipeConfig;

  // Custom UI & Callbacks:
  branding?: SecurityBrandingConfig;
  onDetect?: (details?: { reason?: string }) => boolean | void;
  onRouteChanged?: (callback: () => void) => (() => void) | void;
}

📄 Lisensi

Distributed under the MIT License. Created & Maintained by PT Tata Optima Property & ridho-f.