reqweb
Version:
A powerful Web Application Firewall (WAF) for Node.js.
238 lines (214 loc) • 13.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReqWeb WAF Dashboard</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container py-5">
<header class="mb-4 text-center">
<h1>ReqWeb WAF Dashboard</h1>
<p class="lead">Manage and configure your Web Application Firewall.</p>
</header>
<!-- Configuration Form -->
<form id="configForm" class="bg-white p-4 rounded shadow-sm">
<h2 class="mb-4">Configuration</h2>
<!-- IP Filtering -->
<div class="mb-3">
<h4>IP Filtering</h4>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="ipFilteringEnabled">
<label class="form-check-label" for="ipFilteringEnabled">Enable IP Filtering</label>
</div>
<label for="allowedIps" class="form-label mt-2">Allowed IPs (one per line):</label>
<textarea class="form-control" id="allowedIps" rows="3"></textarea>
<label for="blockedIps" class="form-label mt-2">Blocked IPs (one per line):</label>
<textarea class="form-control" id="blockedIps" rows="3"></textarea>
<label for="maxRequestsPerMinute" class="form-label mt-2">Max Requests Per Minute:</label>
<input type="number" class="form-control" id="maxRequestsPerMinute">
<label for="banDuration" class="form-label mt-2">Ban Duration (seconds):</label>
<input type="number" class="form-control" id="banDuration">
</div>
<hr>
<!-- Rate Limiting -->
<div class="mb-3">
<h4>Rate Limiting</h4>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="rateLimitingEnabled">
<label class="form-check-label" for="rateLimitingEnabled">Enable Rate Limiting</label>
</div>
<label for="maxRequests" class="form-label mt-2">Max Requests:</label>
<input type="number" class="form-control" id="maxRequests">
<label for="timeWindow" class="form-label mt-2">Time Window (ms):</label>
<input type="number" class="form-control" id="timeWindow">
<label for="rateBanDuration" class="form-label mt-2">Ban Duration (ms):</label>
<input type="number" class="form-control" id="rateBanDuration">
</div>
<hr>
<!-- Request Blocking -->
<div class="mb-3">
<h4>Request Blocking</h4>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="requestBlockingEnabled">
<label class="form-check-label" for="requestBlockingEnabled">Enable Request Blocking</label>
</div>
<label for="rules" class="form-label mt-2">Rules:</label>
<textarea class="form-control" id="rules" rows="5" placeholder="Enter rules in JSON format"></textarea>
</div>
<hr>
<!-- Logging -->
<div class="mb-3">
<h4>Logging</h4>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="loggingEnabled">
<label class="form-check-label" for="loggingEnabled">Enable Logging</label>
</div>
<label for="logLevel" class="form-label mt-2">Log Level:</label>
<select class="form-select" id="logLevel">
<option value="info">Info</option>
<option value="warn">Warn</option>
<option value="error">Error</option>
</select>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="logToFile">
<label class="form-check-label" for="logToFile">Log to File</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="logToConsole">
<label class="form-check-label" for="logToConsole">Log to Console</label>
</div>
</div>
<hr>
<!-- Alerting -->
<div class="mb-3">
<h4>Alerting</h4>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="alertingEnabled">
<label class="form-check-label" for="alertingEnabled">Enable Alerting</label>
</div>
<label for="alertLevel" class="form-label mt-2">Alert Level:</label>
<select class="form-select" id="alertLevel">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
<label for="email" class="form-label mt-2">Alert Email:</label>
<input type="email" class="form-control" id="email">
<label for="sms" class="form-label mt-2">Alert SMS:</label>
<input type="text" class="form-control" id="sms">
<label for="alertThreshold" class="form-label mt-2">Alert Threshold:</label>
<input type="number" class="form-control" id="alertThreshold">
</div>
<hr>
<!-- General -->
<div class="mb-3">
<h4>General</h4>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="blockOnBreach">
<label class="form-check-label" for="blockOnBreach">Block on Breach</label>
</div>
<label for="maxRequestSize" class="form-label mt-2">Max Request Size (bytes):</label>
<input type="number" class="form-control" id="maxRequestSize">
<label for="requestTimeout" class="form-label mt-2">Request Timeout (ms):</label>
<input type="number" class="form-control" id="requestTimeout">
</div>
<button type="submit" class="btn btn-primary mt-3">Save Configuration</button>
</form>
</div>
<!-- Bootstrap JS and Axios -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
document.getElementById('configForm').addEventListener('submit', async (e) => {
e.preventDefault();
const config = {
ipFiltering: {
enabled: document.getElementById('ipFilteringEnabled').checked,
allowedIps: document.getElementById('allowedIps').value.split('\n').filter(ip => ip.trim() !== ''),
blockedIps: document.getElementById('blockedIps').value.split('\n').filter(ip => ip.trim() !== ''),
maxRequestsPerMinute: parseInt(document.getElementById('maxRequestsPerMinute').value, 10) || 0,
banDuration: parseInt(document.getElementById('banDuration').value, 10) || 0
},
rateLimiting: {
enabled: document.getElementById('rateLimitingEnabled').checked,
maxRequests: parseInt(document.getElementById('maxRequests').value, 10) || 0,
timeWindow: parseInt(document.getElementById('timeWindow').value, 10) || 0,
banDuration: parseInt(document.getElementById('rateBanDuration').value, 10) || 0
},
requestBlocking: {
enabled: document.getElementById('requestBlockingEnabled').checked,
rules: JSON.parse(document.getElementById('rules').value || '[]') // Assumes rules are entered in JSON format
},
logging: {
enabled: document.getElementById('loggingEnabled').checked,
logLevel: document.getElementById('logLevel').value,
logToFile: document.getElementById('logToFile').checked,
logToConsole: document.getElementById('logToConsole').checked
},
alerting: {
enabled: document.getElementById('alertingEnabled').checked,
alertLevel: document.getElementById('alertLevel').value,
email: document.getElementById('email').value,
sms: document.getElementById('sms').value,
alertThreshold: parseInt(document.getElementById('alertThreshold').value, 10) || 0
},
general: {
blockOnBreach: document.getElementById('blockOnBreach').checked,
maxRequestSize: parseInt(document.getElementById('maxRequestSize').value, 10) || 0,
requestTimeout: parseInt(document.getElementById('requestTimeout').value, 10) || 0
}
};
try {
const response = await axios.post('/reqweb/api/config', config);
alert(response.data.message || 'Configuration saved successfully!');
} catch (error) {
console.error('Error saving configuration:', error);
alert('Failed to save configuration. Please try again.');
}
});
// Dynamically fetch and populate form with existing configuration on page load
document.addEventListener('DOMContentLoaded', async () => {
try {
const response = await axios.get('/reqweb/api/config');
const config = response.data;
console.log(JSON.stringify(config))
// Populate IP Filtering
document.getElementById('ipFilteringEnabled').checked = config.config.ipFiltering.enabled;
document.getElementById('allowedIps').value = config.config.ipFiltering.allowedIps.join('\n');
document.getElementById('blockedIps').value = config.config.ipFiltering.blockedIps.join('\n');
document.getElementById('maxRequestsPerMinute').value = config.config.ipFiltering.maxRequestsPerMinute || '';
document.getElementById('banDuration').value = config.config.ipFiltering.banDuration || '';
// Populate Rate Limiting
document.getElementById('rateLimitingEnabled').checked = config.config.rateLimiting.enabled;
document.getElementById('maxRequests').value = config.config.rateLimiting.maxRequests || '';
document.getElementById('timeWindow').value = config.config.rateLimiting.timeWindow || '';
document.getElementById('rateBanDuration').value = config.config.rateLimiting.banDuration || '';
// Populate Request Blocking
document.getElementById('requestBlockingEnabled').checked = config.config.requestBlocking.enabled;
document.getElementById('rules').value = JSON.stringify(config.config.requestBlocking.rules, null, 2);
// Populate Logging
document.getElementById('loggingEnabled').checked = config.config.logging.enabled;
document.getElementById('logLevel').value = config.config.logging.logLevel;
document.getElementById('logToFile').checked = config.config.logging.logToFile;
document.getElementById('logToConsole').checked = config.config.logging.logToConsole;
// Populate Alerting
document.getElementById('alertingEnabled').checked = config.config.alerting.enabled;
document.getElementById('alertLevel').value = config.config.alerting.alertLevel;
document.getElementById('email').value = config.config.alerting.email;
document.getElementById('sms').value = config.config.alerting.sms;
document.getElementById('alertThreshold').value = config.config.alerting.alertThreshold || '';
// Populate General
document.getElementById('blockOnBreach').checked = config.config.general.blockOnBreach;
document.getElementById('maxRequestSize').value = config.config.general.maxRequestSize || '';
document.getElementById('requestTimeout').value = config.config.general.requestTimeout || '';
} catch (error) {
console.error('Error fetching configuration:', error);
alert('Failed to load configuration. Please try again.');
}
});
</script>
</body>
</html>