mirror of
https://github.com/MrUnknownDE/utools.git
synced 2026-04-18 21:53:44 +02:00
start with ssl_check
This commit is contained in:
@@ -92,6 +92,7 @@
|
||||
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
|
||||
<li><a href="dns-lookup.html">DNS Lookup</a></li>
|
||||
<li><a href="whois-lookup.html">WHOIS Lookup</a></li>
|
||||
<li><a href="ssl-check.html">SSL Check</a></li> <!-- <-- NEUER LINK -->
|
||||
<!-- REMOVED: MAC Lookup Link -->
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
87
frontend/app/ssl-check.html
Normal file
87
frontend/app/ssl-check.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SSL Certificate Check</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
body { padding-top: 60px; } /* Adjust based on fixed navbar height */
|
||||
.result-box { margin-top: 20px; white-space: pre-wrap; word-wrap: break-word; font-family: monospace; }
|
||||
.loading-spinner { display: none; }
|
||||
.evaluation-summary { font-weight: bold; }
|
||||
.score-bar { height: 20px; background-color: #e9ecef; border-radius: .25rem; overflow: hidden; }
|
||||
.score-bar-inner { height: 100%; background-color: #dc3545; transition: width 0.5s ease-in-out; } /* Start red */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/app/index.html"><i class="fas fa-network-wired"></i> Network Tools</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/app/index.html">IP Info</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/app/dns-lookup.html">DNS Lookup</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/app/whois-lookup.html">WHOIS Lookup</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/app/ssl-check.html">SSL Check</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/app/subnet-calculator.html">Subnet Calculator</a>
|
||||
</li>
|
||||
<!-- Add other tools here -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container mt-4">
|
||||
<h1><i class="fas fa-shield-alt"></i> SSL Certificate Check</h1>
|
||||
<p>Enter a domain name to check its SSL/TLS certificate details and validity.</p>
|
||||
|
||||
<form id="ssl-check-form">
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" id="domain-input" placeholder="e.g., google.com" required>
|
||||
<button class="btn btn-primary" type="submit" id="submit-button">
|
||||
Check Certificate
|
||||
</button>
|
||||
</div>
|
||||
<div class="loading-spinner text-center mt-2">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="result" class="result-box bg-light p-3 rounded border" style="display: none;">
|
||||
<h2>Result for <span id="result-domain" class="fw-bold"></span></h2>
|
||||
<div id="evaluation" class="mb-3">
|
||||
<h4>Evaluation</h4>
|
||||
<div class="score-bar mb-2">
|
||||
<div id="score-bar-inner" class="score-bar-inner"></div>
|
||||
</div>
|
||||
<p>Score: <span id="score-value" class="fw-bold"></span>/10</p>
|
||||
<p class="evaluation-summary" id="evaluation-summary"></p>
|
||||
</div>
|
||||
<div id="certificate-details">
|
||||
<h4>Certificate Details</h4>
|
||||
<pre id="cert-output"></pre>
|
||||
</div>
|
||||
<div id="error-message" class="alert alert-danger" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="/app/ssl-check.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
101
frontend/app/ssl-check.js
Normal file
101
frontend/app/ssl-check.js
Normal file
@@ -0,0 +1,101 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const form = document.getElementById('ssl-check-form');
|
||||
const domainInput = document.getElementById('domain-input');
|
||||
const resultDiv = document.getElementById('result');
|
||||
const resultDomainSpan = document.getElementById('result-domain');
|
||||
const evaluationDiv = document.getElementById('evaluation');
|
||||
const scoreValueSpan = document.getElementById('score-value');
|
||||
const scoreBarInner = document.getElementById('score-bar-inner');
|
||||
const evaluationSummaryP = document.getElementById('evaluation-summary');
|
||||
const certOutputPre = document.getElementById('cert-output');
|
||||
const errorMessageDiv = document.getElementById('error-message');
|
||||
const loadingSpinner = document.querySelector('.loading-spinner');
|
||||
const submitButton = document.getElementById('submit-button');
|
||||
|
||||
form.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
const domain = domainInput.value.trim();
|
||||
|
||||
if (!domain) {
|
||||
showError('Please enter a domain name.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Reset UI
|
||||
hideError();
|
||||
resultDiv.style.display = 'none';
|
||||
loadingSpinner.style.display = 'block';
|
||||
submitButton.disabled = true;
|
||||
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Checking...';
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/ssl-check?domain=${encodeURIComponent(domain)}`);
|
||||
const data = await response.json();
|
||||
|
||||
resultDiv.style.display = 'block';
|
||||
resultDomainSpan.textContent = domain;
|
||||
|
||||
if (!response.ok || data.error) {
|
||||
// Handle API errors (including connection errors, no cert found etc.)
|
||||
const errorDetail = data.details ? ` Details: ${data.details}` : '';
|
||||
showError(data.error || `HTTP error! status: ${response.status}${errorDetail}`);
|
||||
evaluationDiv.style.display = 'none'; // Hide evaluation section on error
|
||||
document.getElementById('certificate-details').style.display = 'none'; // Hide details section
|
||||
} else {
|
||||
// Display successful result
|
||||
evaluationDiv.style.display = 'block';
|
||||
document.getElementById('certificate-details').style.display = 'block';
|
||||
|
||||
// Evaluation
|
||||
scoreValueSpan.textContent = data.evaluation.score;
|
||||
evaluationSummaryP.textContent = data.evaluation.summary;
|
||||
updateScoreBar(data.evaluation.score);
|
||||
|
||||
// Certificate Details (Format for readability)
|
||||
let formattedDetails = `Issuer: ${data.certificate.issuer || 'N/A'}\n`;
|
||||
formattedDetails += `Subject: ${data.certificate.subject || 'N/A'}\n`;
|
||||
formattedDetails += `Valid From: ${data.certificate.validFrom ? new Date(data.certificate.validFrom).toLocaleString() : 'N/A'}\n`;
|
||||
formattedDetails += `Valid To: ${data.certificate.validTo ? new Date(data.certificate.validTo).toLocaleString() : 'N/A'}\n`;
|
||||
formattedDetails += `Validity Status: ${data.certificate.validity || 'N/A'}\n\n`;
|
||||
formattedDetails += `--- Raw OpenSSL Output ---\n${data.certificate.details || 'N/A'}`;
|
||||
certOutputPre.textContent = formattedDetails;
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error);
|
||||
showError(`An error occurred while fetching the certificate details. Check the browser console. Error: ${error.message}`);
|
||||
evaluationDiv.style.display = 'none';
|
||||
document.getElementById('certificate-details').style.display = 'none';
|
||||
} finally {
|
||||
loadingSpinner.style.display = 'none';
|
||||
submitButton.disabled = false;
|
||||
submitButton.innerHTML = 'Check Certificate';
|
||||
}
|
||||
});
|
||||
|
||||
function showError(message) {
|
||||
errorMessageDiv.textContent = message;
|
||||
errorMessageDiv.style.display = 'block';
|
||||
resultDiv.style.display = 'block'; // Show the result box to display the error within it
|
||||
}
|
||||
|
||||
function hideError() {
|
||||
errorMessageDiv.style.display = 'none';
|
||||
errorMessageDiv.textContent = '';
|
||||
}
|
||||
|
||||
function updateScoreBar(score) {
|
||||
const percentage = score * 10; // Score is out of 10
|
||||
scoreBarInner.style.width = `${percentage}%`;
|
||||
|
||||
// Change color based on score
|
||||
if (score >= 8) {
|
||||
scoreBarInner.style.backgroundColor = '#198754'; // Green
|
||||
} else if (score >= 5) {
|
||||
scoreBarInner.style.backgroundColor = '#ffc107'; // Yellow
|
||||
} else {
|
||||
scoreBarInner.style.backgroundColor = '#dc3545'; // Red
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user