網絡安全態勢可視化

時間 2019-11-05

原文原文鏈接

導語

網絡態勢可視化技術做爲一項新技術，是網絡安全態勢感知與可視化技術的結合，將網絡中蘊涵的態勢情況經過可視化圖形方式展現給用戶，並藉助於人在圖形圖像方面強大的處理能力，實現對網絡異常行爲的分析和檢測。這種方式充分結合了計算機和人腦在圖像處理方面的處理能力的優點，提升了對數據的綜合分析能力，可以有效的下降誤報率和漏報率，提升系統檢測效率，減小反應時間。而且這種可視化方法對於有些顯示有明顯特徵的異常行爲，還具備必定的預測能力。安全態勢可視化系統的目的是生成網絡安全綜合態勢圖，以多視圖、多角度、多尺度的方式與用戶進行交互。
關鍵詞：NetFlow; 實時態勢; 可視化; 多視圖;html

先睹爲快

FireEye

360威脅態勢感知系統

實時Web監控器

大屏展現

大屏解說

第1塊屏業務運營監控node

在雲計算時代，用大數據和機器學習來提高咱們的安全防護等級，已被驗證是最有效的安全方案之一。本塊大屏實時展示了當前雲業務在全球各地的訪問態勢和黑客惡意攻擊態勢，綠色線表明着客戶正常的訪問，紅色線表明着已被防護的黑客的攻擊。能夠看到，黑客攻擊是無處不在，無時不有的，世界互聯網的安全態勢並不如咱們印象中那麼隱蔽和少見。在屏幕最底部，則是實時監控的網絡出入口流量趨勢，表現了業務服務的穩定性，而且，兩趨勢圖兩側，標記了訪問最多的用戶所在地區TOP5，以及黑客攻擊所在地區TOP5。jquery

第2塊屏安全應急響應中心c++

安全感知是安全防護體系的核心，面對超級黑客的隱蔽攻擊和滲透測試，是否可以第一時間識別和發現，是衡量安全體系優劣的根本。該屏幕可實時發現對業務進行滲透的黑客行爲，每當有烏雲的白帽子在挖掘咱們漏洞的時候，該屏幕就會自動識別並告警。並將滲透行爲的每一步都完整的記錄下來，作爲取證的關鍵證據，而且經過態勢感知的溯源系統，定位到黑客的姓名，年齡等我的信息。面對黑客，咱們能夠再也不等着捱打，而進行絕地反擊。web

第3塊屏安全感知體系數據庫

「安全應急響應中心」是每一個企業的特種部隊，他們在瞬息萬變的互聯網環境下，時刻準備着面臨各類應急事件。本快屏幕集中展現了互聯網最新曝光的重大漏洞疫情，以及先知，烏雲等衆測平臺曝光的企業高危漏洞情報。而且對當下最緊急的漏洞進行評估，實時感知咱們的業務是否受重大的漏洞影響，而且能夠經過情報系統看到漏洞對同行業的影響，真正讓安全風險可控。json

第4塊屏安全防護體系大圖瀏覽器

安全防護體系分別從網絡層，主機層，再到應用層的攻防態勢一覽，全面的展現了雲上業務的安全防護體系。從屏中能夠看到，黑客的攻擊流量先通過了網絡層的DDoS清洗，將DDoS攻擊阻擋在門外，接着又再通過應用防火牆把web攻擊阻擋在門外，在經過安全組的訪問控制，數據庫RDS層的數據防火牆等防護措施，將幾乎所有的黑客攻擊阻擋在了門外，最後業務徹底正常，爲數以萬計的互聯網用戶提供着咱們的服務。安全

第5塊屏業務訪客概覽服務器

基於當前1分鐘內的網絡流量數據，咱們分析出最近1分鐘內的在線訪問者人數，以及來訪者中的IP佔比，使用瀏覽器佔比，系統佔比，以及服務器的響應狀態碼。而且羅列出訪問最頻繁的TOP10來訪IP

第6塊屏業務穩定性監控

業務穩定性監控大屏，以每5分鐘一次的頻率，從全國36個省，100多個節點（電信聯通雙線路），對業務的穩定性和網絡訪問性能進行7x24小時監控，重點展現了網站在全國的平均訪問時間和業務可用率，並列出了北上廣深等全國整點省市的響應時間TOP排序，集中體現了業務運行的穩定性和網絡的質量.

第7塊屏網絡層安全態勢

安全縱深防護」是在雲計算背景下最科學和先進的防護體系，是本塊大屏實時展示了雲業務在網絡層的攻防態勢。從屏幕中能夠看到，咱們當前面臨的黑客web攻擊次數，以及web攻擊的類型分佈圖，而且經過大數據分析，咱們能識別出是否有高級黑客在針對咱們業務進行定向式web攻擊，以便竊取咱們的核心數據。同時，最近3個月內的攻擊趨勢咱們也所有記錄了下來，爲未來的取證留下數字證據。在屏幕最下方，則分別實時監控着網絡層的異常鏈接，DDoS攻擊，未受權下載，非法登錄，頁面篡改等重要的安全指標數據。

第8塊屏主機層安全態勢

安全縱深防護」是在雲計算背景下最科學和先進的防護體系，是本塊大屏實時展示了雲業務在主機層的攻防態勢。從屏幕中能夠看到，咱們當前面臨的黑客暴力破解攻擊次數，以及爆破協議的分佈圖，而且經過大數據分析，咱們能識別出是否有高級黑客在針對咱們業務進行定向式爆破破解。同時，最近3個月內爆破攻擊趨勢咱們也所有記錄了下來，爲未來的取證留下數字證據。在屏幕最下方，則分別實時監控着主機上的漏洞，弱口令，後門，爆破成功，肉雞行爲等重要的安全指標數據。

第9塊屏主機鏈接拓撲大屏

經過主機中的數據採集，本塊大屏實時展現了當前網絡內部主機和主機之間的東西向流量拓撲圖，並標明瞭內部網絡流轉態勢，以及端口鏈接行爲，並對異常的網絡鏈接行爲，尤爲是一段時間以來歷來沒有鏈接過的主機，在一個錯誤的時間發生了異常狀態，能夠從大屏中一目瞭然的看見，給運維和安全工程師提供了有效的幫助。

第10塊屏實時安全態勢和安全評分

本塊大屏實時展示了當前業務的安全全景監控，頂部分別展現了雲上業務的安全脆弱點，如漏洞個數，弱口令個數，以及信息泄露狀況和被入侵狀況的監控。同時，右側的安全得分用最直觀的方式表達了當前5分鐘內的安全指數，總分爲100分，據統計，全球企業的安全評分得分64分。同時，本塊大屏還集中展現了最近7天的黑客攻擊趨勢，以及今天一天內的黑客攻擊次數一覽。在屏幕最底部，則顯示了黑客常常攻擊的雲上ECS資產，這意味着該類資產須要提高更強健的防護級別。

基於TWaver SDK的安全態勢模擬

攻擊監控：經過對特定網段、服務創建的攻擊監控體系，可實時檢測出絕大多數攻擊，並採起相應的行動（如斷開網絡鏈接、記錄攻擊過程、跟蹤攻擊源等）。
攻擊模擬、病毒擴散模擬
網絡拓撲：網絡基本拓撲結構有3種：星型、總線型和環型。
應用系統安全： E-mail系統

網絡安全態勢分析

網絡節點態勢，二三維地理空間呈現——系統支持從地理空間分佈維度，對全網主機及關鍵節點的綜合安全信息進行網絡態勢監控。
網絡邏輯架構，二三維拓撲結構呈現——系統支持從邏輯拓撲層級結構維度，從全網的總體安全態勢，到信息資產以及安全數據的檢測，進行全方位態勢監控。
網絡節點信息詳細呈現——系統支持全網各節點的信息查詢，實時反映節點信息的狀態，對節點信息安全進行全面監測。
實時監測，靈活告警——系統提供強大的網絡威脅入侵檢測系統，深刻分析網絡流量信息，對全網各節點進行實時監測，並支持多種圖表的威脅告警方式，讓威脅一目瞭然。還可查看告警威脅事件的詳細信息，同時支持自定義告警策略，設置告警範圍和閥值等策略。
APT高級威脅展現——基於APT攻擊檢測系統，對攻擊來源、攻擊目的、攻擊路徑進行溯源分析，同時根據安全威脅事件的來源信息和目標信息，結合GIS技術將虛擬的網絡威脅和現實世界生動的結合起來，實現網絡安全態勢的可視化。

實驗天地

地圖數據

地圖數據的來源，筆者選擇開源的，如echarts的地圖、D3的地圖數據、或者是開源的地圖數據；

地圖加載

以前文章iChart--地圖顯示人口統計文章涉及到加載地圖的Demo；

示例代碼

<html>
<head>
  <title>Test Load EChart Map</title>
  <meta charset='UTF-8'>
  <script src="./libs/twaver.js"></script>
  <script src="./libs/jquery.js"></script>
  <script>
    function init () {
      box = new twaver.ElementBox();
      network = new twaver.vector.Network(box);
      // network.setDebug(true);
      document.body.appendChild(network.getView());
      function findDimensions() {
        if (window.innerWidth)
          winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
          winWidth = document.body.clientWidth;
        if (window.innerHeight)
          winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
          winHeight = document.body.clientHeight;
        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
          winHeight = document.documentElement.clientHeight;
          winWidth = document.documentElement.clientWidth;
        }
      }
      findDimensions();
      network.adjustBounds({x: 0, y: 0, width: winWidth, height: winHeight});
      window.onresize = function (e) {
        findDimensions();
        network.adjustBounds({x: 0, y: 0, width: winWidth, height: winHeight});
      };
      box.setStyle('background.type', 'vector')
      .setStyle("background.vector.fill",true)
      .setStyle('background.vector.scope','viewport')
      .setStyle('background.vector.fill.color', 'rgba(3,11,25,1)');

      var countryLayer = new twaver.Layer('country');
      var provinceLayer = new twaver.Layer('province');
      var cityLayer = new twaver.Layer('city');

      var layerBox = box.getLayerBox();
      layerBox.add(countryLayer);
      layerBox.add(provinceLayer);
      layerBox.add(cityLayer);
      network.setMinZoom(0.00000001);

      network.getView().addEventListener('dblclick', function(e){
        var point;
        if (e.target) {
          point = network.getLogicalPoint2(e);
        } else if(e.event) {
          if(e.event.target) {
           point = network.getLogicalPoint2(e.event);
         }
       }
     }); 

      $.getJSON('resource/world.json', function(json, textStatus) {
        json = decode(json);
        loadData(json, countryLayer.getId());
        _twaver.callLater(function(){
          network.zoomOverview();
        })
      });
    }

    function loadData (json, layer) {
      json.features.forEach(function (feature) {
        var node = new twaver.ShapeNode(feature.id);
        node.setLayerId(layer);
        node.setStyle('vector.fill', false)
          .setStyle('vector.fill.color', 'rgba(3,11,25,0.8)')//474753
          .setStyle('vector.outline.color', 'rgba(58,86,101,1)')//9ab0e6
          .setStyle('select.color', 'green')//FFFFFF
          .setStyle('vector.outline.width', 20);
          node.s('vector.gradient','radial.southeast').
          s('vector.gradient.color','rgba(4,14,25,0.8)');
          if(feature.properties.name.toLowerCase() === 'china'){
            node.setStyle('vector.outline.color', '#e2001f');
            node.setStyle('vector.outline.width', 100);
          }
          node.setToolTip(feature.properties.name);
          var segments = new twaver.List();
          var points = new twaver.List();

          if (feature.geometry.type === 'MultiPolygon') {
            feature.geometry.coordinates.forEach(function (polygon) {
              polygon.forEach(function (coordinate) {
                segments.add('moveto');
                coordinate.forEach(function (point, i) {
                  if (i !== 0) {
                    segments.add('lineto');
                  }
                  points.add(convertPoint(point));
                });
              });
            });
          } else if (feature.geometry.type === 'Polygon') {
            feature.geometry.coordinates.forEach(function (coordinate) {
              segments.add('moveto');
              coordinate.forEach(function (point, i) {
                if (i !== 0) {
                  segments.add('lineto');
                }
                points.add(convertPoint(point));
              });
            });
          } else {
            console.log(feature.geometry.type);
          }

          node.setSegments(segments);
          node.setPoints(points);
          box.add(node);
        });
    }

    function convertPoint (point) {
      return { x: (point[0] - 117) * 100, y: (-point[1] + 31.7) * 100 };
    }

    function decode(json) {
      if (!json.UTF8Encoding) {
        return json;
      }
      var features = json.features;

      for (var f = 0; f < features.length; f++) {
        var feature = features[f];
        var geometry = feature.geometry;
        var coordinates = geometry.coordinates;
        var encodeOffsets = geometry.encodeOffsets;

        for (var c = 0; c < coordinates.length; c++) {
          var coordinate = coordinates[c];

          if (geometry.type === 'Polygon') {
            coordinates[c] = decodePolygon(coordinate,encodeOffsets[c]);
          }
          else if (geometry.type === 'MultiPolygon') {
            for (var c2 = 0; c2 < coordinate.length; c2++) {
              var polygon = coordinate[c2];
              coordinate[c2] = decodePolygon(
                polygon,
                encodeOffsets[c][c2]
                );
            }
          }
        }
      }
      // Has been decoded
      json.UTF8Encoding = false;
      return json;
    }

    function decodePolygon(coordinate, encodeOffsets) {
      var result = [];
      var prevX = encodeOffsets[0];
      var prevY = encodeOffsets[1];

      for (var i = 0; i < coordinate.length; i += 2) {
        var x = coordinate.charCodeAt(i) - 64;
        var y = coordinate.charCodeAt(i + 1) - 64;
            // ZigZag decoding
            x = (x >> 1) ^ (-(x & 1));
            y = (y >> 1) ^ (-(y & 1));
            // Delta deocding
            x += prevX;
            y += prevY;

            prevX = x;
            prevY = y;
            // Dequantize
            result.push([x / 1024, y / 1024]);
          }

          return result;
        }
      </script>
    </head>
    <body onload="init();">
    </body>
</html>

<html>
<head>
  <title>Test Load EChart Map</title>
  <meta charset='UTF-8'>
  <script src="../../lib/twaver.js"></script>
  <script src="./jquery.js"></script>
  <script>
    function init () {
      box = new twaver.ElementBox();
      network = new twaver.vector.Network(box);
      network.setZoom = function (z,point) {
        z = this.checkZoom(z);
        if(this.isAsyncZoomAndViewRect()){
          var old = this._zoomMap[this._currentSubNetwork].zoom;
        }else{
          var old = this._zoom;
        }
        if (z == old) {
          return;
        }
        var size = this.getViewRect();
        point = { x: size.width / 2, y: size.height / 2 };
        var vr = this.viewRect;
        var offsetx = point.x - (point.x + vr.x) * z / old;
        var offsety = point.y - (point.y + vr.y) * z / old;
        // this._zoom = z;
        if(this.isAsyncZoomAndViewRect()){
          this._zoomMap[this._currentSubNetwork].zoom = z;
        }else{
          this._zoom = z;
        }
        this._paintAll = true;
        this.invalidateElementVisibility();
        this.invalidateCanvasSize();
        // this.validateCanvasSize();
        // this.invalidateElementUIs();
        this.zoomManager._invalidateZoom();
        // this.setViewRect(-offsetx, -offsety, this.viewRect.width, this.viewRect.height);
        if(this._asyncZoomAndViewRect){
          this.firePropertyChange("zoom", old, this._zoomMap[this._currentSubNetwork].zoom);    
        }else{
          this.firePropertyChange("zoom", old, this._zoom);
        }
        this.state.zooming = true;  
        var timer = null;
        var self = this;
        if (timer){  
          clearTimeout(timer);  
        }else{
          timer = setTimeout(function() {  
            timer = null;  
            self.state.zooming = false;  
            self.invalidateElementUIs(true);
          }, 100);  
        }
        // this.firePropertyChange("zoom", old, this._zoom);
      };
      network.setZoomManager(new CustomZoomManager(network,true));
      document.body.appendChild(network.getView());
      function findDimensions() {
        if (window.innerWidth)
          winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
          winWidth = document.body.clientWidth;
        if (window.innerHeight)
          winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
          winHeight = document.body.clientHeight;
        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
          winHeight = document.documentElement.clientHeight;
          winWidth = document.documentElement.clientWidth;
        }
      }
      findDimensions();
      network.adjustBounds({x: 0, y: 0, width: winWidth, height: winHeight});
      window.onresize = function (e) {
        findDimensions();
        network.adjustBounds({x: 0, y: 0, width: winWidth, height: winHeight});
      };

      var countryLayer = new twaver.Layer('country');
      var provinceLayer = new twaver.Layer('province');
      var cityLayer = new twaver.Layer('city');

      var layerBox = box.getLayerBox();
      layerBox.add(countryLayer);
      layerBox.add(provinceLayer);
      layerBox.add(cityLayer);
      network.setMinZoom(0.00000001);

      $.getJSON('./china.json', function(json, textStatus) {
        loadData(json, provinceLayer.getId(),'china');
        _twaver.callLater(function(){
          network.zoomOverview();
        });
      });
    }
    function loadData (json, layer,type) {
      json.features.forEach(function (feature) {
        var node = new twaver.ShapeNode(feature.id);
        node.setLayerId(layer);
        type && node.setClient('type', type);
        node.setStyle('vector.fill', true)
          .setStyle('vector.fill.color', 'rgba(3,11,25,0)')//474753
          .setStyle('vector.outline.color', 'rgba(58,86,101,1)')//9ab0e6
          .setStyle('vector.outline.width', 2);
          node.setToolTip(feature.properties.name);
          var segments = new twaver.List();
          var points = new twaver.List();

          if (feature.geometry.type === 'MultiPolygon') {
            feature.geometry.coordinates.forEach(function (polygon) {
              polygon.forEach(function (coordinate) {
                segments.add('moveto');
                coordinate.forEach(function (point, i) {
                  if (i !== 0) {
                    segments.add('lineto');
                  }
                  points.add(convertPoint(point));
                });
              });
            });
          } else if (feature.geometry.type === 'Polygon') {
            feature.geometry.coordinates.forEach(function (coordinate) {
              segments.add('moveto');
              coordinate.forEach(function (point, i) {
                if (i !== 0) {
                  segments.add('lineto');
                }
                points.add(convertPoint(point));
              });
            });
          } else {
            console.log(feature.geometry.type);
          }
          node.setSegments(segments);
          node.setPoints(points);
          box.add(node);
        });
    }

    function convertPoint (point) {
      return { x: (point[0] - 117) * 80, y: (-point[1] + 31.7) * 100 };
    }

    CustomZoomManager = function(network){
      twaver.vector.LogicalZoomManager.superClass.constructor.apply(this, arguments);
      this.sizeChange = true;
    };

    _twaver.ext(CustomZoomManager,twaver.vector.LogicalZoomManager,{
      getSizeZoom : function(ui){
       if(ui) {
        var element = ui.getElement();
        if (element.getClient('type') !== 'china') {
          return 0.07;
        }
        var zoom = this.getZoom();
        return zoom;
      }else {
        return 0.07;
      }
    },
    getAttachmentSizeZoom : function(attachment){
      var zoom = this.getZoom();
      var element = attachment.getElementUI().getElement();
      if (element.getClient('type') !== 'china') {
        return 0.07;
      }
      var zoom = this.getZoom();
      return zoom;
    },
    getLocationZoom : function(ui){
      if(ui) {
        var element = ui.getElement();
        if (element.getClient('type') !== 'china') {
          return 0.07;
        }
        var zoom = this.getZoom();
        return zoom;
      }else{
        return 0.07;
      }
    }
  });

</script>
</head>
<body onload="init();">
</body>
</html>