Zero-Trust Node.js: Securing the Runtime

import React, { useState } from 'react';

// 🔒 Security Simulator

export default function SecurityDemo() {
    const [policy, setPolicy] = useState('none'); // none | strict
    const [logs, setLogs] = useState([]);
    
    const addLog = (msg, success) => {
        setLogs(prev => [...prev.slice(-4), { msg, success, id: Math.random() }]);
    };
    
    const attemptAction = (action, scope) => {
        if (policy === 'none') {
            addLog(`Allowed: ${action} to ${scope}`, true);
        } else {
            // Strict Policy Rules
            let allowed = false;
            if (action === 'READ_FILE' && scope.includes('/app/config')) allowed = true;
            if (action === 'NET_REQ' && scope.includes('stripe.com')) allowed = true;
            
            if (allowed) {
                addLog(`Allowed: ${action} to ${scope}`, true);
            } else {
                addLog(`BLOCKED: ${action} ${scope}`, false);
            }
        }
    };

    return (
        <div className="bg-slate-50 dark:bg-slate-950 p-8 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-xl">
            <h3 className="text-3xl font-black text-gray-900 dark:text-white mb-8 flex items-center gap-3">
                <span className="text-green-500">🔒</span> Zero-Trust Runtime
            </h3>

            <div className="flex flex-col md:flex-row gap-8">
            
                {/* Policy Toggle */}
                <div className="w-full md:w-1/3 space-y-4">
                    <div className="p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800">
                        <label className="flex items-center justify-between cursor-pointer">
                            <span className="font-bold text-gray-700 dark:text-gray-300">Strict Permissions</span>
                            <div 
                                onClick={() => { setPolicy(p => p === 'none' ? 'strict' : 'none'); setLogs([]); }}
                                className={`w-14 h-8 rounded-full flex items-center p-1 transition-colors ${policy === 'strict' ? 'bg-green-500' : 'bg-gray-300'}`}
                            >
                                <div className={`w-6 h-6 bg-white rounded-full shadow-md transform transition-transform ${policy === 'strict' ? 'translate-x-6' : 'translate-x-0'}`}></div>
                            </div>
                        </label>
                        <div className="text-xs text-gray-500 mt-2">
                            {policy === 'strict' 
                                ? 'Flags: --allow-fs-read="./config" --allow-net="stripe.com"' 
                                : 'Flags: (None) - Full Access Granted'}
                        </div>
                    </div>

                    <div className="space-y-2">
                        <button 
                            onClick={() => attemptAction('READ_FILE', '/app/config/settings.json')}
                            className="w-full text-left p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 transition flex items-center gap-2 text-sm font-bold text-blue-700 dark:text-blue-400"
                        >
                            <span>📄</span> Read Config (Valid)
                        </button>
                        <button 
                            onClick={() => attemptAction('NET_REQ', 'https://api.stripe.com/v1')}
                            className="w-full text-left p-3 rounded-lg bg-green-50 dark:bg-green-900/20 hover:bg-green-100 transition flex items-center gap-2 text-sm font-bold text-green-700 dark:text-green-400"
                        >
                            <span>Globe</span> Stripe API (Valid)
                        </button>
                         <button 
                            onClick={() => attemptAction('READ_FILE', '/etc/shadow')}
                            className="w-full text-left p-3 rounded-lg bg-red-50 dark:bg-red-900/20 hover:bg-red-100 transition flex items-center gap-2 text-sm font-bold text-red-700 dark:text-red-400"
                        >
                            <span>🔑</span> Read /etc/shadow (Malware)
                        </button>
                         <button 
                            onClick={() => attemptAction('NET_REQ', 'http://hackerserver.com/leak')}
                            className="w-full text-left p-3 rounded-lg bg-red-50 dark:bg-red-900/20 hover:bg-red-100 transition flex items-center gap-2 text-sm font-bold text-red-700 dark:text-red-400"
                        >
                            <span>🌐</span> Exfiltrate Data (Malware)
                        </button>
                    </div>
                </div>

                {/* Simulated Runtime Console */}
                <div className="flex-1 bg-black rounded-xl p-6 font-mono text-sm relative overflow-hidden">
                    <div className="absolute top-0 right-0 p-4 opacity-50">
                        {policy === 'strict' ? <span className="text-5xl">🔒</span> : <span className="text-5xl">🛑</span>}
                    </div>
                    
                    <div className="text-gray-500 border-b border-gray-800 pb-2 mb-4">
                        root@node-server:~# node server.js {policy === 'strict' ? '--permission --allow...' : ''}
                    </div>

                    <div className="space-y-3">
                        {logs.map(log => (
                            <div key={log.id} className={log.success ? 'text-green-400' : 'text-red-500 bg-red-900/20 p-1 border-l-2 border-red-500'}>
                                {log.success ? '✓' : '✗'} [RUNTIME] {log.msg}
                                {!log.success && <div className="text-red-300 text-xs pl-4 mt-1">ERR_ACCESS_DENIED: Permission required but not granted.</div>}
                            </div>
                        ))}
                    </div>
                </div>

            </div>
        </div>
    );
}