Skip to content
Permalink
8ac51c6fb9
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

CSEGroup22SDP/templates/temp_index.html

Go to file
 
 
Cannot retrieve contributors at this time
593 lines (481 sloc) 32.6 KB
Raw Blame
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Core theme CSS (includes Bootstrap)-->
<link href="static/css/styles.css" rel="stylesheet" media ="all"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>DDD Filter Simulation</title>
<link rel="icon" type="image/x-icon" href="static/assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="/static/css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Masthead-->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">DDD Filter</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">Implementation of DDD Filter, allowing users to have good visualization of how the DDD Filter work in a network. </h2>
<h3 class="text-white-50 mx-auto mt-2 mb-5">This is a simulation project, implements the applications of DDD Filter in the network. Preventing the attacker to overflow the network with many packets.</h3>
<a class="btn btn-primary js-scroll-trigger" href="#canvas" onclick="openNav()">Get Started</a>
</div>
</div>
</header>
<!-- Projects-->
<section class="projects-section bg-light" id="projects">
<!--THIS IS THE SIDEBAR. I ALSO ADDED THE BUTTONS TO IT AS WELL-->
<div id="mySidebar" class="sidebar">
<div id="UserInputCol" style="float:left">
<form style="padding-top: 30px; padding-left: 30px;"">
<div style="float:top">
<div id ="firstColumn" style ="float:left">
<label><abbr title="The size of packet being sent">Packet size</abbr> (Bytes):</label>
<input type="number" id="packetsize" name="packetsize" value=3><br>
<label><abbr title="The time interval of resend on SYN/ACK">Resend Time for Syn acks</abbr> (Msec):</label>
<input type="number" id="rtsa" name="rtsa" value=3><br>
<label><abbr title="The size of queue for connections not established">Max queue size for half open connections</abbr>:</label>
<input type="number" id="maxqueuesize" name="maxqueuesize" value=3><br>
<label><abbr title="Delay of transmission due to DDD Mapping">DDD Mapping delay</abbr>:</label>
<input type="number" id="dddmappingdelay" name="dddmappingdelay" value=3><br>
<label><abbr title="Delay of transmission due to physical conduction">Propagation delay</abbr> (msec):</label>
<input type="number" id="propagationdelay" name="propagationdelay" value=3><br>
<label><abbr title="Number of DDD Ports open for use">Number of DDD ports open</abbr>:</label>
<input type="number" id="numofDDDport" name="numofDDDport" value=3><br>
<label><abbr title="The interval of rescheduling opened DDD Port">Time until next DDD port change</abbr>:</label>
<input type="number" id="timetonextDDDport" name="timetonextDDDport" value=3><br>
<label><abbr title="Time that allows old DDD ports being overlapped">Overlap Time for old DDD ports</abbr>:</label>
<input type="number" id="overlaptimeoldDDD" name="overlaptimeoldDDD" value=3><br>
<label><abbr title="Determines how long the simulation would last">Duration of Simulation</abbr> (seconds):</label>
<input type="number" id="durationSim" name="durationSim" value=0.05><br>
<label><abbr title="Number of SYN/ACK Resend Attempts">Number of SynAck resends</abbr>:</label>
<input type="number" id="numbSynAckResends" name="numbSynAckResends" value=3><br>
<label><abbr title="Define your folder to store files generated by simulation">Storage Folder</abbr>:</label>
<input type="text" id="storageFolder" name="storageFolder" value="Unnamed"><br>
</div>
<div id="secondColumn" style ="float:right">
<label><abbr title="The bandwidth that client can transmit to router">Client to Router Bandwidth</abbr> (Byte/s):</label>
<input type="number" id="clienttoRouter" name="clienttoRouter" value=3><br>
<label><abbr title="The bandwidth that router can transmit to client">Router to Client Bandwidth</abbr> (Byte/s):</label>
<input type="number" id="routertoClient" name="routertoClient" value=3><br>
<label><abbr title="The bandwidth that router can transmit to reflector">Router to Reflector Server Bandwidth</abbr> (Byte/s):</label>
<input type="number" id="routertoReflector" name="routertoReflector" value=3><br>
<label><abbr title="The bandwidth that router can transmit to normal server">Router to Normal Server Bandwidth</abbr> (Byte/s):</label>
<input type="number" id="routertoNormal" name="routertoNormal" value=3><br>
<label><abbr title="The bandwidth that normal server can transmit to router">Normal Server to Router Bandwidth</abbr> (Byte/s):</label>
<input type="number" id="normaltoRouter" name="normaltoRouter" value=3><br>
<label><abbr title="The bandwidth that reflector can transmit to router">Reflector Server to Router Bandwidth</abbr> (Byte/s):</label>
<input type="number" id="reflectortoRouter" name="reflectortoRouter" value=3><br>
<label><abbr title="The bandwidth that attacker can perform attack">Attacker Upload Bandwidth</abbr> (Byte/s):</label>
<input type="number" id="attackertoReflector" name="attackertoReflector" value=3><br>
<label><abbr title="How big would the server be able to store its queue">Queue Limit</abbr> (Bytes):</label>
<input type="number" id="queueLimit" name="queueLimit" value=3><br>
<label><abbr title="Choose whether DDD mitigation is enabled">DDD State</abbr>: ON or OFF</label>
<input type="checkbox" id="DDDstate" name="DDDstate" ,="" checked="true"><br>
<label for="AtkType"><abbr title="Choose how the attacker would behave">Attacker Type</abbr></label>
<select id="AtkType">
<option value=0>Ignorant Attacker</option>
<option value=1>Smart Attacker</option>
</select><br>
<label for="Amp"><abbr title="Choose whether amplification would be applied">Amplification</abbr></label>
<select id="Amp">
<option value=0>No Amplification</option>
<option value=1>Do Amplification</option>
</select><br>
<input style="padding-left: 20px; padding-top:10px" type="file" id ="myFile" multiple size="50" onchange="openFile()">
</div>
</div>
<div id="checkboxRowOne" style="float:bottom">
<div style="float:left; padding-top: 10px">
<label><abbr title="If you uncheck this box, animation would not be displayed and only simulation result would be given">Skip Animation</abbr></label><br>
<input type="checkbox" id="simOption" name="simOption" , checked=true>
</div>
<div style="float:left; padding-top: 10px; padding-left: 20px;">
<label><abbr title="Choose whether you would be able to download simulation outputs">Download Outputs</abbr></label><br>
<input type="checkbox" class = "downOutput" id="downOutput" name="downOutput" checked=true onchange="valueChanged()"/>
<script type= "text/JavaScript">
function valueChanged(){
if($('.downOutput').is(":checked"))
$(".download").show();
else
$(".download").hide();
}
</script>
</div>
</div>
<div id="checkboxRowTwo" style="float:left" class="download">
<div style="float:left; padding-top: 10px">
<label><abbr title="Choose whether log file would be given to you">Create Log File</abbr></label><br>
<input type="checkbox" class = "logfile" id="logfile" name="logfile" , checked=true onchange="logChanged()"/><br>
</div>
<div style="float:left; padding-top: 10px; padding-left: 20px">
<label><abbr title="Choose whether simulation summary would be given to you">Create Summary File</abbr></label><br>
<input type="checkbox" class = "summfile" id="summfile" name="summfile" , checked=true onchange="summChanged()"/><br>
</div>
</div>
</form>
<!--This is the end of the userInputCol-->
</div>
<div id="animationButtons" style="float:left">
<div style="float:left; padding-top: 40px; padding-left: 20px;">
<p><button onclick="hideUI(); sendGet(this)" class="btn btn-light btn-sm"><abbr title="Click this button to start animation">Start Animation</abbr></button></p>
<p><button onclick="showUI(); stopSimulation()" class="btn btn-light btn-sm"><abbr title="Click this button to end animation">End Animation</abbr></button></p>
<div class="slidecontainer">
<span>Slowest</span>
<input type="range" min="1" max="5" value="1" class="slider" id="myRange">
<span>Fastest</span>
</div>
<script type= "text/JavaScript">
function hideUI(){
$("#UserInputCol").hide();
document.getElementById("mySidebar").style.height = "300px";
document.getElementById("main").style.marginTop = "300px";
}
function showUI(){
$("#UserInputCol").show();
document.getElementById("mySidebar").style.height = "600px";
document.getElementById("main").style.marginTop = "600px";
}
</script>
</div>
<div style="float:left; padding-top: 40px; padding-left: 20px;">
<p><button onclick="pauseSimulation()" class="btn btn-light btn-sm"><abbr title="Click this button to pause animation">Pause Animation</abbr></button></p>
<p><button onclick="resumeSimulation()" class="btn btn-light btn-sm"><abbr title="Click this button to resume animation">Resume Animation</abbr></button></p>
</div>
</div>
<div style="float:left; padding-top: 40px; padding-left: 20px; display:true;" class= "download" id = "download">
<label><abbr title="Files will be given in .csv format">Name your files</abbr>(summary,log):</label><br>
<input type="text" id="file1" name="file1">
<input type="text" id="file2" name="file2">
<p><button onclick="downloadFile()" class="btn btn-light btn-sm"><abbr title="Click here to download your files">Download</abbr></button></p>
</div>
<ul class="legend" id = "legend" >
<li><span class="green"></span><abbr title="In TCP, SYN packet is sent by client intended to connect to server">Syn Packets</abbr></li>
<li><span class="red"></span><abbr title="Dropped packet are lost in transmission">Drop Packets</abbr></li>
<li><span class="blue"></span><abbr title="In TCP, SYN-ACK packet is sent by server to notify client that connection is accepted.">Syn-Ack Packets</abbr></li>
<li><span class="yellow"></span><abbr title="In TCP, ACK packet is sent as acknowledgement notification">Ack Packets</abbr></li>
<li><span class="pink"></span><abbr title="Attacker uses this to probe the ddd filter to see which ports are open by waiting for a response from the client">Ping Packets</abbr></li>
<li><span class="black"></span><abbr title="Response from the client that informs attacker a specific port is open">Pong Packets</abbr></li>
<li><span class="aqua"></span><abbr title="Packet that tells attacker that a port is not open at the ddd device">Pong-Rst Packets</abbr></li>
<li><span class="purple"></span><abbr title="In TCP, RST packet is sent by an end to notify an reset of connection. Reason of resetting could be complex.">RST Packets</abbr></li>
</ul>
<script type= "text/JavaScript">
function summChanged(){
if($('.summfile').is(":checked")){
$("#file1").show();
document.getElementById("summfile").checked = true;
}
else{
$("#file1").hide();
document.getElementById("summfile").checked = false;
}
}
</script>
<script type= "text/JavaScript">
function logChanged(){
if($('.logfile').is(":checked")){
$("#file2").show();
document.getElementById("logfile").checked = true;
}
else{
$("#file2").hide();
document.getElementById("logfile").checked = false;
}
}
</script>
<div style="float:top; padding-top: 40px; padding-left: 30px;">
<p id="openPorts" style="color: white; text-align: left;"></p>
<p id="attackerPorts" style="color: white; text-align: left;"></p>
<p id="droppedPackets" style="color: white; text-align: left;"></p>
</div>
<!--This is the end of the sidebar div-->
</div>
<nav class="fixed-top" style="padding-top: 0;" id="main">
<button class="openbtn" onclick="openNav()">☰</button>
</nav>
<!-- Parse the JavaScript and move it to Python-->
<script type="module" src="/static/js/requests.js"> </script>
<script>
function openNav() {
if(document.getElementById("mySidebar").style.height == "600px"){
closeNav();
}
else{
document.getElementById("mySidebar").style.height = "600px";
document.getElementById("main").style.marginTop = "600px";
}
}
function closeNav() {
document.getElementById("mySidebar").style.height = "0px";
document.getElementById("main").style.marginTop= "0px";
}
function openFile(){
var fileInput = document.getElementById('myFile');
//var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
var DDDstate;
var skipsim;
var packetsize;
var rtsa;
var maxqueuesize;
var dddmappingdelay;
var propagationdelay;
var numofDDDport;
var timetonextDDDport;
var overlaptimeoldDDD;
console.log("Hello");
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
var content = reader.result;
//Here the content has been read successfuly
//alert(content);
//document.getElementById("output").innerHTML= content;
var contents= content.split(" ");
DDDstate = contents[0];
skipsim = contents[1];
packetsize = new Number(contents[3]);
rtsa = new Number(contents[4]);
maxqueuesize = new Number(contents[5]);
dddmappingdelay = new Number(contents[6]);
propagationdelay = new Number(contents[7]);
numofDDDport = new Number(contents[8]);
timetonextDDDport = new Number(contents[10]);
overlaptimeoldDDD = new Number(contents[11]);
console.log(contents);
console.log("Check here");
document.getElementById("DDDstate").checked = DDDstate;
document.getElementById("skipsim").checked = skipsim;
document.getElementById("packetsize").value = packetsize;
document.getElementById("rtsa").value = rtsa;
document.getElementById("maxqueuesize").value = maxqueuesize;
document.getElementById("dddmappingdelay").value = dddmappingdelay;
document.getElementById("propagationdelay").value = propagationdelay;
document.getElementById("numofDDDport").value = numofDDDport;
document.getElementById("timetonextDDDport").value = timetonextDDDport;
document.getElementById("overlaptimeoldDDD").value = overlaptimeoldDDD;
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!"
}
});
}
</script>
<!-- Function to display the input text-->
<script>
var fileInput = document.getElementById('myFile');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
var DDDstate;
var skipsim;
var outFile;
var summfile;
var logfile;
var packetsize;
var rtsa;
var maxqueuesize;
var dddmappingdelay;
var propagationdelay;
var numofDDDport;
var timetonextDDDport;
var overlaptimeoldDDD;
var durationSim;
var numbSynAckResends;
var clienttoRouter;
var routertoClient;
var routertoReflector;
var routertoNormal;
var normaltoRouter;
var reflectortoRouter;
var attackertoReflector;
var queueLimit;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
var content = reader.result;
//Here the content has been read successfuly
//alert(content);
//document.getElementById("output").innerHTML= content;
var contents= content.split(/\s+/);
//packets = new Number(contents[0]);
//ddd = contents[1];
//ports = new Number(contents[2]);
//dx = new Number(contents[3]);
//skipsim = contents[4];
//outFile = contents[5];
//console.log(contents[22]);
packetsize = new Number(contents[1]);
rtsa = new Number(contents[2]);
maxqueuesize = new Number(contents[3]);
dddmappingdelay = new Number(contents[4]);
propagationdelay = new Number(contents[5]);
numofDDDport = new Number(contents[6]);
timetonextDDDport = new Number(contents[7]);
overlaptimeoldDDD = new Number(contents[8]);
durationSim = new Number(contents[9]);
numbSynAckResends = new Number(contents[10]);
clienttoRouter = new Number(contents[11]);
routertoClient = new Number(contents[12]);
routertoReflector = new Number(contents[13]);
routertoNormal = new Number(contents[14]);
normaltoRouter= new Number(contents[15]);
reflectortoRouter= new Number(contents[16]);
attackertoReflector= new Number(contents[17]);
queueLimit= new Number(contents[18]);
DDDstate = contents[19]; // booleans
attackerType = new Number(contents[20]);
amplification = new Number(contents[21]);
skipsim = contents[22]; // booleans
logfile = contents[23]; // booleans
summfile = contents[24]; // booleans
console.log(packetsize);
console.log("The content is " + DDDstate);
console.log("Second content is " + skipsim);
document.getElementById("DDDstate").value = DDDstate;
document.getElementById("simOption").value = skipsim;
//document.getElementById("downOutput").value =outFile;
document.getElementById("summfile").value = summfile;
document.getElementById("logfile").value = logfile;
document.getElementById("packetsize").value = packetsize;
document.getElementById("rtsa").value = rtsa;
document.getElementById("maxqueuesize").value = maxqueuesize;
document.getElementById("dddmappingdelay").value = dddmappingdelay;
document.getElementById("propagationdelay").value = propagationdelay;
document.getElementById("numofDDDport").value = numofDDDport;
document.getElementById("timetonextDDDport").value = timetonextDDDport;
document.getElementById("overlaptimeoldDDD").value = overlaptimeoldDDD;
document.getElementById("durationSim").value = durationSim;
document.getElementById("numbSynAckResends").value = numbSynAckResends;
document.getElementById("clienttoRouter").value = clienttoRouter;
document.getElementById("routertoClient").value = routertoClient;
document.getElementById("routertoReflector").value = routertoReflector;
document.getElementById("routertoNormal").value = routertoNormal;
document.getElementById("normaltoRouter").value = normaltoRouter;
document.getElementById("reflectortoRouter").value = reflectortoRouter;
document.getElementById("attackertoReflector").value = attackertoReflector;
document.getElementById("queueLimit").value = queueLimit;
document.getElementById("AtkType").value = attackerType;
document.getElementById("Amp").value = amplification;
document.getElementById("storageFolder").value = storageFolder;
// Conditions to set for different checkboxes.
if(DDDstate == "Yes" || DDDstate =="yes"){
document.getElementById("DDDstate").value = true;
}
else if(DDDstate == "No" || DDDstate =="no"){
document.getElementById("DDDstate").checked = false;
}
if(skipsim == "Yes" || skipsim =="yes"){
document.getElementById("simOption").checked = true;
}
else if(skipsim =="No" || skipsim =="no"){
document.getElementById("simOption").checked = false;
}
if(summfile =="Yes" || summfile == "yes" || logfile =="Yes" || logfile =="yes"){
document.getElementById("downOutput").checked = true;
if(summfile =="Yes" || summfile == "yes"){
document.getElementById("summfile").checked = true;
}
else if(summfile =="No" || summfile == "no"){
document.getElementById("summfile").checked = false;
}
if(logfile =="Yes" || logfile =="yes"){
document.getElementById("downOutput").checked = checked;
document.getElementById("logfile").checked = true;
}
else if(logfile =="No" || logfile =="no"){
document.getElementById("logfile").checked = false;
}
}
if(summfile =="No" || summfile == "no"){
document.getElementById("summfile").checked = false;
}
if(logfile =="No" || logfile =="no"){
document.getElementById("logfile").checked = false;
}
if(summfile =="No" || summfile == "no" && logfile =="No" || logfile =="no"){
document.getElementById("downOutput").checked = false;
valueChanged();
}
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!"
}
});
</script>
<!--END OF THE SIDEBAR LOGIC-->
<canvas id="canvas"></canvas>
<script type="module" src="/static/js/index.js">
</script>
</center>
</section>
<!-- Signup-->
<section class="signup-section" id="signup">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
</div>
</div>
</div>
</section>
<!-- Contact-->
<section class="contact-section bg-black">
<div class="container">
<div class="row">
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-envelope text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Email</h4>
<hr class="my-4" />
<div class="small text-black-50"><a href="#!">jesse.boog@uconn.edu</a></div>
<div class="small text-black-50"><a href="#!">nhan.nguyen@uconn.edu</a></div>
<div class="small text-black-50"><a href="#!">derek.wood@uconn.edu</a></div>
<div class="small text-black-50"><a href="#!">abhinna.adhikari@uconn.edu</a></div>
<div class="small text-black-50"><a href="#!">yaotian.tang@uconn.edu</a></div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
</div>
</div>
</div>
</div>
<div class="social d-flex justify-content-center">
<a class="mx-2" href="https://github.uconn.edu/dvw16101/CSEGroup22SDP"><i class="fab fa-github"></i></a>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer bg-black small text-center text-white-50"><div class="container">Copyright © UConn CSEGroup22SDP, 2020-2021. All Rights Reserved.</div></footer>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Core theme JS-->
<script src="/static/js/scripts.js"></script>
<script src="static/js/scripts.js"></script>
</body>
</html>