25、工業防火墻 - 工控網絡保護 (模擬) - /安全與維護組件/industrial-firewall-dcs-protection

76個工業組件庫示例匯總

工業防火墻 - 工控網絡保護 (模擬)

概述

這是一個交互式的 Web 組件，旨在模擬工業防火墻在保護關鍵工控網絡（特別是 DCS - 分布式控制系統）免受網絡攻擊（如勒索軟件傳播）方面的核心功能。組件通過可視化簡化的網絡拓撲、模擬網絡流量、應用防火墻規則，并記錄流量日志和安全告警，來演示基本的網絡安全防護概念。

請注意：這是一個高度簡化的前端模擬演示，不執行真實的防火墻策略或網絡數據包分析。所有網絡流量、攻擊模式、規則匹配和阻止行為都是基于預設邏輯和隨機性在瀏覽器端模擬生成的。

主要功能

網絡拓撲可視化 (簡化):
- 展示典型的工業網絡分層結構：IT 網絡、DMZ (隔離區) 和 OT 網絡 (DCS)。
- 清晰標示防火墻在 IT/DMZ 之間和 DMZ/OT 之間的位置。
- 通過簡單的動畫點模擬網絡流量在區域間的流動（綠色表示允許，紅色表示被阻止）。
防火墻規則列表 (概念性):
- 展示一組典型的工業防火墻規則示例，涵蓋允許特定工控協議（S7, Modbus, EtherNet/IP）在 OT 網絡內部或從受信任源（如 DMZ 特定服務器）訪問，以及阻止高風險協議（如 SMB, RDP）跨區域傳輸或拒絕來自 IT 的直接訪問 OT 等。
- 顯示規則的描述和狀態（啟用/禁用，當前均為啟用）。
- 提供規則搜索功能。
實時流量日志:
- 以表格形式實時記錄模擬的網絡流量事件。
- 包含信息：時間戳、源區域/IP (簡化)、目標區域/IP (簡化)、協議/端口、防火墻動作（ALLOW / BLOCK）。
- 允許/阻止的動作以不同顏色高亮顯示。
- 提供按動作（允許/阻止）和區域（IT/DMZ/OT）過濾流量日志的功能。
安全告警日志 (阻止攻擊):
- 當防火墻根據規則阻止了模擬的攻擊流量（如來自 IT 的 SMB 訪問 OT、外部網絡掃描 OT 端口、IT 到 OT 的 RDP 嘗試）時，在此面板生成安全告警。
- 告警信息包含時間戳、檢測到的攻擊類型、源/目標信息以及被觸發的阻止規則（概念性）。
- 提供清除當前告警列表的功能。
防火墻狀態指示:
- 頁眉實時顯示防火墻的整體狀態：ACTIVE (運行中), WARNING (警告，暫未使用), ATTACK BLOCKED (檢測到并阻止攻擊)。
- 當有攻擊被阻止時，狀態變為 ATTACK BLOCKED，并出現一個醒目的紅色告警徽章。
界面風格: 采用蘋果科技工業風格，三欄布局，強調安全、監控和信息的清晰展示，支持響應式設計。

如何使用

打開頁面: 在瀏覽器中打開 index.html。
觀察拓撲與規則: 在左側面板查看簡化的網絡拓撲和防火墻規則列表。
監控實時流量: 在中間面板觀察實時生成的網絡流量日志。注意區分允許 (綠色標識) 和阻止 (紅色標識) 的流量。
過濾流量: 使用流量日志上方的下拉菜單按動作（允許/阻止）或區域進行過濾，以關注特定類型的流量。
識別攻擊與告警:
- 觀察是否有紅色的阻止流量出現在日志中，特別是那些涉及高風險協議（如 SMB）或跨越 IT/OT 邊界的流量。
- 當模擬的攻擊流量被阻止時，右側"安全告警"面板會新增一條告警記錄。
- 同時，頁眉的狀態指示燈會變紅閃爍，文字變為"檢測到并阻止攻擊!"，并出現紅色告警徽章 !。
查看告警詳情: 閱讀右側面板中的告警信息，了解模擬的攻擊類型、來源、目標和阻止原因。
清除告警: 點擊告警面板右上角的"清除告警"按鈕，將清空告警列表，頁眉狀態也會恢復（如果之后沒有新的攻擊被阻止）。
搜索規則: 在規則列表上方的搜索框輸入關鍵字過濾規則描述。

模擬細節

網絡區域與 IP: 定義了 IT, DMZ, OT 三個區域，并為每個區域設定了簡化的代表性 IP 地址或地址段。
協議: 定義了一系列常見 IT 和 OT 協議及其標準端口和概念性風險等級。
防火墻規則: 預設了一組規則，采用自頂向下、首個匹配即生效的簡化邏輯。規則包含源/目標區域、源/目標 IP (支持 ‘any’ 和簡單的地址段匹配)、協議和動作 (allow/block)。包含了一些關鍵的默認阻止規則，如阻止 IT->OT 直接訪問、阻止跨區域 SMB 等。
流量生成: 定時生成"正常"流量，模擬允許的通信模式（如 OT 內部通信、IT 訪問 DMZ、受限的 DMZ 訪問 OT）。
攻擊模擬: 以較低頻率隨機生成幾種典型的攻擊流量：
- 勒索軟件傳播嘗試: IT -> OT 的 SMB 流量。
- 網絡掃描嘗試: 外部 IP -> OT 的未知高位端口流量。
- 未授權訪問嘗試: IT -> OT 的 RDP 流量。
流量處理: 每條生成的流量（無論正常或攻擊）都會經過規則匹配邏輯，確定最終動作 (allow/block)。
告警觸發: 當攻擊類型的流量被規則阻止時，觸發安全告警。
狀態更新: 防火墻全局狀態根據是否有攻擊被阻止來更新。
流量可視化: 通過在網絡拓撲圖上動態添加和移除 CSS 動畫的"點"來模擬流量，點的顏色和動畫路徑/終點根據允許/阻止狀態變化。

文件結構

安全與維護組件/industrial-firewall-dcs-protection/
├── index.html         # 組件的 HTML 結構
├── styles.css         # 組件的 CSS 樣式 
├── script.js          # 組件的 JavaScript 邏輯 (模擬流量, 規則匹配, 攻擊防御)
└── README.md          # 本說明文件

技術棧

HTML5
CSS3 (使用了 CSS 變量, Grid 布局, Flexbox, 動畫, 媒體查詢)
JavaScript (原生 JS, 無外部庫依賴)

效果展示

在這里插入圖片描述

源碼

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>工業防火墻 - 工控網絡保護</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="firewall-container"><header class="main-header"><h1>工業防火墻 - DCS 網絡保護</h1><div class="header-status"><span class="status-indicator" id="firewallStatusIndicator"></span><span id="firewallStatusText">初始化中...</span><span class="attack-blocked-badge is-hidden" id="attackBlockedBadge">!</span></div></header><main class="main-content"><!-- Column 1: Topology & Rules --><section class="topology-rules-panel panel"><div class="topology-section"><h2><i class="icon icon-network"></i> 網絡拓撲與防火墻</h2><div class="network-topology" id="networkTopology"><div class="zone it-zone">IT 網絡</div><div class="zone dmz-zone">DMZ</div><div class="zone ot-zone">OT 網絡 (DCS)</div><div class="firewall-line fw-it-dmz"></div><div class="firewall-icon fw-it-dmz-icon">FW</div><div class="firewall-line fw-dmz-ot"></div><div class="firewall-icon fw-dmz-ot-icon">FW</div><!-- Traffic paths/dots added by JS/CSS --></div></div><div class="rules-section"><h2><i class="icon icon-rules"></i> 防火墻規則 (概念)</h2><div class="panel-toolbar"><input type="search" id="ruleSearch" placeholder="搜索規則..."><span class="rule-count" id="ruleCount">加載中...</span></div><ul id="firewallRuleList" class="rule-list"><li class="placeholder">加載規則中...</li><!-- Rules populated by JS --></ul></div></section><!-- Column 2: Live Traffic Log --><section class="traffic-log-panel panel"><h2><i class="icon icon-traffic"></i> 實時流量日志</h2><div class="panel-toolbar"><select id="trafficFilterAction"><option value="all">所有動作</option><option value="allowed">允許</option><option value="blocked">阻止</option></select><select id="trafficFilterZone"><option value="all">所有區域</option><option value="IT">IT</option><option value="DMZ">DMZ</option><option value="OT">OT</option></select></div><div class="traffic-table-container"><table id="trafficLogTable"><thead><tr><th>時間</th><th>源區域/IP</th><th>目標區域/IP</th><th>協議/端口</th><th>動作</th></tr></thead><tbody id="trafficLogTBody"><tr class="placeholder-row"><td colspan="5">等待流量數據...</td></tr><!-- Traffic logs populated by JS --></tbody></table></div></section><!-- Column 3: Security Alerts Log --><section class="alerts-log-panel panel"><h2><i class="icon icon-shield"></i> 安全告警 (已阻止攻擊)</h2><div class="panel-toolbar"><button class="action-button clear-alerts-btn" id="clearAlertsBtn"><i class="icon icon-clear"></i> 清除告警</button><span class="alert-count" id="alertCount">0 條告警</span></div><ul id="alertLogList" class="alert-log-list"><li class="placeholder">暫無安全告警</li><!-- Alerts populated by JS --></ul></section></main><footer class="main-footer"><p>&copy; 2024 工業防火墻模擬系統. 概念演示.</p></footer></div><script src="script.js"></script>
</body>
</html>

styles.css

:root {--bg-color-light: #f9f9f9;--bg-color-container: #ffffff;--header-bg: #f5f5f7;--panel-bg: #ffffff;--border-color: #d1d1d6; /* Slightly darker border for structure */--border-color-subtle: #e5e5ea;--text-primary: #1d1d1f;--text-secondary: #515154;--text-label: #6e6e73;--accent-blue: #007aff;--accent-green: #34c759;--accent-orange: #ff9500;--accent-red: #ff3b30;--accent-teal: #5ac8fa; /* For network elements */--accent-grey: #8e8e93;--status-active: var(--accent-green);--status-warning: var(--accent-orange);--status-error: var(--accent-red); /* Could be used for FW error */--status-attack-blocked: var(--accent-red);--action-allowed: var(--accent-green);--action-blocked: var(--accent-red);--rule-enabled: var(--accent-green);--rule-disabled: var(--accent-grey);--zone-it-bg: rgba(0, 122, 255, 0.05);--zone-dmz-bg: rgba(255, 149, 0, 0.05);--zone-ot-bg: rgba(52, 199, 89, 0.05);--list-item-hover-bg: #f0f0f0;--table-row-hover-bg: #f5faff;--input-bg: #f0f2f5;--input-border: transparent;--input-focus-border: var(--accent-blue);--placeholder-text: #aaaaaa;--shadow-color: rgba(0, 0, 0, 0.05);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-monospace: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--border-radius: 8px;--border-radius-small: 4px;--transition-speed: 0.2s;
}* {box-sizing: border-box;margin: 0;padding: 0;
}body {font-family: var(--font-family);background-color: var(--bg-color-light);color: var(--text-primary);line-height: 1.4;overflow-x: hidden;
}.firewall-container {max-width: 1800px;margin: 1rem auto;background-color: var(--bg-color-container);border-radius: var(--border-radius);box-shadow: 0 4px 12px var(--shadow-color);overflow: hidden;display: flex;flex-direction: column;height: calc(100vh - 2rem); /* Limit height */min-height: 700px; /* Minimum reasonable height */
}/* Header */
.main-header {background-color: var(--header-bg);padding: 0.75rem 1.5rem;border-bottom: 1px solid var(--border-color);flex-shrink: 0;display: flex;justify-content: space-between;align-items: center;
}.main-header h1 {font-size: 1.3rem;font-weight: 600;color: var(--text-primary);
}.header-status {display: flex;align-items: center;gap: 0.5rem;font-size: 0.9rem;color: var(--text-secondary);
}.status-indicator {width: 12px;height: 12px;border-radius: 50%;background-color: var(--accent-grey); /* Initial */transition: background-color var(--transition-speed);
}.status-indicator.active {background-color: var(--status-active);
}.status-indicator.warning {background-color: var(--status-warning);animation: pulse-orange 1.5s infinite ease-in-out;
}.status-indicator.attack-blocked {background-color: var(--status-attack-blocked);animation: pulse-red 1s infinite ease-in-out;
}.attack-blocked-badge {display: inline-flex;align-items: center;justify-content: center;width: 18px;height: 18px;border-radius: 50%;background-color: var(--status-attack-blocked);color: white;font-size: 0.8rem;font-weight: bold;margin-left: 0.2rem;animation: badge-pop 0.5s ease-out;
}.attack-blocked<