nmap-xml-parser.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nmap XML Parser</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- React and ReactDOM -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    
    <!-- Babel Standalone for JSX -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        const { useState } = React;
        
        // Lucide Icon Components
        const Upload = () => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="17 8 12 3 7 8"/>
                <line x1="12" y1="3" x2="12" y2="15"/>
            </svg>
        );
        
        const Server = () => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="8" rx="2" ry="2"/>
                <rect x="2" y="14" width="20" height="8" rx="2" ry="2"/>
                <line x1="6" y1="6" x2="6.01" y2="6"/>
                <line x1="6" y1="18" x2="6.01" y2="18"/>
            </svg>
        );
        
        const Shield = () => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
            </svg>
        );
        
        const Clock = () => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"/>
                <polyline points="12 6 12 12 16 14"/>
            </svg>
        );
        
        const AlertCircle = () => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"/>
                <line x1="12" y1="8" x2="12" y2="12"/>
                <line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
        );

        function NmapParser() {
            const [parsedData, setParsedData] = useState(null);
            const [error, setError] = useState(null);

            const parseNmapXML = (xmlContent) => {
                try {
                    const parser = new DOMParser();
                    const xmlDoc = parser.parseFromString(xmlContent, 'text/xml');

                    // Check for parsing errors
                    const parserError = xmlDoc.querySelector('parsererror');
                    if (parserError) {
                        throw new Error('Invalid XML file');
                    }

                    // Extract scan information
                    const nmaprun = xmlDoc.querySelector('nmaprun');
                    const scanInfo = {
                        scanner: nmaprun?.getAttribute('scanner') || 'Unknown',
                        version: nmaprun?.getAttribute('version') || 'Unknown',
                        args: nmaprun?.getAttribute('args') || 'Unknown',
                        startTime: new Date(parseInt(nmaprun?.getAttribute('start') || 0) * 1000).toLocaleString(),
                    };

                    // Extract hosts
                    const hosts = [];
                    const hostElements = xmlDoc.querySelectorAll('host');

                    hostElements.forEach(hostElement => {
                        const status = hostElement.querySelector('status');
                        const address = hostElement.querySelector('address');
                        const hostnames = hostElement.querySelectorAll('hostname');
                        
                        const host = {
                            status: status?.getAttribute('state') || 'unknown',
                            ip: address?.getAttribute('addr') || 'Unknown',
                            hostnames: Array.from(hostnames).map(h => h.getAttribute('name')).filter(Boolean),
                            ports: [],
                            os: null,
                        };

                        // Extract ports
                        const ports = hostElement.querySelectorAll('port');
                        ports.forEach(port => {
                            const state = port.querySelector('state');
                            const service = port.querySelector('service');
                            
                            host.ports.push({
                                portId: port.getAttribute('portid'),
                                protocol: port.getAttribute('protocol'),
                                state: state?.getAttribute('state') || 'unknown',
                                service: service?.getAttribute('name') || 'unknown',
                                product: service?.getAttribute('product') || '',
                                version: service?.getAttribute('version') || '',
                                extraInfo: service?.getAttribute('extrainfo') || '',
                            });
                        });

                        // Extract OS information
                        const osMatch = hostElement.querySelector('osmatch');
                        if (osMatch) {
                            host.os = {
                                name: osMatch.getAttribute('name'),
                                accuracy: osMatch.getAttribute('accuracy'),
                            };
                        }

                        hosts.push(host);
                    });

                    return { scanInfo, hosts };
                } catch (err) {
                    throw new Error(`Failed to parse XML: ${err.message}`);
                }
            };

            const handleFileUpload = (event) => {
                const file = event.target.files[0];
                if (!file) return;

                const reader = new FileReader();
                reader.onload = (e) => {
                    try {
                        const result = parseNmapXML(e.target.result);
                        setParsedData(result);
                        setError(null);
                    } catch (err) {
                        setError(err.message);
                        setParsedData(null);
                    }
                };
                reader.readAsText(file);
            };

            const getStateColor = (state) => {
                switch (state.toLowerCase()) {
                    case 'open':
                        return 'text-green-600 bg-green-50';
                    case 'closed':
                        return 'text-red-600 bg-red-50';
                    case 'filtered':
                        return 'text-yellow-600 bg-yellow-50';
                    default:
                        return 'text-gray-600 bg-gray-50';
                }
            };

            return (
                <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-8">
                    <div className="max-w-7xl mx-auto">
                        {/* Header */}
                        <div className="text-center mb-8">
                            <h1 className="text-4xl font-bold text-white mb-2 flex items-center justify-center gap-3">
                                <Shield />
                                Nmap XML Parser
                            </h1>
                            <p className="text-slate-400">Upload and analyze your Nmap scan results</p>
                        </div>

                        {/* File Upload */}
                        <div className="bg-slate-800 rounded-lg shadow-xl p-6 mb-6 border border-slate-700">
                            <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition-colors">
                                <div className="flex flex-col items-center justify-center pt-5 pb-6">
                                    <Upload />
                                    <p className="text-sm text-slate-400 mt-2">
                                        <span className="font-semibold">Click to upload</span> or drag and drop
                                    </p>
                                    <p className="text-xs text-slate-500 mt-1">Nmap XML file</p>
                                </div>
                                <input
                                    type="file"
                                    className="hidden"
                                    accept=".xml"
                                    onChange={handleFileUpload}
                                />
                            </label>
                        </div>

                        {/* Error Display */}
                        {error && (
                            <div className="bg-red-900/30 border border-red-600 rounded-lg p-4 mb-6 flex items-start gap-3">
                                <AlertCircle />
                                <div>
                                    <h3 className="text-red-400 font-semibold">Error</h3>
                                    <p className="text-red-300 text-sm">{error}</p>
                                </div>
                            </div>
                        )}

                        {/* Parsed Data Display */}
                        {parsedData && (
                            <div className="space-y-6">
                                {/* Scan Info */}
                                <div className="bg-slate-800 rounded-lg shadow-xl p-6 border border-slate-700">
                                    <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
                                        <Clock />
                                        Scan Information
                                    </h2>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                                        <div>
                                            <span className="text-slate-400">Scanner:</span>
                                            <span className="text-white ml-2">{parsedData.scanInfo.scanner} {parsedData.scanInfo.version}</span>
                                        </div>
                                        <div>
                                            <span className="text-slate-400">Start Time:</span>
                                            <span className="text-white ml-2">{parsedData.scanInfo.startTime}</span>
                                        </div>
                                        <div className="md:col-span-2">
                                            <span className="text-slate-400">Arguments:</span>
                                            <span className="text-white ml-2 font-mono text-xs">{parsedData.scanInfo.args}</span>
                                        </div>
                                    </div>
                                </div>

                                {/* Hosts */}
                                {parsedData.hosts.map((host, index) => (
                                    <div key={index} className="bg-slate-800 rounded-lg shadow-xl p-6 border border-slate-700">
                                        <div className="mb-4">
                                            <h2 className="text-xl font-bold text-white mb-2 flex items-center gap-2">
                                                <Server />
                                                Host: {host.ip}
                                            </h2>
                                            {host.hostnames.length > 0 && (
                                                <p className="text-slate-400 text-sm">
                                                    Hostname(s): {host.hostnames.join(', ')}
                                                </p>
                                            )}
                                            <div className="flex items-center gap-4 mt-2">
                                                <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
                                                    host.status === 'up' ? 'bg-green-900/50 text-green-300' : 'bg-red-900/50 text-red-300'
                                                }`}>
                                                    {host.status.toUpperCase()}
                                                </span>
                                                {host.os && (
                                                    <span className="text-slate-400 text-sm">
                                                        OS: {host.os.name} ({host.os.accuracy}% accuracy)
                                                    </span>
                                                )}
                                            </div>
                                        </div>

                                        {/* Ports Table */}
                                        {host.ports.length > 0 ? (
                                            <div className="overflow-x-auto">
                                                <table className="w-full text-sm">
                                                    <thead>
                                                        <tr className="border-b border-slate-700">
                                                            <th className="text-left text-slate-400 font-semibold py-2 px-2">Port</th>
                                                            <th className="text-left text-slate-400 font-semibold py-2 px-2">State</th>
                                                            <th className="text-left text-slate-400 font-semibold py-2 px-2">Service</th>
                                                            <th className="text-left text-slate-400 font-semibold py-2 px-2">Version</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {host.ports.map((port, portIndex) => (
                                                            <tr key={portIndex} className="border-b border-slate-700/50 hover:bg-slate-700/30">
                                                                <td className="py-2 px-2 text-white font-mono">
                                                                    {port.portId}/{port.protocol}
                                                                </td>
                                                                <td className="py-2 px-2">
                                                                    <span className={`px-2 py-1 rounded text-xs font-semibold ${getStateColor(port.state)}`}>
                                                                        {port.state}
                                                                    </span>
                                                                </td>
                                                                <td className="py-2 px-2 text-slate-300">{port.service}</td>
                                                                <td className="py-2 px-2 text-slate-400 text-xs">
                                                                    {port.product && `${port.product} `}
                                                                    {port.version && `${port.version} `}
                                                                    {port.extraInfo && `(${port.extraInfo})`}
                                                                </td>
                                                            </tr>
                                                        ))}
                                                    </tbody>
                                                </table>
                                            </div>
                                        ) : (
                                            <p className="text-slate-500 text-sm">No open ports found</p>
                                        )}
                                    </div>
                                ))}
                            </div>
                        )}

                        {/* Empty State */}
                        {!parsedData && !error && (
                            <div className="text-center py-12">
                                <Shield />
                                <p className="text-slate-400 mt-4">Upload an Nmap XML file to get started</p>
                            </div>
                        )}
                    </div>
                </div>
            );
        }

        // Render the app
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<NmapParser />);
    </script>
</body>
</html>