hiter
Version:
222 lines (206 loc) • 6.69 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dd.js</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;500&display=swap" rel="stylesheet">
<style>
:root{
--blue : #138AF2;
--dark-blue : #2745F2;
--purple : #C004D9;
}
* {
font-family: 'Ubuntu', sans-serif;
box-sizing: border-box;
margin-bottom: 0;
font-weight: 300;
transition:all ease-in-out 300ms.7
}
input{
border-radius: 0.25rem;
border:1px solid var(--blue);
}
.container{
width: 570px;
margin: 0 auto;
padding-top: 2rem;
}
.row{
display: flex;
align-items: center;
justify-content: start;
margin-bottom: .75rem;
}
.row input[type='url'],
.row input[type='number'],
.row input[type='text']{
width: 100%;
margin-left: 1rem;
}
label{
color:var(--dark-blue);
font-weight: 500;
}
button{
font-size: 1.5rem;
padding:.2rem 2rem;
display: block;
margin:1rem auto;
}
button:hover{
cursor:pointer;
}
button.success[disabled]{
background: darkgray;
}
button.success {
background: var(--blue);
color:white;
border-radius: 1rem;
border:0;
box-shadow: 0 0 .7rem .15rem rgba(0, 0, 0, 0.3);
}
button.danger{
background: var(--purple);
color:white;
border-radius: 1rem;
border:0;
box-shadow: 0 0 .7rem .15rem rgba(0, 0, 0, 0.3);
}
button.danger[disabled]{
background: darkgray;
}
button.sm{
font-size: 1rem;
}
button.outline {
background: transparent;
color: var(--blue);
border: 2px solid var(--blue);
}
.key {
color: var(--blue);
text-transform: capitalize;
}
</style>
</head>
<body>
<div id="loading">
loading ...
</div>
<div id="app" style="display: none;">
<div class="container">
<div class="form">
<div class="row">
<label>Target:</label>
<input class="" v-model="target" type="url" placeholder="target url with *">
</div>
<div class="row">
<label>Concurrent:</label>
<input class="" v-model="parallel" type="number" placeholder="active connections number">
</div>
<div class="row">
<label>Method:</label>
<input v-model="method" type="radio" id="get" name="get" value="get" checked>
<label for="get">GET</label>
<input v-model="method" type="radio" id="post" name="post" value="post">
<label for="post">POST</label>
</div>
<div class="row" v-if="method === 'post'">
<label>Payload:</label>
<input type="text" v-model="payload"/>
</div>
<button class="success" v-if="!running" :disabled="loading || !hasTarget && !target" @click="startAttack">Start</button>
<button class="danger " v-if="running" :disabled="loading" @click="stopAttack">Stop</button>
</div>
<div class="stats">
<template v-for="(val,key) in stats">
<p v-if="val">
<span class="key">{{ formatStat(key) }}</span> : <span class="value"> {{ val }}</span>
</p>
</template>
<button class="success outline sm"
v-if="stats" @click="resetStats"
:disabled="loading"
>
Reset Stats
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"
integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ=="
crossorigin="anonymous"></script>
<script>
const elLoading = document.getElementById('loading');
const elApp = document.getElementById('app');
elLoading.parentElement.removeChild(elLoading);
elApp.style.display = 'block';
const app = new Vue({
el: '#app',
data: {
target: '',
method: 'get',
parallel: 8,
payload: null,
stats: null,
loading: false,
},
async mounted() {
let updateStats = async function () {
const {data: {stats}} = await axios.get('/stats');
this.stats = stats;
}.bind(this);
updateStats();
setInterval(updateStats, 1000);
},
computed: {
running() {
return this.stats && this.stats.running;
},
hasTarget() {
return this.stats && this.stats.target
}
},
methods: {
startAttack() {
console.log('start attack');
this.loading = true;
axios.post('/start', {
target: this.target,
method: this.method,
parallel: this.parallel,
payload: this.payload
})
.finally(() => {
this.loading = false;
})
},
stopAttack() {
this.loading = true;
axios.get('/stop')
.finally(() => {
this.loading = false;
})
},
formatStat(val) {
return String(val).replaceAll('_', ' ')
},
resetStats(){
this.loading = true;
axios.get('/reset')
.finally(() => {
this.loading = false;
})
}
}
})
</script>
</body>
</html>