emmanouil.vasilomano
/
PREPARE


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
							<!--
/**
 * TraCINg-Server - Gathering and visualizing cyber incidents on the world
 *
 * Copyright 2013 Matthias Gazzari, Annemarie Mattmann, André Wolski
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->

<!DOCTYPE html>
<html>

	<head>
	
		<title>TraCINg</title>
		
		<meta charset="utf-8">
		
		<!-- load external libraries -->
		<!-- load jQuery, jQuery UI for datepicker and  jQuery UI MultiSelect Widget for filter-->
		<script src="./extern/jquery/jquery.min.js"></script>
		<link rel="stylesheet" href="./extern/jquery/jquery-ui.css">
		<script src="./extern/jquery/jquery-ui.js"></script>
		<link rel="stylesheet" href="./extern/jquery/jquery.multiselect.css">
		<script src="./extern/jquery/jquery.multiselect.min.js"></script>
		<!-- https://github.com/Cyber-Incident-Monitor/jrange -->
		<link rel="stylesheet" href="./extern/jquery/ui.jrange.css">
		<script src="./extern/jquery/jquery.ui.jrange.js"></script>
		<!-- load bootstrap and responsive bootstrap -->
		<link href="./extern/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
		<script src="./extern/bootstrap/bootstrap.min.js"></script>
		<link href="./extern/bootstrap/bootstrap-responsive.min.css" rel="stylesheet">
		<!-- highcharts -->
		<script src="./extern/highcharts/highcharts.js"></script>
		<!-- load jVectorMap -->
		<link rel="stylesheet" href="./extern/jvectormap/jquery-jvectormap.css" type="text/css" media="screen"/>
		<script src="./extern/jvectormap/jquery-jvectormap.min.js"></script>
		<script src="./extern/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
		<!-- load Leaflet -->
		<link rel="stylesheet" type="text/css" href="./extern/leaflet/leaflet.css" />
		<script type="text/javascript" src="./extern/leaflet/leaflet.js"></script>
		<!-- load globe with three.js library -->
		<link rel="stylesheet" href="./extern/globe/globe.css" type="text/css" media="screen"/>
		<script type="text/javascript" src="./extern/globe/three.min.js"></script>
		<script src="./extern/globe/globe.min.js" type="text/javascript"></script>
		
		<!-- for Table View -->
		<!-- https://datatables.net/download/ -->
		<link rel="stylesheet" href="./extern/datatables/jquery.dataTables.css">
		<link rel="stylesheet" href="./extern/datatables/DT_bootstrap.css">
		<!-- http://datatables.net/blog/Twitter_Bootstrap_2 -->
		<script src="./extern/datatables/jquery.dataTables.min.js"></script>
		<script src="./extern/datatables/DT_bootstrap.js"></script>
		
		<!-- https://github.com/cowboy/jquery-throttle-debounce -->
		<script src="./extern/jquery/jquery.ba-throttle-debounce.min.js"></script>

		<!-- load internal libraries -->
		<script src="/socket.io/socket.io.js"></script>
		<script src="countryName.js" type="text/javascript"></script>
		<script src="map.js" type="text/javascript"></script>
		<script src="streetmap.js" type="text/javascript"></script>
		<script src="statistics.js" type="text/javascript"></script>
		<script src="controller.js" type="text/javascript"></script>
		<script src="world.js" type="text/javascript"></script>
		<script src="dbWindow.js" type="text/javascript"></script>
		<script src="help.js" type="text/javascript"></script>
		<script src="menu.js" type="text/javascript"></script>
		<script src="main.js" type="text/javascript"></script>
		<script src="filter.js" type="text/javascript"></script>
		
		<!-- load main.css -->
		<link rel="stylesheet" href="main.css">
		
	</head>
	
	
	<body class="navbar-offset">
	
	<!-- container for bootstrap views -->
	<div class="container-fluid">
	
		<noscript>
			<div id="dbAlert" class="alert alert-block">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
				<h4>Warning!</h4>Please enable JavaScript to view this page correctly.
			</div>
		</noscript>
	
		<!-- title -->
		<div class="page-header" id="header" onHelpActive="help-outline">
			<h1><a href="#/map" style="text-decoration: none; color : #000;">TraCINg <small>Monitoring cyber incidents </a></small></h1>
		</div>
		
		<!-- divide page -->
  		<div class="row-fluid">
			
			<!-- main menu part -->
			<div class="span12" id ="rightWin">
				
				<div class="navbar navbar-fixed-top span12" id="navMenu">
					<div class="navbar-inner">
					
						<div class="container">
 
							<!-- show btn-navbar on collapse -->
							<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</a>
							
							
							<!-- items that will be collapsed/main menu part -->
							<div class="nav-collapse collapse">
								<ul class="nav" id="menutabs">
									<form class="navbar-form pull-left" id="toggleView" onHelpActive="help-outline">
										<button class="btn active" id="liveView">Live View</button>
										<button class="btn" id="dbView">Database View</button>
									</form>
									<li class="divider-vertical"></li>
									<li id="2DViewEntry" onHelpActive="help-outline"><a href="#/map" id="tab_map">Country View</a></li>
									<li id="StreetViewEntry" onHelpActive="help-outline"><a href="#/streetmap" id="tab_streetmap">Map View</a></li>
									<li id="3DViewEntry" onHelpActive="help-outline"><a href="#/globe" id="tab_globe">3D View</a></li>
									<li id="tableViewEntry" onHelpActive="help-outline"><a href="#/table" id="tab_table">Table View</a></li>
									<li class="divider-vertical"></li>
									<li id="statsEntry" onHelpActive="help-outline"><a href="#/stats" id="tab_stats">Statistics</a></li>
									<li class="divider-vertical"></li>
									<li id="helpEntry" onHelpActive="help-outline"><a href="#helpView">Help</a></li> <!-- href="#helpView" data-toggle="modal"-->
									<li id="aboutViewEntry" onHelpActive="help-outline"><a href="#aboutView" data-toggle="modal">About</a></li>
									<li class="divider-vertical" style="margin-left: 3px"></li>
									<form class="navbar-form pull-right">
										<button class="btn" id="advMarkerInfo" onHelpActive="help-outline">Advanced Marker Info</button>
										<button type="button" class="btn" id="resetMap" onHelpActive="help-outline" style="margin-left: 5px">Reset Data</button>
									</form>
								</ul>
							</div>	
						</div>
					</div>
				</div>
				
				<!-- main body (map and config) part -->
				<div class="row-fluid">
					
					<!-- config part (for preferences, database content, etc.) -->
					<div class="span2" id="leftWin" style="display: none;">
			
						<div id="statsWin">
				  			<form>
								<fieldset>
									<legend>Statistic Views</legend>
									
									<div class="form-actions">
										<h3>Timeline</h3>
										<div class="btn-group-vertical" data-toggle="buttons-radio" style="width:100%;">
											<button type="button" class="btn btn-block active" onclick="loadStats('typeDate');" autocomplete="off" id="getStatstypeDate" onHelpActive="help-border">by Type</button>
											<button type="button" class="btn btn-block" onclick="loadStats('countryDate');" autocomplete="off" id="getStatscountryDate" onHelpActive="help-border">by Country</button>
										</div>
									</div>
									
									<div class="form-actions">
										<button type="button" class="btn btn-warning btn-block" autocomplete="off" id="selectStatsCountries1" onHelpActive="help-border">Filter</button>
									</div>
								</fieldset>
							</form>
						</div>
			
						<div id="dbWin">
			
							<!-- sidebar content -->
							<form>
								<fieldset>
					
									<legend>Database Search</legend>
									
									<div class="well">
										<span>Choose entries by day:</span>
										<div id="jrange" class="dates" onHelpActive="help-border">
											<input class="span12" type="text" autocomplete="off" />
											<div id="jrange-div" style="position:absolute;z-index:2;"></div>
										</div>
										<span>and press "Get Incidents" to request the data or use the filter below.</span>
									</div>
						
									<!-- get incident button with loading display and refresh button which resets the map -->
									<div class="form-actions">
										
										<button type="button" class="btn btn-warning requestButtonSize" onclick="requestAttacks();" id="getIncidents" onHelpActive="help-border">Get Incidents</button>
										<button type="button" class="btn btn-warning requestButtonSize" autocomplete="off" id="selectStatsCountries2" onHelpActive="help-border">Filter</button>
										<span class="help-block">Warning: Every request will reset the map and empty the table.</span>
							
										<div id="loadingProgressBar" onHelpActive="help-outline">
											<span>Loading Progress:</span>
							
											<div class="progress" style="margin-bottom: 5px;">
												<div id="dbProgBar" class="bar" style="width: 0%;"></div>
											</div>
											<label id="requestInfo"></label>
											<label id="requestSpeedInfo"></label>
										</div>
							
										<!-- loading control -->
										<!-- icons from http://glyphicons.com/ -->
										<div id="loadingControls">
											<a class="btn" id="playButton" onHelpActive="help-outline"><i class="icon-pause" style="background-image: url('./extern/bootstrap/images/glyphicons-halflings.png');"></i></a>
											<div id="fasterSlowerButton" class="btn-group" onHelpActive="help-outline">
												<a class="btn" id="slowerButton"><i class="icon-backward" style="background-image: url('./extern/bootstrap/images/glyphicons-halflings.png');"></i></a>
												<a class="btn" id="fasterButton"><i class="icon-forward" style="background-image: url('./extern/bootstrap/images/glyphicons-halflings.png');"></i></a>
											</div>
											<a class="btn" id="stopButton" onHelpActive="help-outline"><i class="icon-stop" style="background-image: url('./extern/bootstrap/images/glyphicons-halflings.png');"></i></a>
											<a class="btn" id="showAllButton" onHelpActive="help-outline">Show All</a>
										</div>
									</div>
						
							  	</fieldset>
							</form>
				
						</div>
					</div>
				
					<!-- map part -->
					<div class="span10" id="mainContent">
					
						<!-- error alert on database problems or other problems (can be seen better up here than at the bottom of the side bar) -->
						<div id="errorOutput" class="center"></div>
					
			  			<!-- include worldmap -->
			  			<div id="map" class="active center maps" LeftWinRemove="center">
				  			<div class="legend-up icon-arrow-up" rel="tooltip" title="Zoom in map (keyboard control)"></div>
				  			<div class="legend-down icon-arrow-down" rel="tooltip" title="Zoom out map (keyboard control)"></div>
				  			<div class="legend-wasd" rel="tooltip" title="Move the map (keyboard controls, only if zoomed in)">w/a/s/d</div>
			  			</div>
			  			
			  			<!-- include streetmap -->
			  			<div id="streetmap" class="center maps" LeftWinRemove="center">
			  				<div class="legend-up icon-arrow-up" rel="tooltip" title="Zoom in map (keyboard control)"></div>
			  				<div class="legend-down icon-arrow-down" rel="tooltip" title="Zoom out map (keyboard control)"></div>
			  				<div class="legend-wasd" rel="tooltip" title="Move the map (keyboard controls)">w/a/s/d</div>
			  			</div>
			  			
			  			<!-- include globe -->
			  			<div id="globe" class="center maps globe-background" LeftWinRemove="center">
			  				<div class="legend-toggle" rel="tooltip" title="Toggle heatmap (keyboard control)">t</div>
			  				<div class="legend-up icon-arrow-up" rel="tooltip" title="Zoom in globe (keyboard control)"></div>
			  				<div class="legend-down icon-arrow-down" rel="tooltip" title="Zoom out globe (keyboard control)"></div>
			  				<div class="legend-wasd" rel="tooltip" title="Move the globe (keyboard controls)">w/a/s/d</div>
			  			</div>
			  			
			  			<!-- include statistics -->
						<div id="stats" class="chart" style="width: 80%; display:none;"></div>
						
						<!-- include table -->
			  			<div id="table" class="center" style="display:none;">
							<table class="table table-striped" id="attackTable">
								<thead>
									<tr>
										<th>Sensor Type</th>
										<th>Sensor Name</th>
										<th>Attack Type</th>
										<th>Date</th>
										<th>Source Country</th>
										<th>Source City</th>
										<th>Source Port</th>
										<th>Destination Country</th>
										<th>Destination City</th>
										<th>Destination Port</th>
										<th>Authorized Sensor</th>
										<th>md5 Sum</th>
										<th>Log</th>
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
						</div>
		  			</div>
      			</div>
				
				
    		</div>
  		</div>
	</div>
	
	<!-- about view -->
	<div id="aboutView" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="aboutLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="aboutLabel">About</h3>
		</div>
		<div class="modal-body">
			<h4>Contents</h4>
			<ul>
				<a href="#aboutTracing">The TraCINg Project</a><br />
				<a href="#aboutData">About the represented Data</a><br />
			</ul>
			<h4 id="aboutTracing">The TraCINg Project</h4>
			<p>"TraCINg" stands for "TUD Cyber Incident Monitor". "TUD" stands for "Technical University Darmstadt". The project was proposed by Emmanouil Vasilomanolakis from <a href="http://www.cased.de/">CASED</a> (Center for Advanced Security Research Darmstadt) and was implemented by Matthias Gazzari, Annemarie Mattmann and André Wolski with assistance of Andre Mougoui on the sensor part in connection to a bachelor practical. In this context we would like to thank Christian Schowalter for his voluntary support in designing the Globe part of the project.<br />
			The project was created for you. You and every other person who ever comes to visit this website. While the topic of this project is monitoring cyber incidents coming from sensors the substance of it is sharing information and giving you just a little imprint of the possible danger outside there - on the Internet.</p>
			<p>
			Our Project on Github: <a href="https://github.com/Cyber-Incident-Monitor">Cyber-Incident-Monitor</a>
			<br />
			Related Projects: <a href="http://www.tk.informatik.tu-darmstadt.de/de/research/secure-smart-infrastructures/hostage">Hostage Mobile Honeypot</a>
			</p>
			<h4 id="aboutData">About the represented Data</h4>
			<p>The data represented on this website is data collected by Sensors like Honeypots and Intrusion Detection Systems.</p>
			<h5>Honeypot</h5>
			<p>Honeypots are systems whose value lies in being probed, attacked or compromised. They can be classified with respect to the level of interaction they offer to the attacker. A low-interaction honeypot simulates network operations at the TCP/IP stack, while high-interaction honeypots are real systems that are vulnerable and heavily monitored.<br />
			For this project we are using a special class of low-interaction honeypots called malware-collectors. As the name implies these honeypots are targeting the detection of malware that are spreading over the Internet. Furthermore, a generic mobile low-interaction honeypot, called HosTaGe is also utilized.</p>
			<h5>Intrusion Detection System</h5>
			<p>An Intrusion Detection System monitors a host or a network for signs of intrusions manifested by malicious behavior or a violation of a security policy.</p>
			<h5>Attack Data</h5>
			<p>The recorded attacks are mostly those of malware. The unfortunate thing about malware is that it continuously spreads by searching (usually) random targets. So if you see an attack from somewhere don't make the mistake to automatically blame "these evil guys from XYZ" because they might not even know that they are attacking anyone (it might not be them but the malware on their systems). Because if your computer gets infected by malware and you connect to the Internet the malware will start attacking others from your computer. Incidentally of course it also has some very bad affect on your own computer like steal your private data, passwords and a thousand other evil things. So in fact if your computer is infected with malware (which is not very unlikely) it might be that by chance it attacks one of our sensors one day and your home town gets a nice red circle to remind you of it. Might be. Of course there might also be a very evil person somewhere below or near that red circle creating malware. One never knows, some people do.<br />
			Anyway the recorded data is, as you might have learned by now, data recorded by our sensors every time an attack occurs. This data is send to our server where it is stored in the database and also send to each client (like your computer). The client displays the data (for example to you). The communication between sensor and server is encrypted. Also sensors may be authorized or may not be. Those who are not are probably just enthusiastic people who want to provide collected data from their own sensors but who are not known to be trustworthy for the CA (Certificate Authority, your sensor needs a certificate to become authorized) or merely did not ask for a certificate. We marked those for you so you will be able to distinguish between authorized and unauthorized sensors. However this data represents an attack on one of our sensors only, mind you. There are many many more attacks happening somewhere else this very second. And your computer is always one of the targets the question is whether it is protected well enough.</p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
		</div>
	</div>
		
	
	<!-- select countries view -->
	<div id="selectCountriesView" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="selectCountriesLabel" aria-hidden="true" style="width: 700px;">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="selectCountriestLabel">Filter</h3>
		</div>
		<div class="modal-body" id="selectCountriesBody">
			<div id="selectCountriesMap" style="height: 350px;">
				<!-- will be filled dynamicly -->
			</div>
			<!--
			<div style="padding-top: 10px; float: left;">
				Pick countries manually by clicking on them or choose them from the dropdown.
			</div>
			-->
			<div style="padding-top: 10px; float: right;">
				<select id="selectCountriesSelection" multiple size="1">
				</select>

				<button class="btn" id="selectCountriesAll">All</button>
				<button class="btn" id="selectCountriesClear">Clear</button>
			</div>
		</div>
		
		<div class="modal-footer">
		
			<!-- strange float behavior but looks best this way -->
			<div style="float: left; padding-left: 10px; padding-bottom: 8px; padding-right: 10px;">
				<label class="checkbox">
					<input type="checkbox" id="filterAuthorized" style="display:inline-block;" /> only authorized (enable to show only trusted sensors)
				</label>
			</div>	
			
			<div style="float: right; padding-left: 10px; padding-bottom: 3px; padding-right: 10px;">
				<button class="btn" id="resetFilter">Reset Filter</button>
			</div>
		
			<div style="float: left; padding-left: 10px; padding-right: 10px;">
				<!-- -->
				<select id="filterAttackType" multiple size="1"></select>
				<select id="filterSensorType" multiple size="1"></select>
				<!-- -->
			</div>	
			
			<div style="float: right; padding-left: 10px; padding-right: 10px;">
				<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
				<button class="btn btn-primary" id="selectCountriesFinish">Finish</button>
			</div>	
		</div>
	</div>
	

	<!-- show log view -->
	<div id="showLog" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="showLogLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="showLogLabel">Log</h3>
		</div>
		<div class="modal-body" id="showLogBody">
			<!-- will be filled dynamicly -->
		</div>
		<div class="modal-footer">
			<span style="float: left; text-align: center;"><strong>Warning: Never open a link (url) written above, otherwise you might infect your computer with malware!</strong></span>
			<button class="btn" data-dismiss="modal" aria-hidden="true" style="float: right;">Close</button>
		</div>
	</div>
		
	</body>
	
</html>