超级会员免费看
构建交互式安全可视化与迈向数据驱动安全
1. 交互式安全可视化工具选择
在构建交互式安全可视化时，我们没有选择构建一个巨大的滚动网页，而是让用户探索单个调查问题，并让 Tableau 根据需求自动切换紧凑的详细视图。每个部分的可视化组件都是可选的，检查时可提供更详细的信息。这只需几次鼠标点击和拖动即可完成，无需编写一行代码，就能创建一个任何有网页浏览器的人都能使用的交互式工具。此外，我们还可以将整个工作簿提供给其他分析师，让他们创建其他自定义视图，但前提是他们也有 Tableau Desktop 软件。
不过，Tableau 适合使用标准图表组件生成直接的固定和交互式可视化。如果想创建更专业的交互式可视化，或者不想局限于专有桌面工具，就需要使用文本编辑器开始编码。
2. 使用 D3 构建基于浏览器的可视化
D3（http://d3js.org/）是 Mike Bostock 创建的强大 JavaScript 库，可根据数据动态转换和操作网页内容。要熟练使用 D3，需要掌握以下几点：
- 精通网页三要素：HTML5、级联样式表（CSS）和 JavaScript。
- 熟悉可缩放矢量图形（SVG）的结构。
- 深入理解文档对象模型（DOM），可参考 http://www.w3.org/TR/1998/WD-DOM-19980720/introduction.html。
但即使没有深入掌握这些知识，也可以通过查看“官方”D3 GitHub 网站（https://github.com/mbostock/d3/wiki/Gallery）上的大量示例来开始学习 D3。与大多数专有技术不同，通过网页浏览器的“查看源代码”功能可以剖析和检查所有 D3 可视化。由于 D3 可视化完全由被可视化的数据驱动，数据本身也可下载，通常为 CSV、TSV、JSON 或硬编码的 HTML 表格和 JavaScript 数组。
使用 D3 只需三样东西：文本编辑器、D3 JavaScript 库和 Web 服务器。以下是一个静态条形图的基本示例：
<!--
-- Example of D3 visualization
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
rect.bar {
fill: #8DA0CB; /* fill color for the bars */
}
.axis text {
font: 10px sans-serif; /* 10-pt text for axis labels */
}
.axis path, .axis line { /* line style for the axes */
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
// Load the D3 js library
<script src="http://d3js.org/d3.v3.min.js"
charset="utf-8"></script>
</head>
<body>
<script>
// set up the data that will generate the bar chart
var data = [3, 3, 5, 9, 15, 18];
// define that margins for the plot and document
var margin = {top: 40, right: 40, bottom: 40, left: 40},
width = 960,
height = 500;
// we can use many scales with D3, but we'll stick with a basic
// linear scale for the X axis that is based on the values
// contained in our data set. in ggplot parlance this would
// be akin to using scale_x_continuous()
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width - margin.left - margin.right]);
// for the Y axis, we'll use an ordinal scale since these are really
// just individual factors being displayed. in ggplot parlance, this
// would be akin to scale_y_discrete()
var y = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeRoundBands([height - margin.top - margin.bottom, 0], .2);
// apply the scales to each axis, setting attributed for text
// text alignment and tick marks
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickPadding(8);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(0)
.tickPadding(8);
// create an SVG element at the top of the the document body
// that will hold the bar chart visualiztion, setting basic
// layout parameters
var svg = d3.select("body").append("svg")
.attr("width", width) // 'attr' sets DOM element attributes
.attr("height", height)
.attr("class", "bar chart")
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// this creates all the bars in the chart using SVG 'rects'.
// try chaning the number of entries and values in the 'data' array
// above to see how it affects the display
svg.selectAll(".bar")
.data(data)
.enter().append("rect") // 'enter+append' creates new elements
.attr("class", "bar") // each 'rect' will use the CSS 'bar' format
.attr("y", function(d, i) { return y(i); }) // scaled y coordinate
.attr("width", x) // width based on the x value
.attr("height", y.rangeBand()); // bar widths dynamically scaled to
fit
// display the axes we set up earlier
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y.rangeExtent()[1] + ")")
.call(xAxis);
// we could have embedded labels in array, but this just assigns
// A-Z+ character codes, which helps show how to make almost any
// D3 element dynamic
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll("text")
.text(function(d) { return String.fromCharCode(d + 65); });
</script>
</body>
</html>
可以使用 Python 标准库中的内置 HTTP 服务器测试可视化效果，在包含示例 D3 HTML 文件的目录中执行以下命令：
python -m SimpleHTTPServer 8888 &
然后将浏览器指向 http://localhost:8888/ch11-figure11.html。
如果语法看起来有点复杂，要记住它只是一个带有格式和 JavaScript 的网页。可以通过更改一些小设置，如条形颜色和轴字体，来逐渐熟悉代码。使用 Google Chrome 或 Mozilla Firefox 时，还可以打开开发者工具的 JavaScript 控制台，直接与文档元素进行交互。
3. 使用 Vega 进行元可视化
如果 ggplot 库是 R 语言中“图形语法”的实现，那么 Vega（http://trifacta.github.io/vega/）就是 D3 的对应物。使用 Vega 可以用非常易读的 JSON 描述可视化，然后使用 Vega 的 parse() 函数读取文件并显示可视化。Vega 库会将规范转换为相应的 D3 代码。以下是一个 Vega 版本的条形图示例：
// Vega chart description
{
"width": 500,
"height": 960,
"padding": {"top": 40, "left": 40, "bottom": 40, "right": 40},
"data": [
{
"name": "table",
"values": [
{"x": "A", "y": 3}, {"x": "B", "y": 3},
{"x": "C", "y": 5}, {"x": "D", "y": 9},
{"x": "E", "y": 15}, {"x": "F", "y": 18}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"range": "width",
"domain": {"data": "table", "field": "data.x"}
},
{
"name": "y",
"range": "height",
"nice": true,
"domain": {"data": "table", "field": "data.y"}
}
],
"axes": [
{"type": "x", "scale": "x"},
{"type": "y", "scale": "y"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"properties": {
"enter": {
"x": {"scale": "x", "field": "data.x"},
"width": {"scale": "x", "band": true, "offset": -1},
"y": {"scale": "y", "field": "data.y"},
"y2": {"scale": "y", "value": 0}
},
"update": {
"fill": {"value": "#8DA0CB"}
}
}
}
]
}
这种语法比直接的 D3 代码更易读，JSON 格式也便于根据模板构建图形，填充计算数据和自定义样式。结合一些额外的 JavaScript 代码，还可以构建完全交互式的可视化。
4. 创建交互式“威胁探索器”
假设要可视化内部主机与外部主机在每个端口上的通信情况。与 SOC 分析师沟通后，确定了以下目标：
- 界面必须让分析师选择要探索的端口。
- 可视化应在元数据可用的情况下，按类型（服务器或工作站）和 IP 地址识别内部节点，并指出数据中心出口连接尝试的来源。
- 应易于识别外部节点，图形边的默认方向为从内部到外部。
- 分析师希望一次能查看至少一个月的数据。
在与分析师的交流中，发现他们在查找恶意流量时经常使用外部资源检查 IP 地址声誉。因此，可以让代码提前进行此查找，并对在 AlienVault 声誉数据库中找到的外部节点进行颜色编码，同时提供一种让分析师快速检查所有外部节点与其他外部资源的方法。
决定使用 Vega 进行可视化组件，使用 jQuery（http://jquery.com/）和 Opentip（http://www.opentip.org/）JavaScript 库为核心静态 Vega 可视化添加交互层。以下是启动可视化的 jQuery 例程：
$(document).ready(function() {
// Opentip is a very flexible tooltip library that we'll use
Opentip.defaultStyle = "dark" // dark-styled tooltips
// This tells Opentip to look for mouse events on the vis div
// element which can be found in the <body> of the HTML file
tip = new Opentip(document.getElementById("vis"));
tip.deactivate(); // hide tooltip for now
doParse("22"); // start visualization with port 22
});
每个“端口”可视化都有自己的一对文件，一个用于 JSON 可视化图形规范（##-vega.json），一个用于实际图形数据（##-data.json）。这种命名约定使得通过 doParse() 函数在端口弹出框选择新端口时轻松更改显示。
<div>Select port: <select name="port" onchange="doParse(this.value)">
<option value="22">ssh</option>
<option value="23">telnet</option>
<option value="prt">Printers</option>
<option value="161">SNMP</option>
<option value="554">Streaming (554)</option>
<option value="7070">Streaming (7070)</option>
<option value="16464">Port 16464</option>
</select></div>
doParse() 函数会进行一些小的错误检查，然后调用 Vega 的 parse() 函数完成所有工作：
function parse(spec) {
// load the visualization specficication (spec) which,
// in turn, loads the data file and lets us create the graph
// and attach mouse events to the graphic
vg.parse.spec(spec, function(chart) {
// render the chart in the vis div and give us a handy
// reference to it in the graph object
graph = chart({el:"#vis"})
graph.renderer("svg").update()
// when the user mouses over one of the shapes,
// build the tooltip on the fly and display it.
// tooltips can contain any type of HTML formatting.
// here we add whatever metadata we have, including
// country flag if available.
graph.on("mouseover", function(event, item) {
if (item.shape == "circle" || item.shape == "square") {
tip.setContent("<div>INFO: " + item.datum.info + "<br/>CC: " +
item.datum.cc + " <img src=\"images/flags/png/" +
item.datum.cc.toLowerCase() + ".png\"/><br/>DNS: " +
item.datum.dns + "<br/></div>");
tip.activate();
tip._storeAndLockDimensions();
tip.reposition();
tip.show();
} else {
tip.deactivate();
tip.hide();
}
})
// turn off tooltips when the mouse moves out of an element
graph.on("mouseout", function(event, item) {
tip.hide();
tip.deactivate();
})
// if the user clicks on an external node, look up the selected IP
// address on the tcpiputils.com site
graph.on("click", function(event, item) {
a = item
if ((item.datum.group == 4) || (item.datum.group == 5)) {
window.open("http://www.tcpiputils.com/browse/ip-address/" +
item.datum.name,"_blank")
}
graph.update("click", item);
});
});
}
可以对这个基本的交互式工具进行一些增强，例如：
- 根据连接数量调整节点大小。
- 整合其他 IP 声誉资源。
- 对有可疑活动的内部主机执行额外的元数据查询，并显示更多信息层。
5. 迈向数据驱动安全
在开始将安全实践转变为数据驱动的思维方式时，建议采用“淘金”方法，而不是“钻探石油”的方式，即不要一开始就局限于单一焦点或单一数据源。应深入数据的洪流，探索和了解数据，然后开始提出并回答有趣的问题。
可以通过 Drew Conway 的“数据科学维恩图”的轻微修改版本来快速评估自己在迈向数据驱动安全之旅中的位置。这个图有助于识别目前不擅长的领域，虽然不必在所有主要领域都很强，但要确保任何一个领域的弱点不会不知不觉地让你偏离方向。
以下是迈向数据驱动安全的步骤总结：
|步骤|描述|
|----|----|
|选择工具|根据需求选择合适的可视化工具，如 Tableau 或 D3。|
|学习技术|掌握相关技术，如 D3、Vega 以及 JavaScript 库。|
|明确目标|在创建可视化时，明确目标和需求。|
|增强工具|对基本的交互式工具进行增强和优化。|
|转变思维|采用“淘金”方法，探索数据，提出有价值的问题。|
mermaid 流程图如下：
graph LR
A[选择可视化工具] --> B[学习相关技术]
B --> C[明确可视化目标]
C --> D[创建交互式可视化]
D --> E[增强和优化工具]
E --> F[迈向数据驱动安全]
通过以上步骤和方法，可以逐步构建有效的交互式安全可视化，迈向数据驱动的安全实践。同时，不断学习和实践，与使用者建立定期反馈循环，以确保交付最有效的工具。
构建交互式安全可视化与迈向数据驱动安全
6. 数据驱动安全的个人层面转变
在个人层面迈向数据驱动安全，我们可以借助一个类似 Drew Conway 的“数据科学维恩图”的工具来评估自身现状。该图涉及几个主要领域，我们需要审视自己在这些领域的能力，避免因某一领域的薄弱而偏离方向。以下是一些关键领域及相应的建议：
-
技术能力
：熟练掌握 D3、Vega 等可视化技术，以及 jQuery、Opentip 等 JavaScript 库。这需要不断学习和实践，通过阅读文档、参考示例代码来提升自己的编程水平。
-
业务理解
：深入了解安全领域的业务需求，明确可视化的目标和受众。例如在创建“威胁探索器”时，与 SOC 分析师沟通，确定他们的具体需求，如选择端口、识别节点类型等。
-
数据分析
：具备数据分析能力，能够从海量数据中提取有价值的信息。可以学习数据清洗、数据挖掘等技术，提高数据处理和分析的效率。
为了更好地说明这些领域的关系，我们可以用一个表格来展示：
| 领域 | 具体内容 | 重要性 |
| ---- | ---- | ---- |
| 技术能力 | 掌握 D3、Vega、JavaScript 库等 | 基础，用于实现可视化 |
| 业务理解 | 了解安全业务需求，明确目标 | 导向，确保可视化符合实际需求 |
| 数据分析 | 数据清洗、挖掘，提取有价值信息 | 核心，为可视化提供数据支持 |
7. 数据驱动安全的组织层面推进
在组织层面推动数据驱动安全，需要从多个方面入手：
-
文化建设
：在组织内营造数据驱动的文化氛围，让员工认识到数据的重要性。可以通过培训、宣传等方式，提高员工的数据意识。
-
数据整合
：整合组织内的各类数据，包括防火墙数据、日志数据等，建立统一的数据平台。这样可以方便数据的管理和分析，提高数据的利用率。
-
工具与流程优化
：选择合适的可视化工具和分析工具，优化数据处理和分析流程。例如，根据实际需求选择 Tableau 或 D3 进行可视化，提高工作效率。
-
团队协作
：加强不同部门之间的协作，如安全团队、数据分析团队和业务团队。通过跨部门合作，更好地理解业务需求，提供更有效的安全解决方案。
以下是组织层面推进数据驱动安全的步骤列表：
1. 开展数据驱动文化培训，提高员工意识。
2. 对组织内的数据进行梳理和整合，建立数据平台。
3. 评估并选择适合组织的可视化和分析工具。
4. 优化数据处理和分析流程，提高效率。
5. 促进不同部门之间的协作和沟通。
mermaid 流程图展示组织层面推进数据驱动安全的流程：
graph LR
A[文化建设] --> B[数据整合]
B --> C[工具与流程优化]
C --> D[团队协作]
A --> D
D --> E[实现数据驱动安全]
8. 持续改进与反馈循环
在构建交互式安全可视化和推进数据驱动安全的过程中，持续改进是非常重要的。要与最终使用工具的人员建立定期的反馈循环，及时了解他们的需求和意见，对工具进行优化和改进。例如，在创建“威胁探索器”后，可以收集分析师的反馈，根据他们的建议对工具进行增强，如调整节点大小、整合更多 IP 声誉资源等。
以下是持续改进的步骤：
1. 定期收集使用者的反馈意见。
2. 分析反馈意见，确定需要改进的方面。
3. 对工具进行相应的优化和调整。
4. 再次向使用者展示改进后的工具，收集新一轮的反馈。
通过不断地循环这个过程，可以确保工具始终满足用户的需求，实现最有效的安全沟通和决策。
9. 总结与展望
构建交互式安全可视化和迈向数据驱动安全是一个多学科的工作。在这个过程中，我们要综合考虑问题领域、用户的思维模式以及可视化的目标，确保交互是有效沟通所必需的。同时，应尽量避免使用专有解决方案，以便让更多人能够使用和查看我们的可视化成果。
未来，随着技术的不断发展，数据驱动安全将有更广阔的应用前景。我们可以期待更多创新的可视化技术和分析方法的出现，进一步提高安全决策的效率和准确性。此外，随着大数据、人工智能等技术的融入，数据驱动安全将变得更加智能和自动化。
总之，通过不断学习和实践，结合有效的反馈机制，我们能够逐步构建更加完善的交互式安全可视化工具，推动组织迈向更高效、更智能的数据驱动安全时代。
扫一扫
1012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
