网络态势可视化技术作为一项新技术，是网络安全态势感知与可视化技术的结合，将网络中蕴涵的态势状况通过可视化图形方式展示给用户，并借助于人在图形图像方面强大的处理能力，实现对网络异常行为的分析和检测。这种方式充分结合了计算机和人脑在图像处理方面的处理能力的优势，提高了对数据的综合分析能力，能够有效的降低误报率和漏报率，提高系统检测效率，减少反应时间。并且这种可视化方法对于有些显示有明显特征的异常行为，还具有一定的预测能力。安全态势可视化系统的目的是生成网络安全综合态势图，以多视图、多角度、多尺度的方式与用户进行交互。
关键词：NetFlow; 实时态势; 可视化; 多视图;
第1块屏 业务运营监控
在云计算时代，用大数据和机器学习来提升我们的安全防御等级，已被验证是最有效的安全方案之一。本块大屏实时展现了当前云业务在全球各地的访问态势和黑客恶意攻击态势，绿色线代表着客户正常的访问，红色线代表着已被防御的黑客的攻击。可以看到，黑客攻击是无处不在，无时不有的，世界互联网的安全态势并不如我们印象中那么隐蔽和少见。在屏幕最底部，则是实时监控的网络出入口流量趋势，表现了业务服务的稳定性，并且，两趋势图两侧，标记了访问最多的用户所在地区TOP5，以及黑客攻击所在地区TOP5。
第2块屏 安全应急响应中心
安全感知是安全防御体系的核心，面对超级黑客的隐蔽攻击和渗透测试，是否能够第一时间识别和发现，是衡量安全体系优劣的根本。该屏幕可实时发现对业务进行渗透的黑客行为，每当有乌云的白帽子在挖掘我们漏洞的时候，该屏幕就会自动识别并告警。并将渗透行为的每一步都完整的记录下来，做为取证的关键证据，并且通过态势感知的溯源系统，定位到黑客的姓名，年龄等个人信息。面对黑客，我们可以不再等着挨打，而进行绝地反击。
第3块屏 安全感知体系
“安全应急响应中心”是每个企业的特种部队，他们在瞬息万变的互联网环境下，时刻准备着面临各种应急事件。本快屏幕集中展示了互联网最新曝光的重大漏洞疫情，以及先知，乌云等众测平台曝光的企业高危漏洞情报。并且对当下最紧急的漏洞进行评估，实时感知我们的业务是否受重大的漏洞影响，并且可以通过情报系统看到漏洞对同行业的影响，真正让安全风险可控。
第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资产，这意味着该类资产需要提升更强健的防御级别。
攻击监控 ： 通过对特定网段、服务建立的攻击监控体系，可实时检测出绝大多数攻击，并采取相应的行动（如断开网络连接、记录攻击过程、跟踪攻击源等）。
攻击模拟、病毒扩散模拟
网络拓扑：网络基本拓扑结构有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>
攻击效果如何实现呢？一张图解惑答疑也！
在这里，通常还会有个需求，即：希望箭头流过的地方再留下线条，否则不显示；对于TWaver也很好解决；看效果吧。
未完待续。。。
[1].中国智造数据可视化系统鉴赏
[2].态势感知 : 可视化大屏
[3].网络态势大数据可视化系统
[4].360发布威胁态势感知系统：数据可视化，态势更直观
[5].FireEye
[6].（大数据）安全管理与动态防御平台
[7].记录黑客技术中优秀的内容, 传播黑客文化,分享黑客技术精华
[8].数字冰雹数据观
[9].可视化文献 链接: https://pan.baidu.com/s/1mii9v64 密码: whqj
[10].有关网络攻击的世界地图是怎么开发的？比如 ZoomEye 经常有一些这样很酷的地图
[11].实时 WEB 监控器
[12].Norse
[13].如何理解 Norse 网站显示的实时网络攻击？
[14].国内外与信息可视化相关的专业博客、论坛、社区有哪些？
[15].卡巴斯基实验室发布交互式全球网络威胁地图
[16].网络安全可视化
[17].TechTarget安全
[18].值得收藏！国外最佳互联网安全博客TOP 30
