关联分析-攻击链路展示

最新推荐文章于 2026-07-07 16:48:51 发布
原创 最新推荐文章于 2026-07-07 16:48:51 发布 · 729 阅读 · 21

业务逻辑:根据左侧的攻击链路展示对应的场景溯源报告,切换链路展示对应的链路拓扑视图;视图中的节点与溯源以及所处的攻击阶段相关联,切换不同的攻击阶段,对应的告警溯源流会发生变化

界面展示效果

界面实现

<template>
  <div class="attack-chain-page">
    <!-- 左侧：攻击链列表 -->
    <div class="left-sidebar">
      <div class="sidebar-header">
        <span class="sidebar-title">攻击链列表 ({
  
  { chainTotal }})</span>
        <div class="filter-tools">
          <el-icon class="icon-btn"><Search /></el-icon>
          <el-popover
            placement="bottom"
            :width="320"
            trigger="click"
            v-model:visible="filterVisible"
            @show="resetNewFilterForm"
          >
            <template #reference>
              <el-button link type="primary" size="small">筛选</el-button>
            </template>
            <el-form
              :model="filterForm"
              label-position="top"
              size="small"
              ref="newFilterFormRef"
            >
              <el-form-item label="时间范围">
                <el-date-picker
                  v-model="dateRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :teleported="false"
                  :shortcuts="timeShortcuts"
                />
              </el-form-item>
              <el-form-item label="页数选择">
                <el-select
                  v-model="filterForm.pageSize"
                  placeholder="请选择"
                  style="width: 100%"
                  :teleported="false"
                >
                  <el-option label="10条/页" :value="10" />
                  <el-option label="20条/页" :value="20" />
                  <el-option label="50条/页" :value="50" />
                </el-select>
              </el-form-item>
              <el-form-item label="攻击方向">
                <el-select
                  v-model="filterForm.direction"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                  :teleported="false"
                >
                  <el-option label="全部" value="" />
                  <el-option label="外网 → 内网" value="1" />
                  <el-option label="内网 → 外网" value="2" />
                  <el-option label="内网横向" value="3" />
                </el-select>
              </el-form-item>
            </el-form>
            <div class="popover-footer" style="float: right">
              <el-button size="small" @click="resetForm">重置</el-button>
              <el-button size="small" type="primary" @click="blurPopover"
                >确定</el-button
              >
            </div>
          </el-popover>
        </div>
      </div>

      <div class="filter-tags" v-if="selectedFilters.length">
        <el-tag
          v-for="item in selectedFilters"
          :key="item.id"
          size="small"
          closable
          @close.stop="removeSelectedFilter(item.id)"
        >
          {
  
  { item.tagText || item.label }}
        </el-tag>
      </div>

      <div class="filter-panel" v-if="showFilterPanel">
        <!-- <el-button
          type="primary"
          class="new-filter-btn"
          @click.stop="openNewFilterDialog"
          >+ 新建过滤器</el-button
        >

        <div class="filter-section">
          <div class="section-title">快捷预设</div>
          <div
            v-for="item in quickFilters"
            :key="item.id"
            class="filter-item"
            :class="{ active: isFilterSelected(item.id) }"
            @click="selectFilter(item)"
          >
            <span class="label">{
  
  { item.label }}</span>
            <span class="extra" v-if="item.extra">{
  
  { item.extra }}</span>
            <span class="dot" v-if="item.showDot"></span>
          </div>
        </div>

        <div class="filter-section">
          <div class="section-title">业务维度</div>
          <div
            v-for="item in businessFilters"
            :key="item.id"
            class="filter-item"
            :class="{ active: isFilterSelected(item.id) }"
            @click="selectFilter(item)"
          >
            <span class="label">{
  
  { item.label }}</span>
            <span class="en" v-if="item.enText">{
  
  { item.enText }}</span>
          </div>
        </div>

        <div class="filter-section">
          <div class="section-title">我的过滤器</div>
          <div v-if="!customFilters.length" class="empty-custom-filter">
            暂无自定义过滤器
          </div>
          <div v-else>
            <div
              v-for="item in customFilters"
              :key="item.id"
              class="filter-item"
              :class="{ active: isFilterSelected(item.id) }"
              @click="selectFilter(item)"
            >
              <span class="label">{
  
  { item.label }}</span>
            </div>
          </div>
        </div> -->
      </div>

      <div class="chain-list" @scroll="handleChainListScroll">
        <div v-if="chainList.length">
          <div
            class="chain-card"
            v-for="(item, idx) in chainList"
            :key="idx"
            @click="handleChainClick(item)"
            :class="{ active: activeChainIndex === idx }"
          >
            <div class="card-header">
              <span class="chain-time">{
  
  { item.createTime }}</span>
            </div>
            <div class="chain-name">{
  
  { item.chainName }}</div>
            <div class="card-tags">
              <el-tag
                size="small"
                :class="'tag-' + getAlertLevelClass(item.alertLevel)"
                >{
  
  { item.alertLevel }}</el-tag
              >
              <span class="alert-count">告警: {
  
  { item.alertCount }}</span>
            </div>
          </div>
        </div>
        <div v-else><el-empty description="暂无数据" /></div>
      </div>
    </div>

    <!-- 中间：拓扑分析区 -->
    <div class="center-panel">
      <!-- 顶部：场景描述与进度 -->
      <div class="panel-header">
        <div class="scene-info">
          <div class="scene-title">
            <span class="title-bar">|</span> 攻击场景溯源分析报告
          </div>
          <div class="scene-desc">
            <span class="label">场景描述：</span>
            {
  
  {
              currentChain && currentChain.attackDescription
                ? currentChain.attackDescription
                : "_"
            }}
          </div>
          <div class="scene-meta">
            <span
              >持续时间：<span class="chainValue">{
  
  {
                currentChain &&
                currentChain.timeline &&
                currentChain.timeline.durationSeconds
                  ? formatDuration(currentChain.timeline.durationSeconds)
                  : "_"
              }}</span></span
            >
            <span
              >受影响资产：<span class="chainValue"
                >{
  
  {
                  currentChain && currentChain.assetList
                    ? currentChain.assetList.length
                    : ""
                }}台<span
                  style="margin: 0 2px"
                  v-if="
                    currentChain &&
                    currentChain.assetList &&
                    currentChain.assetList.length
                  "
                  >({
  
  {
                    currentChain && currentChain.assetList
                      ? currentChain.assetList.join(",")
                      : "_"
                  }})</span
                ></span
              >
            </span>
            <span
              >攻击阶段：<span class="chainValue"
                >{
  
  {
                  currentChain && currentChain.attackPhaseList
                    ? currentChain.attackPhaseList.length
                    : "_"
                }}个阶段</span
              ></span
            >
            <span
              >危害等级：
              <el-tag
                size="small"
                :class="'tag-' + getAlertLevelClass(currentChain.riskLevel)"
                >{
  
  {
                  currentChain && currentChain.riskLevel
                    ? currentChain.riskLevel
                    : "_"
                }}</el-tag
              >
              <!-- <span class="danger-text">{
  
  {
                currentChain && currentChain.riskLevel
                  ? currentChain.riskLevel
                  : "_"
              }}</span> -->
            </span>
          </div>
        </div>

        <div class="stage-progress">
          <div class="stage-track">
            <!-- 'is-disabled': !(
                  currentChain &&
                  currentChain.attackPhaseList &&
                  currentChain.attackPhaseList.includes(stage.value)
                ), -->
            <!-- 'has-data':
                  currentChain &&
                  currentChain.attackPhaseList &&
                  currentChain.attackPhaseList.includes(stage.value), -->
            <div
              class="stage-item"
              v-for="(stage, index) in stages"
              :key="index"
              :class="['has-data', currentStage === index ? 'is-selected' : '']"
              @click="handleStageClick(index, stage.value)"
            >
              <div class="stage-content-box">
                <div class="stage-dot"></div>
                <div class="stage-name">{
  
  { stage.name }}</div>
              </div>
              <div class="stage-line" v-if="index < stages.length - 1"></div>
            </div>
          </div>
        </div>

        <div class="view-tabs">
          <div
            class="tab-item"
            :class="{ active: currentTab === 'topology' }"
            @click="currentTab = 'topology'"
          >
            <el-icon class="tab-icon"><Connection /></el-icon>
            攻击链路拓扑视图
          </div>
          <div
            class="tab-item"
            :class="{ active: currentTab === 'mitre' }"
            @click="currentTab = 'mitre'"
          >
            <el-icon class="tab-icon"><Grid /></el-icon>
            MITRE ATT&CK 矩阵
          </div>
        </div>
      </div>

      <!-- 拓扑图区域 -->
      <div class="panel-body" v-if="currentTab === 'topology'">
        <div class="graph-area">
          <div
            class="graph-viewport"
            ref="graphViewport"
            @mousedown="startDrag"
            @mousemove="onDrag"
            @mouseup="endDrag"
            @mouseleave="endDrag"
            @wheel.prevent="onWheel"
          >
            <div class="graph-content" :style="graphContentStyle">
              <svg
                class="graph-svg"
                :width="canvas.width"
                :height="canvas.height"
              >
                <!-- 箭头区域 -->
                <defs>
                  <!-- <marker
                    id="arrow"
                    markerWidth="10"
                    markerHeight="10"
                    refX="18"
                    refY="3"
                    orient="auto"
                    markerUnits="strokeWidth"
                  >
                    <path d="M0,0 L0,6 L9,3 z" fill="#c0c4cc" />
                  </marker> -->
                  <!-- <marker
                    id="arrow-blue"
                    markerWidth="10"
                    markerHeight="10"
                    refX="18"
                    refY="3"
                    orient="auto"
                    markerUnits="strokeWidth"
                  >
                    <path d="M0,0 L0,6 L9,3 z" fill="#409eff" />
                  </marker> -->
                  <!-- 红色箭头 (Critical) -->
                  <!-- <marker
                    id="arrow-critical"
                    markerWidth="10"
                    markerHeight="10"
                    refX="18"
                    refY="3"
                    orient="auto"
                    markerUnits="strokeWidth"
                  >
                    <path d="M0,0 L0,6 L9,3 z" fill="#f56c6c" />
                  </marker> -->
                  <!-- 橙色箭头 (High) -->
                  <!-- <marker
                    id="arrow-high"
                    markerWidth="10"
                    markerHeight="10"
                    refX="18"
                    refY="3"
                    orient="auto"
                    markerUnits="strokeWidth"
                  >
                    <path d="M0,0 L0,6 L9,3 z" fill="#e6a23c" />
                  </marker> -->
                  <!-- 动态流光效果的渐变定义 -->
                  <linearGradient
                    id="flowGradient"
                    x1="0%"
                    y1="0%"
                    x2="100%"
                    y2="0%"
                  >
                    <stop offset="0%" stop-color="transparent" />
                    <stop offset="50%" stop-color="#409eff" />
                    <stop offset="100%" stop-color="transparent" />
                  </linearGradient>
                </defs>
                <!-- 连线组 -->
                <g v-for="e in edges" :key="e.id">
                  <!-- 基础线 (半透明同色系背景) -->
                  <path
                    :d="edgePath(e)"
                    fill="none"
                    :stroke="getLineColor(e.level)"
                    stroke-width="1"
                    stroke-dasharray="3,2"
                    stroke-opacity="0.4"
                  />
                  <!-- 动态流动线 -->
                  <path
                    class="flow-line"
                    :d="edgePath(e)"
                    fill="none"
                    :stroke="getLineColor(e.level)"
                    stroke-width="2"
                    stroke-dasharray="5,3"
                    :marker-end="getMarkerId(e.level)"
                  />

                  <!-- 连线上的标签/徽章 -->
                  <!-- <foreignObject
                    :x="getEdgeCenter(e).x - 60"
                    :y="getEdgeCenter(e).y - 15"
                    width="120"
                    height="30"
                  >
                    <div class="edge-label" :class="e.level">
                      {
  
  { e.label }}
                    </div>
                  </foreignObject> -->
                </g>
              </svg>

              <!-- 节点组 -->
              <div class="graph-nodes" v-if="nodes.length">
                <div
                  v-for="n in nodes"
                  :key="n.id"
                  class="g-node"
                  :class="[
                    n.type,
                    {
                      danger: n.danger,
                      warning: n.warning,
                      'is-selected': selectedNodeId === n.id,
                    },
                  ]"
                  :style="{
                    left: n.x + 'px',
                    top: n.y + 'px',
                  }"
                  @click.stop="handleNodeClick(n)"
                >
                  <!-- 涟漪光环 -->
                  <div
                    class="ripple-ring"
                    v-if="n.danger || selectedNodeId === n.id"
                  ></div>

                  <div class="node-icon-wrapper">
                    <img :src="https://blog.csdn.net/getSvgIcon(n.icon)" class="node-icon" />
                  </div>
                  <div class="node-info">
                    <div class="node-name">{
  
  { n.name }}</div>
                    <div class="node-ip" v-if="n.ip">{
  
  { n.ip }}</div>
                  </div>
                  <!-- 节点旁边的告警标签 -->
                  <div class="node-alerts" v-if="n.alerts && n.alerts.length">
                    <div
                      v-for="(alert, ai) in n.expanded
                        ? n.alerts
                        : n.alerts.slice(0, 2)"
                      :key="ai"
                      class="alert-tag"
                      :class="getAlertLevelClass(alert.level)"
                    >
                      {
  
  { alert.text }}
                    </div>
                    <div
                      v-if="n.alerts.length > 2"
                      class="expand-btn"
                      @click.stop="n.expanded = !n.expanded"
                    >
                      {
  
  {
                        n.expanded
                          ? "收起"
                          : "展开 (" + (n.alerts.length - 2) + ")"
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="graph-empty" v-if="!nodes.length">
            <el-empty
标签
#vue.js #elementui #javascript
最低0.47元/天 解锁文章
Botnet趋势典型攻击链
m0_73803866的博客
10-14 678
经过跟踪 分析，今年一季度以来 Mozi 的日均可探索节点已经超过了 10000 个，占据了整个 DHT网络规模的 1% 以上，这表明 Mozi 已发展成为中等规模的僵尸网络，可以对世界范围内的目标尤其是国内的网络节点 发动有威胁的攻击。此外，由于 Mozi 的特殊网络模式，其节点分布离散度极大，与传统僵尸网络集中于网络发达地区的普 遍规律截然不同。7 月，在网络犯罪活动再次抬头的情况下，公安部持续进行“净网行动 ”，再次打击了犯罪活动，DDoS 攻击事件量逐步下降，再次遏制了网络犯罪 活动的抬头倾向。
【网络安全】基于网络攻击链的安全防护思考
HBohan的博客
11-10 4391
网络空间是一个没有硝烟的战场，任何组织和机构在网络空间内都是渺小和脆弱的个体，网络攻击的来源无法确定，发起攻击的时间不可预见，要在这个战场中安稳生存实属不易。所幸的是，网络攻击的手段都是类似的，有规律可循的。 美国最大的军火商洛克希德马丁公司（Lockheed Martin）提出的“网络攻击链”（ Cyber Kill Chain）模型，也被称为“网络杀伤链”模型，其描述了一次完整的网络攻击需要经历七个阶段，如图所示：【点击查看学习资料】 图1:“网络攻击链”模型 侦查目标(Reconnaissance
Element-Ui组件（icon组件）
qq_65597930的博客
11-24 9681
除了内置图标，还支持自定义图标的引入和使用。引入自定义图标字体或 SVG 文件。在组件中进行注册和使用。例如：首先先画一个图标svg {width: 1em;在main.js中注册图标// 导入自定义图标// 全局注册自定义图标引用import CustomIcon from './path/to/custom-icon.vue' // 导入自定义图标。
大量用户中招，远控木马已经潜伏各类在线会议平台
爱玩游戏的黑客的博客
06-17 1096
攻击者在单个 IP 地址上部署了所有的虚假在线会议软件网站，这些网站都采用俄语并使用与官方网站十分相似的 URL 部署恶意软件。攻击链如下所示：攻击链与执行流程用户访问某个虚假网站时，点击下载安卓应用程序会获得恶意 APK 文件，点击下载 Windows 应用程序会获得 BAT 文件。通过 BAT 文件，最终投递的还是远控木马。
网络安全-攻防链、画像、溯源、指纹等详细原理、过程图和架构及案例
hao_wujing的专栏
07-16 1338
！网络安全中的攻防链、攻击者画像、溯源技术及指纹技术构成了现代防御体系的核心支柱。
SecGPT-14B效果展示：多轮攻防推理中准确还原APT攻击链路图
weixin_36064575的博客
04-10 1052
本文介绍了如何在星图GPU平台上自动化部署SecGPT-14B镜像，实现网络安全智能分析功能。该开源大语言模型专为安全领域设计，能够准确还原APT攻击链路图，帮助安全团队快速识别攻击阶段、关联安全事件并提供专业修复建议，大幅提升安全运营效率。
匿名通信攻击技术：主动攻击、被动攻击、单端攻击、端到端攻击
学习中
03-18 5763
匿名通信攻击技术 匿名通信攻击可以分为 针对网络流量的攻击：通常基于流量分析技术，即通过嗅探并分析网络通信流量的各自模式，以获取现有价值； 针对节点的攻击：主要是匿名通信节点系统和协议存在漏洞的利用。 网络流量攻击 被动攻击和主动攻击：根据攻击者对通信行为的干涉程度进行划分。攻击者可以被动监听或主动操纵目标流量。 单端攻击和端到端攻击：根据威胁模型的不同进行划分，攻击者通过监控或控制发送方或...
人工智能赋能下的全链路网络钓鱼攻击防御体系构建研究
中国互联网络信息中心（CNNIC）：聚焦反网络钓鱼、域名系统与下一代互联网、RPKI三大方向，分享网络安全、Web3、IPv6及区块链领域的技术研究与国际动态。
03-16 383
本文特别引用反网络钓鱼技术专家芦笛的观点，强调了在攻击链各环节嵌入AI能力的必要性，并结合具体的技术实现逻辑与代码示例，阐述了如何建立具备韧性的主动防御机制，以应对日益复杂的网络安全挑战。反网络钓鱼技术专家芦笛强调，这种由AI赋能的内容生成能力，使得钓鱼攻击的“信噪比”发生了逆转：恶意内容的质量首次全面超越了普通用户的日常辨别能力，导致单纯依靠人工审核或基础培训已无法有效应对。这种趋势导致了攻击规模的指数级增长，防御者面临的不再是零星的试探，而是如潮水般涌来的、不断变异的攻击波次。
API伪造攻击 VS 网络攻击
T_iAn_T的博客
03-29 1060
API伪造攻击 VS 网络攻击
攻击链是怎么做出来的，以及攻击链可视化都包含些什么
xixixi7777的博客
09-30 1428
它让无形的网络攻击变得有形、可追溯、可理解，是提升安全团队响应能力和安全态势的至关重要的一环。
无文件攻击，如何被EDR在1分钟内自动检出？
haohaoqiao的博客
02-15 646
绕过杀软的无文件攻击，EDR如何破？
el-icon 最新使用指南 SVG Icon @element-plus/icons-vue vue3 统一导入及注册el-icon组件 在各带图标组件中使用 component组件动态加载图标
热门推荐
Alloom的博客
08-05 4万+
2021.8.5 Element Plus 团队表示正在将原有组件内的 Font Icon 向 SVG Icon 迁移，正式版本Font Icon将被弃用，于是目标是对代码进行对应的更新，Font Icon换成SVG Icon。 文档：组件 | Element (element-plus.org) 注意：当前图标只适用于vue3。 首先更新 element-plus版本，指定安装@1.0.2-beta.69（2021.8.5时的最新版...
攻击链简述(一)：APT的攻击阶段
甘焕的博客
09-06 2万+
如今，持续进化的网络威胁环境带来了更复杂攻击场景，除了商业化的攻击行为，以前所欠缺的攻击技术现在也发展得更加普遍。除此之外，为了达到专业化的战术目标并在企业内部创建一个持续的攻击据点，黑客的攻击行为也不再仅仅是普遍的破坏行为（如之前爆发的蠕虫风暴），而是采用了多目标、多阶段、更低调的攻击方式。      基于防御思维的攻击链将一次攻击划分为7个阶段，可以快速地帮助我们理解最新的攻击场景一级如何有效地
基于攻击链的威胁感知系统
小熊猫丢丢的博客
10-27 2007
阅读： 198 随着网络威胁形式的多样化和复杂化以及面临APT攻击的挑战，新一代威胁不仅传播速度更快，其利用的攻击面也越来越宽广，可以覆盖移动、桌面、网络、web和各种应用、社交网络等，新常态下仅仅依靠传统NIPS/NIDS设备提供给用户的信息已经不能满足现阶段客户的需要，专业化、系统化、智能化等越来越显得尤为关键；尤其是伴随着互联网的发展，用户体验需求的提升，更需要对网络威胁的行为通过大数
Vue 组件通信核心知识点梳理
最新发布
HUMHSX的专栏
07-07 52
单文件组件是 Vue 工程化项目的标准开发方式，后缀为.vue将一个组件的结构、逻辑、样式三合一封装在同一个文件中。<template>：书写页面 HTML 结构：书写组件 JS 业务逻辑、数据、方法、导入依赖：书写当前组件专属样式（scoped 实现样式隔离）子组件通过声明自定义事件，调用emit触发事件并携带参数；父组件监听对应事件，接收子组件数据。复用、拆分、隔离、易维护、高性能单文件组件：.vue 文件，结构、逻辑、样式三位一体。
Vue 从零配置与完整使用教程（零基础保姆级）
zhangminghuan的博客
07-02 178
<div class="hello"> <h3>{{ title }}</h3> <p>Vue3 工程化组件使用成功！</p> </div> // Vue3 主流语法：setup 语法糖 const title = '欢迎使用 Vue3 + Vite' .hello { padding: 20px;}
Vue 3 避坑指南：从入门到精通的实战经验总结
唯见青山不见君
07-06 223
Vue3使用指南及常见问题解析 摘要：本文总结了Vue3开发中的常见问题与解决方案，重点包括：1）响应式系统的正确使用，如避免解构导致的响应性丢失；2）CompositionAPI的注意事项，包括.value的正确使用和生命周期钩子的调用位置；3）<script setup>语法糖的特殊规则；4）VueRouter4和Pinia的最佳实践；5）性能优化技巧；6）TypeScript集成要点。文章提供了大量实用代码示例，帮助开发者规避常见错误，提高开发效率。从基础响应式操作到高级类型定义，涵盖了V
python 打包桌面应用的项目实例（基于 Python + Node.js + Vue.js 的桌面应用程序，使用 pywebview 提供原生桌面体验。）
qq_24745557的博客
07-05 220
基于 Python + Node.js + Vue.js 的桌面应用程序，使用 pywebview 提供原生桌面体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值