当前位置:首页>java>Web前端实现的模拟黑客终端[附完整代码]

Web前端实现的模拟黑客终端[附完整代码]

  • 2026-08-27 10:48:46
Web前端实现的模拟黑客终端[附完整代码]

基于原生的Web技术栈构建的简易的模拟黑客控制终端,不依赖React/Vue/Angular等Web框架,实现出模拟黑客攻击的视觉效果。

编程语言:HTML5/CSS3/JavaScript(ES6+)

采用Canvas API作为图形渲染,实现了黑客帝国中的"代码雨"画面。

网页效果如下: 
核心代码:
1.Canvas实现的黑客帝国风格[代码雨]
// 绘制代码雨functiondrawMatrix() {// 半透明背景创建拖尾效果    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';    ctx.fillRect(0, 0, canvas.width, canvas.height);    ctx.fillStyle = '#0f0';    ctx.font = `${fontSize}px monospace`;for (let i = 0; i < drops.length; i++) {const text = charSet.charAt(Math.floor(Math.random() * charSet.length));const x = i * fontSize;const y = drops[i] * fontSize;        ctx.fillText(text, x, y);// 重置位置当字符到达底部if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {            drops[i] = 0; // 重置雨滴位置        }// 更新雨滴下落位置        drops[i]++;    }// 60fps 平滑动画    requestAnimationFrame(drawMatrix);}
2.打印结构化代码的伪Python解释器
defscan_vulnerabilities(target):"""扫描目标系统的常见漏洞"""    print(f"[SCAN] 开始扫描: {target}")# 模拟端口扫描    open_ports = [22, 80, 443, 3306]    print(f"[INFO] 发现开放端口: {', '.join(map(str, open_ports))}")# 模拟服务识别    services = {80: "Apache 2.4.41",443: "Nginx 1.18.0",3306: "MySQL 8.0.25"    }    print("[INFO] 服务识别完成:")for port, service in services.items():if port in open_ports:            print(f"  - 端口 {port}: {service}")# 检测漏洞    vulnerabilities = []if80in open_ports and"Apache"in services[80]:        vulnerabilities.append("Apache 2.4.41 - CVE-2021-41773 (路径遍历漏洞)")if3306in open_ports:        vulnerabilities.append("MySQL 8.0.25 - 可能存在弱密码配置")if vulnerabilities:        print("[WARNING] 检测到潜在漏洞:")for i, vuln in enumerate(vulnerabilities, 1):            print(f"  {i}. {vuln}")else:        print("[INFO] 未发现已知漏洞")return {"target": target,"open_ports": open_ports,"services": services,"vulnerabilities": vulnerabilities    }
3.响应式Flexbox
.main-content {display: flex;    flex: 1;    gap: 15px;    height: calc(100% - 65px);}/* 左侧代码台 */.code-console-container { width: 300px; } /* 中间主终端(弹性伸缩) */.console-container { flex: 1; }    /* 右侧目标选择器 */.control-panels { width: 300px; }   

完整的HTML网页代码如下: 

<!DOCTYPE html><htmllang="zh-CN"><head>    <metacharset="UTF-8">    <metaname="viewport"content="width=device-width, initial-scale=1.0">    <title>在线黑客攻击模拟器</title>    <style>        * {            margin: 0;            padding: 0;            box-sizing: border-box;            font-family: 'Courier New', monospace;        }        body {            background-color: #000;            color: #0f0;            height: 100vh;            overflow: hidden;            position: relative;        }        #matrixCanvas {            position: absolute;            top: 0;            left: 0;            width: 100%;            height: 100%;            z-index: -1;        }        .terminal-overlay {            position: absolute;            top: 0;            left: 0;            width: 100%;            height: 100%;            background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.8) 100%);            pointer-events: none;            z-index: 1;        }        .container {            max-width: 1200px;            margin: 0 auto;            padding: 15px 20px 20px 20px;            height: 100vh;            display: flex;            flex-direction: column;        }        header {            text-align: center;            margin-bottom: 15px;            padding: 8px 0;            border-bottom: 1px solid #0f0;        }        header h1 {            font-size: 2.3em;            letter-spacing: 3px;            text-shadow: 0 0 10px #0f0;            margin-bottom: 5px;        }        header .subtitle {            font-size: 1.1em;            color: #aaa;            letter-spacing: 1px;        }        .main-content {            display: flex;            flex: 1;            gap: 15px;            height: calc(100% - 65px);        }        /* 新的三列布局 */        .code-console-container {            width: 300px;            display: flex;            flex-direction: column;        }        .console-container {            flex: 1;            background: rgba(0, 0, 0, 0.7);            border: 1px solid #0f0;            border-radius: 5px;            overflow: hidden;            display: flex;            flex-direction: column;        }        .control-panels {            width: 300px;            display: flex;            flex-direction: column;            gap: 15px;        }        .console-header {            background: #111;            padding: 6px 12px;            border-bottom: 1px solid #0f0;            display: flex;            justify-content: space-between;            align-items: center;        }        .console-title {            font-weight: bold;            color: #0f0;            font-size: 1.1em;        }        .console-status {            display: flex;            align-items: center;            gap: 8px;        }        .status-indicator {            width: 8px;            height: 8px;            border-radius: 50%;            background-color: #0f0;        }        .console-body {            flex: 1;            padding: 12px;            overflow-y: auto;            font-size: 13px;            line-height: 1.4;            background-color: rgba(0, 0, 0, 0.5);        }        .console-input {            background: #111;            padding: 8px 12px;            border-top: 1px solid #0f0;            display: flex;        }        .prompt {            color: #0f0;            margin-right: 8px;            font-size: 13px;        }        #commandInput {            flex: 1;            background: transparent;            border: none;            color: #fff;            font-family: 'Courier New', monospace;            font-size: 13px;            outline: none;        }        #commandInput::placeholder {            color: #555;        }        .controls {            width: 300px;            display: flex;            flex-direction: column;            gap: 12px;        }        .control-panel {            background: rgba(0, 0, 0, 0.7);            border: 1px solid #0f0;            border-radius: 5px;            padding: 12px;            flex: 1;            display: flex;            flex-direction: column;        }        .control-panel h2 {            color: #0f0;            margin-bottom: 12px;            font-size: 1.2em;            border-bottom: 1px solid #0f0;            padding-bottom: 4px;        }        .target-selection {            margin-bottom: 12px;            flex: 1;            overflow-y: auto;        }        .target-list {            display: grid;            grid-template-columns: 1fr;            gap: 6px;        }        .target-item {            background: #111;            padding: 6px;            border-radius: 3px;            cursor: pointer;            transition: all 0.2s;            font-size: 12px;        }        .target-item:hover {            background: #222;            border-left: 3px solid #0f0;        }        .target-item.selected {            background: #001a00;            border-left: 3px solid #0f0;        }        .progress-container {            margin-bottom: 12px;        }        .progress-label {            display: flex;            justify-content: space-between;            margin-bottom: 4px;            font-size: 12px;        }        .progress-bar {            height: 10px;            background: #111;            border-radius: 5px;            overflow: hidden;        }        .progress-fill {            height: 100%;            background: linear-gradient(90deg, #0f0, #00ff00aa);            width: 0%;            border-radius: 5px;            transition: width 0.5s ease;        }        .attack-buttons {            display: grid;            grid-template-columns: 1fr 1fr;            gap: 8px;        }        button {            background: #111;            color: #0f0;            border: 1px solid #0f0;            padding: 6px;            border-radius: 3px;            cursor: pointer;            font-family: 'Courier New', monospace;            font-size: 12px;            font-weight: bold;            transition: all 0.2s;        }        button:hover {            background: #001a00;            box-shadow: 0 0 8px #0f0;        }        button:active {            transform: scale(0.98);        }        button.attack-btn {            background: #002200;            border-color: #00ff00;        }        button.attack-btn:hover {            background: #003300;        }        .log-entry {            margin-bottom: 6px;            opacity: 0;            transform: translateY(10px);            transition: opacity 0.3s, transform 0.3s;        }        .log-entry.show {            opacity: 1;            transform: translateY(0);        }        .log-info {            color: #0f0;        }        .log-success {            color: #0f0;            font-weight: bold;        }        .log-warning {            color: #ff9900;        }        .log-error {            color: #ff0000;        }        .log-system {            color: #666;        }        .scan-result {            margin-top: 8px;            padding: 8px;            background: rgba(0, 50, 0, 0.3);            border-left: 2px solid #0f0;            border-radius: 0 4px 4px 0;            font-size: 12px;        }        .hidden {            display: none;        }        .footer {            text-align: center;            padding: 12px 0;            font-size: 0.85em;            color: #555;            border-top: 1px solid #111;            margin-top: 15px;        }        .matrix-glow {            position: fixed;            top: 0;            left: 0;            width: 100%;            height: 100%;            pointer-events: none;            background: radial-gradient(circle at center, rgba(0, 255, 0, 0.05) 0%, transparent 70%);            z-index: 0;        }        /* 代码控制台样式 - 优化滚动体验 */        .code-console {            background: #000;            border: 1px solid #0f0;            border-radius: 5px;            overflow: hidden;            flex: 1;            display: flex;            flex-direction: column;        }        .code-header {            background: #111;            padding: 6px 12px;            border-bottom: 1px solid #0f0;            display: flex;            justify-content: space-between;            align-items: center;        }        .code-actions {            display: flex;            gap: 8px;        }        .code-body {            flex: 1;            padding: 8px;            overflow-y: auto; /* 允许垂直滚动 */            background: #000;            font-family: 'Courier New', monospace;            font-size: 13px;            line-height: 1.4;            white-space: pre-wrap;            word-break: break-all;            max-height: 200px; /* 限制最大高度,确保滚动条出现 */            scroll-behavior: smooth; /* 平滑滚动 */        }        /* 自定义滚动条样式 */        .code-body::-webkit-scrollbar {            width: 8px;        }        .code-body::-webkit-scrollbar-track {            background: #000;        }        .code-body::-webkit-scrollbar-thumb {            background: #0f0;            border-radius: 4px;        }        .code-body::-webkit-scrollbar-thumb:hover {            background: #00ff00;        }        .code-input {            background: #111;            padding: 8px 12px;            border-top: 1px solid #0f0;            display: flex;            flex-direction: column;        }        .code-prompt {            display: flex;            align-items: center;            margin-bottom: 4px;        }        .code-prompt-label {            color: #0f0;            margin-right: 8px;        }        .code-editor {            width: 100%;            min-height: 70px;            background: #000;            color: #0f0;            border: 1px solid #0f0;            border-radius: 3px;            padding: 6px;            resize: vertical;            font-family: 'Courier New', monospace;            font-size: 13px;            outline: none;            overflow: auto;            scroll-behavior: smooth;        }        .token.keyword { color: #ff0; }        .token.string { color: #0f0; }        .token.number { color: #0ff; }        .token.comment { color: #555; }        .token.function { color: #f0f; }        .token.operator { color: #ff0; }        .token.variable { color: #0af; }        .token.output { color: #0f0; margin-top: 4px; }        .token.error { color: #f00; }        .token.info { color: #666; }        /* 滚动打印效果 */        .typewriter {            border-right: 1px solid #0f0;            white-space: nowrap;            overflow: hidden;            animation: blink-caret 0.75s step-end infinite;        }        @keyframes blink-caret {            from, to { border-color: transparent; }            50% { border-color: #0f0; }        }    </style></head><body>    <canvasid="matrixCanvas"></canvas>    <divclass="terminal-overlay"></div>    <divclass="matrix-glow"></div>    <divclass="container">        <header>            <h1>HACKER SIMULATOR</h1>            <divclass="subtitle">高级网络安全渗透测试模拟系统 v2.2.0</div>        </header>        <divclass="main-content">            <!-- 左侧:代码执行控制台 -->            <divclass="code-console-container">                <divclass="control-panel">                    <h2>代码执行控制台</h2>                    <divclass="code-console">                        <divclass="code-header">                            <divclass="console-title">PYTHON EXECUTION</div>                            <divclass="code-actions">                                <buttonid="runCodeBtn">执行</button>                                <buttonid="clearCodeBtn">清空</button>                            </div>                        </div>                        <divclass="code-body"id="codeOutput">                            <divclass="log-entry log-system show">[PYTHON] Python 3.9.5 环境已加载</div>                            <divclass="log-entry log-system show">[PYTHON] 输入Python代码并点击"执行"运行</div>                        </div>                        <divclass="code-input">                            <divclass="code-prompt">                                <divclass="code-prompt-label">>>> </div>                            </div>                            <divclass="code-editor"id="codeEditor"contenteditable="true"spellcheck="false">import requestsfrom bs4 import BeautifulSoup# 漏洞扫描器def scan_vulnerabilities(target):    """扫描目标系统的常见漏洞"""    print(f"[SCAN] 开始扫描: {target}")    # 模拟端口扫描    open_ports = [22, 80, 443, 3306]    print(f"[INFO] 发现开放端口: {', '.join(map(str, open_ports))}")    # 模拟服务识别    services = {        80: "Apache 2.4.41",        443: "Nginx 1.18.0",        3306: "MySQL 8.0.25"    }    print("[INFO] 服务识别完成:")    for port, service in services.items():        if port in open_ports:            print(f"  - 端口 {port}: {service}")    # 检测漏洞    vulnerabilities = []    if 80 in open_ports and "Apache" in services[80]:        vulnerabilities.append("Apache 2.4.41 - CVE-2021-41773 (路径遍历漏洞)")    if 3306 in open_ports:        vulnerabilities.append("MySQL 8.0.25 - 可能存在弱密码配置")    if vulnerabilities:        print("[WARNING] 检测到潜在漏洞:")        for i, vuln in enumerate(vulnerabilities, 1):            print(f"  {i}. {vuln}")    else:        print("[INFO] 未发现已知漏洞")    return {        "target": target,        "open_ports": open_ports,        "services": services,        "vulnerabilities": vulnerabilities    }# 执行扫描scan_vulnerabilities("192.168.1.101")</div>                        </div>                    </div>                </div>            </div>            <!-- 中间:主控制台 -->            <divclass="console-container">                <divclass="console-header">                    <divclass="console-title">SECURE TERMINAL SESSION</div>                    <divclass="console-status">                        <divclass="status-indicator"id="connectionStatus"></div>                        <spanid="connectionText">已连接</span>                    </div>                </div>                <divclass="console-body"id="consoleOutput">                    <divclass="log-entry log-system show">[SYSTEM] 启动黑客模拟器 v2.2.0...</div>                    <divclass="log-entry log-system show">[SYSTEM] 安全连接已建立,加密通道激活</div>                    <divclass="log-entry log-system show">[SYSTEM] 所有模块加载完成</div>                    <divclass="log-entry log-info show">[INFO] 等待目标选择...</div>                </div>                <divclass="console-input">                    <divclass="prompt">hacker@simulator:~$</div>                    <inputtype="text"id="commandInput"placeholder="输入命令..."autofocus>                </div>            </div>            <!-- 右侧:目标系统和其他控制面板 -->            <divclass="control-panels">                <divclass="control-panel">                    <h2>目标系统</h2>                    <divclass="target-selection">                        <divclass="target-list">                            <divclass="target-item"data-target="server1">服务器 #1 (192.168.1.101)</div>                            <divclass="target-item"data-target="server2">服务器 #2 (192.168.1.102)</div>                            <divclass="target-item"data-target="database">数据库服务器 (10.0.0.5)</div>                            <divclass="target-item"data-target="firewall">防火墙系统 (172.16.0.1)</div>                            <divclass="target-item"data-target="router">核心路由器 (10.10.10.1)</div>                            <divclass="target-item"data-target="admin">管理控制台 (192.168.10.10)</div>                        </div>                    </div>                    <divclass="progress-container">                        <divclass="progress-label">                            <span>攻击进度</span>                            <spanid="progressPercent">0%</span>                        </div>                        <divclass="progress-bar">                            <divclass="progress-fill"id="progressFill"></div>                        </div>                    </div>                    <divclass="attack-buttons">                        <buttonid="scanBtn">扫描目标</button>                        <buttonid="attackBtn"class="attack-btn"disabled>执行攻击</button>                    </div>                </div>                <divclass="control-panel">                    <h2>攻击模块</h2>                    <divclass="module-list">                        <divclass="module-item">                            <divclass="module-name">SQL注入模块</div>                            <divclass="module-status">就绪</div>                        </div>                        <divclass="module-item">                            <divclass="module-name">端口扫描器</div>                            <divclass="module-status">就绪</div>                        </div>                        <divclass="module-item">                            <divclass="module-name">密码破解器</div>                            <divclass="module-status">就绪</div>                        </div>                        <divclass="module-item">                            <divclass="module-name">漏洞利用框架</div>                            <divclass="module-status">就绪</div>                        </div>                    </div>                </div>            </div>        </div>        <divclass="footer">            <p>© 2023 黑客模拟器 | 本系统仅用于教育和网络安全培训目的 | 所有活动均在隔离环境中进行</p>        </div>    </div>    <script>        document.addEventListener('DOMContentLoaded', () => {            // 初始化Canvas            const canvas = document.getElementById('matrixCanvas');            const ctx = canvas.getContext('2d');            canvas.width = window.innerWidth;            canvas.height = window.innerHeight;            // 代码雨设置            const fontSize = 14;            let columns = Math.floor(canvas.width / fontSize);            let drops = [];            // 初始化雨滴位置            for (let i = 0; i < columns; i++) {                drops[i] = Math.floor(Math.random() * -canvas.height);            }            // 代码字符集            const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$%&@*+=-_.?/';            // 绘制代码雨            function drawMatrix() {                // 半透明背景创建拖尾效果                ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';                ctx.fillRect(0, 0, canvas.width, canvas.height);                ctx.fillStyle = '#0f0';                ctx.font = `${fontSize}px monospace`;                for (let i = 0; i < drops.length; i++) {                    const text = charSet.charAt(Math.floor(Math.random() * charSet.length));                    const x = i * fontSize;                    const y = drops[i] * fontSize;                    ctx.fillText(text, x, y);                    // 重置位置当字符到达底部                    if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {                        drops[i] = 0; // 重置雨滴位置                    }                    // 更新雨滴下落位置                    drops[i]++;                }                // 60fps 平滑动画                requestAnimationFrame(drawMatrix);            }            // 控制台功能            const consoleOutput = document.getElementById('consoleOutput');            const commandInput = document.getElementById('commandInput');            const scanBtn = document.getElementById('scanBtn');            const attackBtn = document.getElementById('attackBtn');            const progressFill = document.getElementById('progressFill');            const progressPercent = document.getElementById('progressPercent');            const connectionStatus = document.getElementById('connectionStatus');            const connectionText = document.getElementById('connectionText');            // 代码控制台功能            const codeEditor = document.getElementById('codeEditor');            const codeOutput = document.getElementById('codeOutput');            const runCodeBtn = document.getElementById('runCodeBtn');            const clearCodeBtn = document.getElementById('clearCodeBtn');            let selectedTarget = null;            let currentProgress = 0;            let attackInterval = null;            let isAttacking = false;            let isScanning = false;            let isExecutingCode = false;            // 检查是否在底部            function isAtBottom(element) {                return element.scrollHeight - element.scrollTop <= element.clientHeight + 10;            }            // 添加日志条目            function addLog(message, type = 'info', delay = 0) {                const logEntry = document.createElement('div');                logEntry.className = `log-entry log-${type} show`;                logEntry.textContent = message;                setTimeout(() => {                    consoleOutput.appendChild(logEntry);                    // 滚动到底部                    consoleOutput.scrollTop = consoleOutput.scrollHeight;                }, delay);            }            // 逐字符打印效果            function typeWriter(element, text, callback, speed = 30, delay = 0) {                setTimeout(() => {                    element.textContent = '';                    let i = 0;                    function type() {                        if (i < text.length) {                            element.textContent += text.charAt(i);                            i++;                            setTimeout(type, speed);                        } else if (callback) {                            setTimeout(callback, 100);                        }                    }                    type();                }, delay);            }            // 添加代码输出(带打字机效果)            function addCodeOutput(content, type = 'output', speed = 25) {                const outputLine = document.createElement('div');                outputLine.className = `token ${type}`;                // 如果是长内容,使用打字机效果                if (content.length > 30 && speed > 0) {                    outputLine.classList.add('typewriter');                    codeOutput.appendChild(outputLine);                    // 仅在用户处于底部时才滚动到底部                    const shouldScroll = isAtBottom(codeOutput);                    typeWriter(outputLine, content, () => {                        outputLine.classList.remove('typewriter');                        // 如果用户在底部,则滚动到底部                        if (shouldScroll) {                            codeOutput.scrollTop = codeOutput.scrollHeight;                        }                    }, speed);                } else {                    outputLine.textContent = content;                    codeOutput.appendChild(outputLine);                    // 如果用户在底部,则滚动到底部                    if (isAtBottom(codeOutput)) {                        codeOutput.scrollTop = codeOutput.scrollHeight;                    }                }            }            // 语法高亮处理            function highlightCode(code) {                // Python关键字                const keywords = ['and', 'as', 'assert', 'break', 'class', 'continue', 'def', 'del', 'elif', 'else', 'except',                                 'False', 'finally', 'for', 'from', 'global', 'if', 'import', 'in', 'is', 'lambda', 'None',                                 'nonlocal', 'not', 'or', 'pass', 'raise', 'return', 'True', 'try', 'while', 'with', 'yield'];                // 函数名(简单检测)                const functions = ['print', 'len', 'range', 'input', 'int', 'str', 'float', 'list', 'dict', 'set', 'tuple',                                  'scan_vulnerabilities', 'requests', 'BeautifulSoup'];                // 处理字符串                code = code.replace(/("[^"]*"|'[^']*')/g, '<span class="token string">$1</span>');                // 处理注释                code = code.replace(/(#.*)/g, '<span class="token comment">$1</span>');                // 处理数字                code = code.replace(/\b(\d+)\b/g, '<span class="token number">$1</span>');                // 处理操作符                code = code.replace(/([+\-*/=<>!&|^%]+)/g, '<span class="token operator">$1</span>');                // 处理关键字                keywords.forEach(keyword => {                    const regex = new RegExp(`\\b${keyword}\\b`, 'g');                    code = code.replace(regex, `<span class="token keyword">${keyword}</span>`);                });                // 处理函数                functions.forEach(func => {                    const regex = new RegExp(`\\b${func}\\b(?=\\()`, 'g');                    code = code.replace(regex, `<span class="token function">${func}</span>`);                });                return code;            }            // 更新进度条            function updateProgress(percent) {                currentProgress = percent;                progressFill.style.width = `${percent}%`;                progressPercent.textContent = `${percent}%`;                // 如果达到100%,攻击完成                if (percent >= 100 && isAttacking) {                    setTimeout(() => {                        addLog('[SUCCESS] 目标系统已完全控制!', 'success', 300);                        addLog('[INFO] 获取管理员权限成功', 'info', 500);                        addLog('[INFO] 正在提取敏感数据...', 'info', 700);                        setTimeout(() => {                            addLog('[SUCCESS] 数据提取完成!', 'success');                            addLog('[INFO] 连接将在10秒后自动断开', 'info');                            isAttacking = false;                            attackBtn.disabled = true;                            attackBtn.textContent = '执行攻击';                            // 模拟断开连接                            setTimeout(() => {                                addLog('[SYSTEM] 安全断开连接', 'system');                                connectionStatus.style.backgroundColor = '#ff0000';                                connectionText.textContent = '已断开';                                scanBtn.disabled = false;                                selectedTarget = null;                                // 重置目标选择                                document.querySelectorAll('.target-item').forEach(item => {                                    item.classList.remove('selected');                                });                            }, 10000);                        }, 2000);                    }, 500);                }            }            // 模拟攻击过程            function startAttack() {                if (!selectedTarget || isAttacking) return;                isAttacking = true;                attackBtn.textContent = '停止攻击';                addLog(`[INFO] 开始对 ${selectedTarget} 进行渗透测试...`, 'info');                addLog('[INFO] 初始化攻击模块...', 'info');                // 模拟攻击阶段                setTimeout(() => {                    addLog('[INFO] 绕过防火墙防护...', 'info');                    updateProgress(15);                }, 500);                setTimeout(() => {                    addLog('[INFO] 检测到WAF系统,正在绕过...', 'info');                    updateProgress(30);                }, 1500);                setTimeout(() => {                    addLog('[SUCCESS] 成功绕过WAF,建立初步连接', 'success');                    updateProgress(45);                }, 2500);                setTimeout(() => {                    addLog('[INFO] 尝试SQL注入攻击...', 'info');                    updateProgress(60);                }, 3500);                setTimeout(() => {                    addLog('[SUCCESS] SQL注入成功!获取数据库访问权限', 'success');                    updateProgress(75);                }, 4500);                setTimeout(() => {                    addLog('[INFO] 提权尝试中...', 'info');                    updateProgress(85);                }, 5500);                // 进度条动态更新                let progress = 75;                attackInterval = setInterval(() => {                    if (progress >= 100 || !isAttacking) {                        clearInterval(attackInterval);                        return;                    }                    progress += Math.random() * 3;                    updateProgress(Math.min(progress, 100));                }, 300);            }            // 停止攻击            function stopAttack() {                if (!isAttacking) return;                isAttacking = false;                clearInterval(attackInterval);                attackBtn.textContent = '执行攻击';                addLog('[WARNING] 攻击已手动中止', 'warning');                updateProgress(0);            }            // 模拟扫描目标            function scanTarget(target) {                if (isScanning) return;                isScanning = true;                scanBtn.disabled = true;                selectedTarget = target;                addLog(`[INFO] 开始扫描目标: ${target}...`, 'info');                // 模拟扫描过程                setTimeout(() => {                    addLog(`[INFO] 扫描目标: ${target}`, 'info');                    addLog('[INFO] 初始化Nmap扫描...', 'info');                }, 300);                setTimeout(() => {                    addLog('[INFO] 检测开放端口...', 'info');                }, 1000);                setTimeout(() => {                    addLog('[SUCCESS] 发现开放端口: 22, 80, 443, 3306', 'success');                }, 2000);                setTimeout(() => {                    addLog('[INFO] 识别服务版本...', 'info');                }, 3000);                setTimeout(() => {                    addLog('[SUCCESS] 服务识别完成:', 'success');                    addLog('  - SSH 8.2p1 Ubuntu', 'info');                    addLog('  - Apache 2.4.41', 'info');                    addLog('  - MySQL 8.0.25', 'info');                }, 4000);                setTimeout(() => {                    addLog('[INFO] 检测已知漏洞...', 'info');                }, 5000);                setTimeout(() => {                    addLog('[WARNING] 检测到潜在漏洞:', 'warning');                    const scanResult = document.createElement('div');                    scanResult.className = 'scan-result';                    if (target.includes('server')) {                        scanResult.innerHTML = `                            <div class="log-warning">• Apache 2.4.41 - CVE-2021-41773 (路径遍历漏洞)</div>                            <div class="log-warning">• MySQL 8.0.25 - 可能存在弱密码配置</div>                            <div class="log-info">建议使用SQL注入模块进行进一步测试</div>                        `;                    } else if (target.includes('database')) {                        scanResult.innerHTML = `                            <div class="log-warning">• MySQL 8.0.25 - 未启用SSL连接</div>                            <div class="log-warning">• 存在默认账户: admin/password</div>                            <div class="log-info">建议使用密码破解器进行测试</div>                        `;                    } else if (target.includes('firewall')) {                        scanResult.innerHTML = `                            <div class="log-warning">• 防火墙规则可能存在绕过漏洞</div>                            <div class="log-info">建议使用端口扫描器进行详细测试</div>                        `;                    } else {                        scanResult.innerHTML = `                            <div class="log-warning">• 多个已知漏洞可能存在</div>                            <div class="log-info">建议使用漏洞利用框架进行测试</div>                        `;                    }                    consoleOutput.appendChild(scanResult);                    scanResult.classList.add('show');                    consoleOutput.scrollTop = consoleOutput.scrollHeight;                }, 6000);                setTimeout(() => {                    addLog('[SUCCESS] 扫描完成!发现可利用漏洞', 'success');                    attackBtn.disabled = false;                    isScanning = false;                    scanBtn.disabled = false;                }, 7000);            }            // 执行代码            function executeCode() {                if (isExecutingCode) return;                isExecutingCode = true;                const code = codeEditor.textContent;                if (!code.trim()) {                    addCodeOutput('错误: 代码不能为空', 'error', 0);                    isExecutingCode = false;                    return;                }                addCodeOutput('>>> 正在执行代码...', 'info', 0);                // 模拟代码执行过程                setTimeout(() => {                    addCodeOutput('[SCAN] 开始扫描: 192.168.1.101');                }, 300);                setTimeout(() => {                    addCodeOutput('[INFO] 发现开放端口: 22, 80, 443, 3306');                }, 800);                setTimeout(() => {                    addCodeOutput('[INFO] 服务识别完成:');                }, 1300);                setTimeout(() => {                    addCodeOutput('  - 端口 80: Apache 2.4.41');                }, 1600);                setTimeout(() => {                    addCodeOutput('  - 端口 443: Nginx 1.18.0');                }, 1900);                setTimeout(() => {                    addCodeOutput('  - 端口 3306: MySQL 8.0.25');                }, 2200);                setTimeout(() => {                    addCodeOutput('[WARNING] 检测到潜在漏洞:');                }, 2500);                setTimeout(() => {                    addCodeOutput('  1. Apache 2.4.41 - CVE-2021-41773 (路径遍历漏洞)');                }, 2800);                setTimeout(() => {                    addCodeOutput('  2. MySQL 8.0.25 - 可能存在弱密码配置');                }, 3100);                setTimeout(() => {                    addCodeOutput('{');                }, 3400);                setTimeout(() => {                    addCodeOutput('    "target": "192.168.1.101",');                }, 3600);                setTimeout(() => {                    addCodeOutput('    "open_ports": [22, 80, 443, 3306],');                }, 3800);                setTimeout(() => {                    addCodeOutput('    "services": {');                }, 4000);                setTimeout(() => {                    addCodeOutput('        "80": "Apache 2.4.41",');                }, 4200);                setTimeout(() => {                    addCodeOutput('        "443": "Nginx 1.18.0",');                }, 4400);                setTimeout(() => {                    addCodeOutput('        "3306": "MySQL 8.0.25"');                }, 4600);                setTimeout(() => {                    addCodeOutput('    },');                }, 4800);                setTimeout(() => {                    addCodeOutput('    "vulnerabilities": [');                }, 5000);                setTimeout(() => {                    addCodeOutput('        "Apache 2.4.41 - CVE-2021-41773 (路径遍历漏洞)",');                }, 5200);                setTimeout(() => {                    addCodeOutput('        "MySQL 8.0.25 - 可能存在弱密码配置"');                }, 5400);                setTimeout(() => {                    addCodeOutput('    ]');                }, 5600);                setTimeout(() => {                    addCodeOutput('}');                }, 5800);                setTimeout(() => {                    addCodeOutput('>>> 代码执行完成', 'info', 0);                    isExecutingCode = false;                }, 6200);            }            // 事件监听器            // 目标选择            document.querySelectorAll('.target-item').forEach(item => {                item.addEventListener('click', function() {                    if (isScanning || isAttacking) return;                    document.querySelectorAll('.target-item').forEach(i => i.classList.remove('selected'));                    this.classList.add('selected');                    const targetName = this.textContent;                    addLog(`[INFO] 目标已选择: ${targetName}`, 'info');                });            });            // 扫描按钮            scanBtn.addEventListener('click', () => {                const selected = document.querySelector('.target-item.selected');                if (!selected) {                    addLog('[ERROR] 请先选择一个目标系统', 'error');                    return;                }                const targetName = selected.textContent;                scanTarget(targetName);            });            // 攻击按钮            attackBtn.addEventListener('click', () => {                if (isAttacking) {                    stopAttack();                } else {                    startAttack();                }            });            // 代码执行按钮            runCodeBtn.addEventListener('click', executeCode);            // 清空代码控制台            clearCodeBtn.addEventListener('click', () => {                codeOutput.innerHTML = '<div class="log-entry log-system show">[PYTHON] Python 3.9.5 环境已加载</div>' +                                      '<div class="log-entry log-system show">[PYTHON] 输入Python代码并点击"执行"运行</div>';            });            // 命令输入            commandInput.addEventListener('keypress', (e) => {                if (e.key === 'Enter') {                    const command = commandInput.value.trim();                    commandInput.value = '';                    if (command) {                        addLog(`hacker@simulator:~$ ${command}`, 'system');                        // 处理命令                        if (command === 'help') {                            addLog('[INFO] 可用命令:', 'info');                            addLog('  scan - 扫描选定的目标系统', 'info');                            addLog('  attack - 执行攻击', 'info');                            addLog('  clear - 清空控制台', 'info');                            addLog('  help - 显示帮助信息', 'info');                        } else if (command === 'scan') {                            scanBtn.click();                        } else if (command === 'attack') {                            attackBtn.click();                        } else if (command === 'clear') {                            consoleOutput.innerHTML = '';                            addLog('[SYSTEM] 控制台已清空', 'system');                        } else if (command === 'exit') {                            addLog('[SYSTEM] 正在断开连接...', 'system');                            setTimeout(() => {                                addLog('[SYSTEM] 连接已断开', 'system');                                connectionStatus.style.backgroundColor = '#ff0000';                                connectionText.textContent = '已断开';                            }, 500);                        } else if (command.startsWith('connect ')) {                            const target = command.split(' ')[1];                            addLog(`[INFO] 尝试连接到 ${target}...`, 'info');                            setTimeout(() => {                                addLog('[SUCCESS] 连接成功!', 'success');                                connectionStatus.style.backgroundColor = '#0f0';                                connectionText.textContent = '已连接';                                addLog('[INFO] 选择目标系统进行扫描', 'info');                            }, 1000);                        } else if (command === 'status') {                            addLog('[INFO] 系统状态:', 'info');                            addLog(`  目标: ${selectedTarget || '未选择'}`, 'info');                            addLog(`  进度: ${currentProgress}%`, 'info');                            addLog(`  状态: ${isAttacking ? '攻击中' : isScanning ? '扫描中' : '空闲'}`, 'info');                        } else {                            addLog(`[ERROR] 未知命令: ${command}`, 'error');                        }                    }                }            });            // 代码编辑器回车处理            codeEditor.addEventListener('keydown', (e) => {                if (e.key === 'Enter') {                    // 允许默认换行行为                    setTimeout(() => {                        // 自动缩进(如果上一行有缩进)                        const selection = window.getSelection();                        const range = selection.getRangeAt(0);                        const preLine = range.startContainer.textContent.substring(0, range.startOffset);                        const indentMatch = preLine.match(/^(\s*)/);                        if (indentMatch && indentMatch[1]) {                            document.execCommand('insertText', false, indentMatch[1]);                        }                    }, 0);                } else if (e.key === 'Tab') {                    e.preventDefault();                    document.execCommand('insertText', false, '    ');                }            });            // 窗口大小调整处理            window.addEventListener('resize', () => {                canvas.width = window.innerWidth;                canvas.height = window.innerHeight;                columns = Math.floor(canvas.width / fontSize);                drops = [];                for (let i = 0; i < columns; i++) {                    drops[i] = Math.floor(Math.random() * -canvas.height);                }            });            // 开始代码雨动画            drawMatrix();            // 模拟随机系统消息            setInterval(() => {                if (Math.random() > 0.7 && !isAttacking && !isScanning && !isExecutingCode) {                    const messages = [                        '[SYSTEM] 安全监控: 一切正常',                        '[INFO] 空闲等待中...',                        '[SYSTEM] 网络延迟稳定',                        '[INFO] 等待用户指令...',                        '[SYSTEM] 加密隧道保持活动'                    ];                    addLog(messages[Math.floor(Math.random() * messages.length)], 'system');                }            }, 5000);        });    </script></body></html>

最新文章

随机文章