Skip to content

Instantly share code, notes, and snippets.

@SteveMcGrath

SteveMcGrath/dofler.html

Last active January 4, 2018 21:42
Show Gist options
  • Save SteveMcGrath/ad273e9aea4702b036c67542e6a9ce71 to your computer and use it in GitHub Desktop.
Save SteveMcGrath/ad273e9aea4702b036c67542e6a9ce71 to your computer and use it in GitHub Desktop.
Download ZIP
Dofler v6 HD Wires
Raw
dofler.html
<html>
<head>
<title>Dofler v6 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.9.0/css/tachyons.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
.color-vlow {color:rgb(76, 174, 76)}
.bg-vlow {background-color:rgb(76, 174, 76)}
.color-vmed {color:rgb(253, 196, 49)}
.bg-vmed {background-color:rgb(253, 196, 49)}
.color-vhigh {color:rgb(238, 147, 54)}
.bg-vhigh {background-color:rgb(238, 147, 54)}
.color-vcrit {color:rgb(212, 63, 58)}
.bg-vcrit {background-color:rgb(212, 63, 58)}
</style>
</head>
<body class="avenir bg-black white-90 b--white-90">
<div class="cf ph2-ns">
<div id="image-view" class="fl w-70-ns overflow-hidden h-100">
</div>
<div id="sidebar-view" class="fl w-30-ns pa2 bl b--white-20 vh-100">
<nav class="flex bb">
<!-- Nav Home Icon -->
<a class="link white-70 hover-white no-underline flex items-center pa3" href="#">
<img src="https://raw.githubusercontent.com/SteveMcGrath/DoFler/master/static/img/dofler_logo.png" class="dib" alt="Site Name">
</a>
<!-- Nav Links -->
<div class="flex-grow pa3 flex items-center center">
<p class="f6 white mr3 mr4-ns">Sniffing all the packets, trolling all the peeps</p>
</div>
</nav>
<div id="sidebar-vulns" class="sidebar-pane">
<div id="vuln-summary" class="w-100 items-center">
<h2 class="center">Severity Summary</h2>
<canvas id="vuln-summary-chart" class="center" style="max-height:325px;max-width:650px"></canvas>
</div>
<div id="vuln-top-issues" class="w-100 items-center">
<h2 class="center">Top Vulns</h2>
<table class="f6 w-100 mw8 center" cellspacing="0">
<tbody class="lh-solid">
<tr>
<td class="pv2 pr1 bb">1092</td>
<td class="pv2 pr1 pl1 bb b--white-90 color-vcrit overflow-hidden">Invalid SSL Certificate</td>
</tr>
<tr>
<td class="pv2 pr1 bb">1092</td>
<td class="pv2 pr1 pl1 bb b--white-90 color-vhigh overflow-hidden">Invalid SSL Certificate</td>
</tr>
<tr>
<td class="pv2 pr1 bb">1092</td>
<td class="pv2 pr1 pl1 bb b--white-90 color-vhigh overflow-hidden">Invalid SSL Certificate</td>
</tr>
<tr>
<td class="pv2 pr1 bb">1092</td>
<td class="pv2 pr1 pl1 bb b--white-90 color-vmed overflow-hidden">Invalid SSL Certificate</td>
</tr>
<tr>
<td class="pv2 pr1 bb">1092</td>
<td class="pv2 pr1 pl1 bb b--white-90 color-vlow overflow-hidden">Invalid SSL Certificate</td>
</tr>
</tbody>
</table>
</div>
<div id="vuln-top-hosts" class="w-100 items-center">
<h2 class="center">Top Hosts</h2>
<table class="f6 w-100 mw8 center" cellspacing="0">
<tbody class="lh-solid">
<tr>
<td class="pv1 pr1">192.168.100.201</td>
<td class="pv1 pr1 w-100">
<div class="h-100 fl pt2 pb2 ba bg-vcrit" style="width:12%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vhigh" style="width:12%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vmed" style="width:30%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vlow" style="width:20%"></div>
</td>
</tr>
<tr>
<td class="pv1 pr1">192.168.100.202</td>
<td class="pv1 pr1 w-100">
<div class="h-100 fl pt2 pb2 ba bg-vcrit" style="width:12%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vhigh" style="width:10%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vmed" style="width:10%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vlow" style="width:40%"></div>
</td>
</tr>
<tr>
<td class="pv1 pr1">192.168.100.203</td>
<td class="pv1 pr1 w-100">
<div class="h-100 fl pt2 pb2 ba bg-vcrit" style="width:.1%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vhigh" style="width:18%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vmed" style="width:20%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vlow" style="width:0%"></div>
</td>
</tr>
<tr>
<td class="pv1 pr1">192.168.100.204</td>
<td class="pv1 pr1 w-100">
<div class="h-100 fl pt2 pb2 ba bg-vcrit" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vhigh" style="width:30%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vmed" style="width:15%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vlow" style="width:50%"></div>
</td>
</tr>
<tr>
<td class="pv1 pr1">192.168.100.205</td>
<td class="pv1 pr1 w-100">
<div class="h-100 fl pt2 pb2 ba bg-vcrit" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vhigh" style="width:12%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vmed" style="width:30%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vlow" style="width:40%"></div>
</td>
</tr>
<tr>
<td class="pv1 pr1">192.168.100.206</td>
<td class="pv1 pr1 w-100">
<div class="h-100 fl pt2 pb2 ba bg-vcrit" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vhigh" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vmed" style="width:60%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vlow" style="width:38%"></div>
</td>
</tr>
<tr>
<td class="pv1 pr1">192.168.100.207</td>
<td class="pv1 pr1 w-100">
<div class="h-100 fl pt2 pb2 ba bg-vcrit" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vhigh" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vmed" style="width:40%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vlow" style="width:20%"></div>
</td>
</tr>
<tr>
<td class="pv1 pr1">192.168.100.208</td>
<td class="pv1 pr1 w-100">
<div class="h-100 fl pt2 pb2 ba bg-vcrit" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vhigh" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vmed" style="width:20%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vlow" style="width:60%"></div>
</td>
</tr>
<tr>
<td class="pv1 pr1">192.168.100.209</td>
<td class="pv1 pr1 w-100">
<div class="h-100 fl pt2 pb2 ba bg-vcrit" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vhigh" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vmed" style="width:12%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vlow" style="width:40%"></div>
</td>
</tr>
<tr>
<td class="pv1 pr1">192.168.100.210</td>
<td class="pv1 pr1 w-100">
<div class="h-100 fl pt2 pb2 ba bg-vcrit" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vhigh" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vmed" style="width:0%"></div>
<div class="h-100 fl pt2 pb2 ba bg-vlow" style="width:5%"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="sidebar-hosts" class="sidebar-pane" style="display: none;">
<h1>Discovered Hosts</h1>
</div>
<div id="sidebar-protocols" class="sidebar-pane" style="display: none;">
<h1>Protocol Analysis</h1>
<div id="protocols-over-time-wrapper" class="w-100 items-center">
<h2 class="center">Protocols over time</h2>
<canvas id="protocols-over-time" class="center"></canvas>
</div>
</div>
<div id="sidebar-accounts" class="sidebar-pane" style="display: none;">
<div id="accounts-by-type-wrapper" class="w-100 items-center">
<h2 class="center">Account Discovery by Type</h2>
<canvas id="accounts-by-type" class="center"></canvas>
</div>
<div id="accounts-over-time-wrapper" class="w-100 items-center">
<h2 class="center">Accounts Discovered over Time</h2>
<canvas id="accounts-over-time" class="center"></canvas>
</div>
<div id="most-recent-accounts" class="w-100 items-center">
<h2 class="center">Most Recent Accounts Seen</h2>
<table class="f6 w-100 mw8 center" cellspacing="0">
<tbody class="lh-solid">
<tr>
<td class="pv2 pr1 bb">USERNAME</td>
<td class="pv2 pr1 bb">PAS************</td>
<td class="pv2 pr1 bb">HTTP</td>
<td class="pv2 pr1 bb">http://somewebsite.com</td>
</tr>
<tr>
<td class="pv2 pr1 bb">USERNAME</td>
<td class="pv2 pr1 bb">PAS************</td>
<td class="pv2 pr1 bb">HTTP</td>
<td class="pv2 pr1 bb">http://somewebsite.com</td>
</tr>
<tr>
<td class="pv2 pr1 bb">USERNAME</td>
<td class="pv2 pr1 bb">PAS************</td>
<td class="pv2 pr1 bb">HTTP</td>
<td class="pv2 pr1 bb">http://somewebsite.com</td>
</tr>
<tr>
<td class="pv2 pr1 bb">USERNAME</td>
<td class="pv2 pr1 bb">PAS************</td>
<td class="pv2 pr1 bb">HTTP</td>
<td class="pv2 pr1 bb">http://somewebsite.com</td>
</tr>
<tr>
<td class="pv2 pr1 bb">USERNAME</td>
<td class="pv2 pr1 bb">PAS************</td>
<td class="pv2 pr1 bb">HTTP</td>
<td class="pv2 pr1 bb">http://somewebsite.com</td>
</tr>
<tr>
<td class="pv2 pr1 bb">USERNAME</td>
<td class="pv2 pr1 bb">PAS************</td>
<td class="pv2 pr1 bb">HTTP</td>
<td class="pv2 pr1 bb">http://somewebsite.com</td>
</tr>
<tr>
<td class="pv2 pr1 bb">USERNAME</td>
<td class="pv2 pr1 bb">PAS************</td>
<td class="pv2 pr1 bb">HTTP</td>
<td class="pv2 pr1 bb">http://somewebsite.com</td>
</tr>
<tr>
<td class="pv2 pr1 bb">USERNAME</td>
<td class="pv2 pr1 bb">PAS************</td>
<td class="pv2 pr1 bb">HTTP</td>
<td class="pv2 pr1 bb">http://somewebsite.com</td>
</tr>
<tr>
<td class="pv2 pr1 bb">USERNAME</td>
<td class="pv2 pr1 bb">PAS************</td>
<td class="pv2 pr1 bb">HTTP</td>
<td class="pv2 pr1 bb">http://somewebsite.com</td>
</tr>
<tr>
<td class="pv2 pr1 bb">USERNAME</td>
<td class="pv2 pr1 bb">PAS************</td>
<td class="pv2 pr1 bb">HTTP</td>
<td class="pv2 pr1 bb">http://somewebsite.com</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<ul id="option-menu" class="bg-black list pl0 ml0 mw5 ba br3 absolute bottom-2 right-1" style="display: none;">
<a onclick="$('.sidebar-pane').hide();$('#sidebar-accounts').show()">
<li class="ph3 pv2 bb hover-bg-light-green">Accounts</li>
</a>
<a onclick="$('.sidebar-pane').hide();$('#sidebar-hosts').show()">
<li class="ph3 pv2 bb hover-bg-light-green">Discovered Hosts</li>
</a>
<a onclick="$('.sidebar-pane').hide();$('#sidebar-protocols').show()">
<li class="ph3 pv2 bb hover-bg-light-green">Protocols</li>
</a>
<a onclick="$('.sidebar-pane').hide();$('#sidebar-vulns').show()">
<li class="ph3 pv2 bb hover-bg-light-green">Vulnerabilities</li>
</a>
<a>
<li class="ph3 pv2 bb hover-bg-light-green bg-light-red">Demo Mode</li>
</a>
<a>
<li class="ph3 pv2 bb hover-bg-light-green bg-green">Image Ban</li>
</a>
<a>
<li class="ph3 pv2 hover-bg-light-green">Login</li>
</a>
</ul>
<div class="bottom-1 right-1 absolute">
<a class="pa1" onclick="$('#option-menu').toggle()">
<i class="fa fa-cog fa-2x" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function genRandValues(length, min, max) {
var a = []
while (a.length < length) {
var r = Math.floor(Math.random() * (max - min) + min)
a.push(r)
}
return a
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var threeHrWindow = [
'08:00', '08:01', '08:02', '08:03', '08:04', '08:05', '08:06', '08:07', '08:08', '08:09',
'08:10', '08:11', '08:12', '08:13', '08:14', '08:15', '08:16', '08:17', '08:18', '08:19',
'08:20', '08:21', '08:22', '08:23', '08:24', '08:25', '08:26', '08:27', '08:28', '08:29',
'08:30', '08:31', '08:32', '08:33', '08:34', '08:35', '08:36', '08:37', '08:38', '08:39',
'08:40', '08:41', '08:42', '08:43', '08:44', '08:45', '08:46', '08:47', '08:48', '08:49',
'08:50', '08:51', '08:52', '08:53', '08:54', '08:55', '08:56', '08:57', '08:58', '08:59',
'09:00', '09:01', '09:02', '09:03', '09:04', '09:05', '09:06', '09:07', '09:08', '09:09',
'09:10', '09:11', '09:12', '09:13', '09:14', '09:15', '09:16', '09:17', '09:18', '09:19',
'09:20', '09:21', '09:22', '09:23', '09:24', '09:25', '09:26', '09:27', '09:28', '09:29',
'09:30', '09:31', '09:32', '09:33', '09:34', '09:35', '09:36', '09:37', '09:38', '09:39',
'09:40', '09:41', '09:42', '09:43', '09:44', '09:45', '09:46', '09:47', '09:48', '09:49',
'09:50', '09:51', '09:52', '09:53', '09:54', '09:55', '09:56', '09:57', '09:58', '09:59',
'10:00', '10:01', '10:02', '10:03', '10:04', '10:05', '10:06', '10:07', '10:08', '10:09',
'10:10', '10:11', '10:12', '10:13', '10:14', '10:15', '10:16', '10:17', '10:18', '10:19',
'10:20', '10:21', '10:22', '10:23', '10:24', '10:25', '10:26', '10:27', '10:28', '10:29',
'10:30', '10:31', '10:32', '10:33', '10:34', '10:35', '10:36', '10:37', '10:38', '10:39',
'10:40', '10:41', '10:42', '10:43', '10:44', '10:45', '10:46', '10:47', '10:48', '10:49',
'10:50', '10:51', '10:52', '10:53', '10:54', '10:55', '10:56', '10:57', '10:58', '10:59',
]
var imageView = document.getElementById('image-view')
for (i = 0; i < 100; i++) {
var elem = document.createElement('img')
elem.setAttribute('class', 'fl db ma2 mw6-ns')
elem.setAttribute('src', 'https://dummyimage.com/'
+ Math.floor(Math.random() * 1000) + 'x'
+ Math.floor(Math.random() * 1000) + '/ffffff/000000')
imageView.appendChild(elem)
}
//var vssc = document.getElementById('vuln-summary-chart').getContext('2d')
var vulnSevSummaryChart = new Chart(document.getElementById('vuln-summary-chart').getContext('2d'), {
type: 'doughnut',
data: {
datasets: [{
data: [561, 182, 65, 23],
backgroundColor: ['rgb(76, 174, 76)', 'rgb(253, 196, 49)', 'rgb(238, 147, 54)', 'rgb(212, 63, 58)'],
}],
labels: ['Low', 'Medium', 'High', 'Critical'],
},
options: {
legend: {display: false}
}
})
var accountByTypeChart = new Chart(document.getElementById('accounts-by-type').getContext('2d'), {
type: 'doughnut',
data: {
labels: ['HTTP', 'FTP', 'IMAP'],
datasets: [{
data: [130, 42, 2],
backgroundColor: [getRandomColor(), getRandomColor(), getRandomColor()]
}]
}
})
var accountsOverTimeChart = new Chart(document.getElementById('accounts-over-time').getContext('2d'), {
type: 'line',
options: {
legend: {display: false},
scales: {
xAxis: [
{
type: 'time',
time: {unit: 'minute'}
}
],
}
},
data: {
labels: threeHrWindow,
datasets: [{
borderColor: getRandomColor(),
label: 'Accounts Discovered',
pointRadius: 0,
data: genRandValues(180, 0, 10)
}]
}
})
var protosOverTimeChart = new Chart(document.getElementById('protocols-over-time').getContext('2d'), {
type: 'line',
options: {
scales: {
xAxis: [
{
type: 'time',
time: {unit: 'minute'}
}
],
}
},
data: {
labels: threeHrWindow,
datasets: [{
borderColor: getRandomColor(),
label: 'TCP',
pointRadius: 0,
data: genRandValues(180, 500, 600)
},{
borderColor: getRandomColor(),
label: 'UDP',
pointRadius: 0,
data: genRandValues(180, 50, 100)
},{
borderColor: getRandomColor(),
label: 'HTTP',
pointRadius: 0,
data: genRandValues(180, 200, 220)
}
]
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment