十六进制文本码流转pcap(text2pcap)

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hex to PCAP Converter</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            padding-top: 0;
            min-height: 100vh;
            background: rgb(251, 250, 250);
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .container {
            width: 80%;
            margin: 5px 0;
            min-height: 100vh;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        textarea {
            width: 80%;
            min-height: 250px;
            margin: 10px 0;
            font-family: monospace;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .output-container {
            margin-top: 20px;
        }
        .title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        .checkbox-container {
            margin: 10px 0;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            width: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .modal input[type="text"] {
            width: 100%;
            padding: 8px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .modal-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }
        .modal-buttons button {
            width: 170px;
        }
		
		@media (max-width: 768px) {
            .container {
                padding: 1rem;
                margin: 70px 1rem 1rem;
            }

            .button-container {
                flex-direction: column;
            }

            .modal-content {
                width: 95%;
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Hex to PCAP Converter</h1>
        <div class="checkbox-container">
            <input type="checkbox" id="addHeaders" checked>
            <label for="addHeaders">Add MAC/IP/UDP Headers (GTP-C Port: 2123)</label>
        </div>

        <div class="input-container">
            <div class="title">Input Hex Stream:</div>
            <textarea id="inputHex" placeholder="Enter hex stream (space or newline separated)"></textarea>
            <div class="button-container">
                <button onclick="convertHex()">Convert to Wireshark Format</button>
                <button onclick="showExportDialog()">Export PCAP</button>
            </div>
        </div>
        
        <div class="output-container">
            <div class="title">Wireshark Compatible Format:</div>
            <textarea id="outputHex" readonly></textarea>
        </div>
    </div>

    <!-- Export Dialog -->
    <div id="exportDialog" class="modal">
        <div class="modal-content">
            <h2>Export PCAP</h2>
            <div>
                <label for="filename">FileName:</label>
                <input type="text" id="filename" value="packet.pcap">
            </div>
            <div class="modal-buttons">
                <button onclick="closeExportDialog()">Cancel</button>
                <button onclick="confirmExport()">Export</button>
            </div>
        </div>
    </div>

    <script>
        const MAC_IP_HEADER_LENGTH = 34;  // MAC + IP header length (不含UDP头)
        const UDP_HEADER_LENGTH = 8;      // UDP header length
        
        function getHeaderTemplate() {
            return [
                'FA', '16', '3E', '3C', 'F5', '10', 'FA', '16',
                '3E', '9F', 'B1', 'B4', '08', '00', '45', '00',
                '00', '00', // IP总长度 (占位)
                '15', '81', '00', '00', '80', '11',
                '00', '00', // IP校验和 (占位)
                '65', '26', '03', '6F', '65', '26',
                '03', 'D7', '08', '4B', '08', '4B',
                '00', '00', // UDP长度 (占位)
                '00', '00'  // UDP校验和 (占位，可选)
            ];
        }

        function calculateIPChecksum(header) {
            let sum = 0;
            for (let i = 14; i < 34; i += 2) {
                const value = (parseInt(header[i], 16) << 8) + parseInt(header[i + 1], 16);
                sum += value;
            }
            
            while (sum >> 16) {
                sum = (sum & 0xFFFF) + (sum >> 16);
            }
            
            return (~sum & 0xFFFF).toString(16).padStart(4, '0');
        }

        function processHexInput(input) {
            const cleaned = input.replace(/[\s\n\r]+/g, '').toUpperCase();
            const bytes = [];
            for (let i = 0; i < cleaned.length; i += 2) {
                bytes.push(cleaned.substr(i, 2));
            }
            return bytes;
        }

        function updateHeaders(headers, dataLength) {
            // 更新IP总长度 (IP头20字节 + UDP头8字节 + 数据长度)
            const ipTotalLength = (20 + 8 + dataLength).toString(16).padStart(4, '0');
            headers[16] = ipTotalLength.slice(0, 2);
            headers[17] = ipTotalLength.slice(2, 4);
            
            // 更新UDP长度 (UDP头8字节 + 数据长度)
            const udpLength = (8 + dataLength).toString(16).padStart(4, '0');
            headers[38] = udpLength.slice(0, 2);
            headers[39] = udpLength.slice(2, 4);
            
            // 更新IP校验和
            const ipChecksum = calculateIPChecksum(headers);
            headers[24] = ipChecksum.slice(0, 2);
            headers[25] = ipChecksum.slice(2, 4);
            
            return headers;
        }

        function convertHex() {
            let input = document.getElementById('inputHex').value;
            let bytes = processHexInput(input);
            
            if (document.getElementById('addHeaders').checked) {
                let headers = getHeaderTemplate();
                headers = updateHeaders(headers, bytes.length);
                bytes = [...headers, ...bytes];
            }
            
            let output = '';
            for (let i = 0; i < bytes.length; i += 16) {
                const offset = (i).toString(16).padStart(4, '0');
                output += offset + '   ';
                
                const lineBytes = bytes.slice(i, i + 16);
                output += lineBytes.join(' ');
                
                if (lineBytes.length < 16) {
                    output += '   '.repeat(16 - lineBytes.length);
                }
                
                output += '\n';
            }
            
            document.getElementById('outputHex').value = output;
        }

        function createPcapHeader() {
            const buffer = new ArrayBuffer(24);
            const view = new DataView(buffer);
            
            view.setUint32(0, 0xa1b2c3d4, false);
            view.setUint16(4, 2, false);
            view.setUint16(6, 4, false);
            view.setInt32(8, 0, false);
            view.setUint32(12, 0, false);
            view.setUint32(16, 65535, false);
            view.setUint32(20, 1, false);
            
            return new Uint8Array(buffer);
        }

        function createPacketHeader(length) {
            const buffer = new ArrayBuffer(16);
            const view = new DataView(buffer);
            const now = Math.floor(Date.now() / 1000);
            
            view.setUint32(0, now, false);
            view.setUint32(4, 0, false);
            view.setUint32(8, length, false);
            view.setUint32(12, length, false);
            
            return new Uint8Array(buffer);
        }

        function showExportDialog() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            
            const defaultFilename = `packet-${year}-${month}-${day}-${hours}-${minutes}.pcap`;
            document.getElementById('filename').value = defaultFilename;
            document.getElementById('exportDialog').style.display = 'block';
        }

        function closeExportDialog() {
            document.getElementById('exportDialog').style.display = 'none';
        }

        function confirmExport() {
            let filename = document.getElementById('filename').value.trim();
            if (!filename.endsWith('.pcap')) {
                filename += '.pcap';
            }
            exportPcap(filename);
            closeExportDialog();
        }

        function exportPcap(filename) {
            let input = document.getElementById('inputHex').value;
            let hexBytes = processHexInput(input);
            
            if (document.getElementById('addHeaders').checked) {
                let headers = getHeaderTemplate();
                headers = updateHeaders(headers, hexBytes.length);
                hexBytes = [...headers, ...hexBytes];
            }
            
            const packetData = new Uint8Array(hexBytes.map(hex => parseInt(hex, 16)));
            const pcapHeader = createPcapHeader();
            const packetHeader = createPacketHeader(packetData.length);
            
            const finalBuffer = new Uint8Array([
                ...pcapHeader,
                ...packetHeader,
                ...packetData
            ]);
            
            const blob = new Blob([finalBuffer], { type: 'application/octet-stream' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        window.onload = function() {
            document.getElementById('inputHex').value = '';
        }
    </script>
</body>
</html>