Richard
246 lines
11 KiB
HTML
246 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Anmelden bei Ihrem Konto</title>
|
||
<!--
|
||
============================================================================
|
||
SCHULUNGS-DEMO – PHISHING-AWARENESS
|
||
----------------------------------------------------------------------------
|
||
Diese Seite IMITIERT optisch einen Microsoft-Login, ist aber bewusst
|
||
HARMLOS gebaut:
|
||
* Es werden KEINE Daten gespeichert, gesendet oder weitergeleitet.
|
||
* Es gibt KEINE Verbindung zu Microsoft und KEINEN echten Login.
|
||
* Alle Eingaben bleiben ausschliesslich lokal im Browser und werden
|
||
nach der Demo dem Teilnehmer zu Aufklaerungszwecken angezeigt.
|
||
Verwendung nur in Schulungen mit Einwilligung der Teilnehmenden.
|
||
============================================================================
|
||
-->
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
html, body { height: 100%; margin: 0; }
|
||
body {
|
||
font-family: "Segoe UI", "Segoe UI Web", Arial, sans-serif;
|
||
color: #1b1b1b;
|
||
background: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
min-height: 100%;
|
||
/* Microsoft-typischer heller Verlauf-Hintergrund */
|
||
background-image: linear-gradient(rgba(255,255,255,0.0), rgba(255,255,255,0.0));
|
||
}
|
||
/* Schulungs-Banner */
|
||
#demoBanner {
|
||
position: fixed; top: 0; left: 0; right: 0;
|
||
background: #ffb900; color: #1b1b1b;
|
||
font-size: 13px; font-weight: 600; text-align: center;
|
||
padding: 6px 12px; z-index: 1000;
|
||
border-bottom: 2px solid #d29200;
|
||
}
|
||
.card {
|
||
width: 440px; max-width: 96vw;
|
||
background: #fff;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||
padding: 44px 44px 36px;
|
||
position: relative;
|
||
}
|
||
.logo { display: flex; align-items: center; margin-bottom: 16px; }
|
||
.logo svg { width: 24px; height: 24px; margin-right: 6px; }
|
||
.logo span { font-size: 15px; color: #5e5e5e; font-weight: 600; }
|
||
h1 { font-size: 24px; font-weight: 600; margin: 8px 0 4px; }
|
||
.sub { font-size: 15px; margin: 0 0 12px; }
|
||
.field { width: 100%; border: none; border-bottom: 1px solid #666;
|
||
font-size: 15px; padding: 6px 0; outline: none; margin: 6px 0 4px; }
|
||
.field:focus { border-bottom: 2px solid #0067b8; }
|
||
.row-actions { display: flex; justify-content: flex-end; margin-top: 24px; }
|
||
.links { font-size: 13px; margin: 16px 0 0; }
|
||
.links a { color: #0067b8; text-decoration: none; }
|
||
.links a:hover { text-decoration: underline; }
|
||
.btn {
|
||
background: #0067b8; color: #fff; border: none;
|
||
font-size: 15px; min-width: 108px; height: 32px; cursor: pointer;
|
||
}
|
||
.btn:hover { background: #005da6; }
|
||
.btn.secondary { background: #eaeaea; color: #1b1b1b; margin-right: 8px; }
|
||
.btn.secondary:hover { background: #dcdcdc; }
|
||
.back { font-size: 13px; color: #1b1b1b; margin-bottom: 12px; display: flex; align-items: center; }
|
||
.acct { font-size: 15px; margin: 4px 0 16px; color: #1b1b1b; }
|
||
.hint { font-size: 13px; color: #666; margin: 8px 0 0; }
|
||
.step { display: none; }
|
||
.step.active { display: block; }
|
||
.footer {
|
||
position: fixed; bottom: 0; right: 0;
|
||
font-size: 12px; color: #666; padding: 10px 18px;
|
||
}
|
||
.footer a { color: #666; text-decoration: none; margin-left: 18px; }
|
||
|
||
/* Aufklaerungs-Screen */
|
||
#reveal { width: 620px; max-width: 96vw; display: none; }
|
||
#reveal .card2 {
|
||
background: #fff; border: 2px solid #c0392b;
|
||
box-shadow: 0 4px 14px rgba(0,0,0,0.18); padding: 32px;
|
||
}
|
||
#reveal h2 { color: #c0392b; margin-top: 0; font-size: 26px; }
|
||
#reveal .captured {
|
||
background: #faf2f2; border-left: 4px solid #c0392b;
|
||
padding: 14px 16px; font-family: Consolas, "Courier New", monospace;
|
||
font-size: 14px; margin: 16px 0; word-break: break-all;
|
||
}
|
||
#reveal ul { font-size: 15px; line-height: 1.55; }
|
||
#reveal .restart { background:#0067b8; color:#fff; border:none; padding:8px 18px;
|
||
font-size:14px; cursor:pointer; margin-top:8px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="demoBanner">⚠️ SCHULUNGS-DEMO – Nachgebauter Login zu Awareness-Zwecken. Es werden KEINE Daten gespeichert oder gesendet. Keine echte Microsoft-Seite.</div>
|
||
|
||
<!-- ===================== LOGIN-NACHBAU ===================== -->
|
||
<div class="card" id="loginCard">
|
||
<div class="logo">
|
||
<svg viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
<rect x="1" y="1" width="10" height="10" fill="#f25022"/>
|
||
<rect x="12" y="1" width="10" height="10" fill="#7fba00"/>
|
||
<rect x="1" y="12" width="10" height="10" fill="#00a4ef"/>
|
||
<rect x="12" y="12" width="10" height="10" fill="#ffb900"/>
|
||
</svg>
|
||
<span>Microsoft</span>
|
||
</div>
|
||
|
||
<!-- Schritt 1: E-Mail -->
|
||
<div class="step active" id="step-email">
|
||
<h1>Anmelden</h1>
|
||
<input class="field" id="email" type="text" placeholder="E-Mail, Telefon oder Skype" autocomplete="off">
|
||
<p class="links">Kein Konto? <a href="#" onclick="return false;">Erstellen Sie jetzt eins!</a></p>
|
||
<p class="links"><a href="#" onclick="return false;">Sie können nicht auf Ihr Konto zugreifen?</a></p>
|
||
<div class="row-actions">
|
||
<button class="btn" id="toPw">Weiter</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Schritt 2: Passwort -->
|
||
<div class="step" id="step-pw">
|
||
<div class="back">‹ <span id="acctShow" style="margin-left:6px;"></span></div>
|
||
<h1>Kennwort eingeben</h1>
|
||
<input class="field" id="password" type="password" placeholder="Kennwort" autocomplete="off">
|
||
<p class="links"><a href="#" onclick="return false;">Kennwort vergessen</a></p>
|
||
<div class="row-actions">
|
||
<button class="btn" id="toMfa">Anmelden</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Schritt 3: Zweiter Faktor -->
|
||
<div class="step" id="step-mfa">
|
||
<div class="logo" style="margin-bottom:8px;">
|
||
<svg viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
<rect x="1" y="1" width="10" height="10" fill="#f25022"/>
|
||
<rect x="12" y="1" width="10" height="10" fill="#7fba00"/>
|
||
<rect x="1" y="12" width="10" height="10" fill="#00a4ef"/>
|
||
<rect x="12" y="12" width="10" height="10" fill="#ffb900"/>
|
||
</svg>
|
||
</div>
|
||
<p class="acct" id="acctShow2"></p>
|
||
<h1>Code eingeben</h1>
|
||
<p class="sub">Geben Sie den Code aus Ihrer Authenticator-App ein.</p>
|
||
<input class="field" id="otp" type="text" inputmode="numeric" placeholder="Code" autocomplete="off" maxlength="8">
|
||
<div class="row-actions">
|
||
<button class="btn" id="finish">Überprüfen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== AUFKLAERUNGS-SCREEN ===================== -->
|
||
<div id="reveal">
|
||
<div class="card2">
|
||
<h2>Stopp – das war eine Phishing-Simulation</h2>
|
||
<p>Hätten Sie das auf einer echten Angreiferseite getan, besäße der Angreifer jetzt:</p>
|
||
<div class="captured" id="capturedBox"></div>
|
||
<p><strong>Worauf hätten Sie achten können?</strong></p>
|
||
<ul>
|
||
<li><strong>Die Adresszeile (URL):</strong> Der echte Login läuft nur über <em>login.microsoftonline.com</em> / <em>login.live.com</em> – niemals über eine fremde Domain.</li>
|
||
<li><strong>Unerwartete Aufforderung:</strong> Eine Mail/SMS, die Sie zur Anmeldung drängt, ist verdächtig – besonders bei Zeitdruck.</li>
|
||
<li><strong>Auch MFA schützt nicht immer:</strong> Moderne Angriffe leiten Ihren Code in Echtzeit weiter. Deshalb zählt, gar nicht erst Daten einzugeben.</li>
|
||
<li><strong>Phishing-resistente Verfahren:</strong> Passkeys / FIDO2-Sicherheitsschlüssel lassen sich nicht über gefälschte Seiten abgreifen.</li>
|
||
</ul>
|
||
<p>Im Zweifel: Seite schließen, URL selbst eintippen oder Lesezeichen nutzen, und die IT informieren.</p>
|
||
<button class="restart" id="restart">Demo zurücksetzen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<a href="#" onclick="return false;">Nutzungsbedingungen</a>
|
||
<a href="#" onclick="return false;">Datenschutz & Cookies</a>
|
||
</div>
|
||
|
||
<script>
|
||
/* ----------------------------------------------------------------------------
|
||
WICHTIG: Diese Demo sendet bewusst NICHTS. Es gibt keinen fetch/XHR/Submit
|
||
nach aussen. Eingaben bleiben in JS-Variablen und werden nur lokal zur
|
||
Aufklaerung angezeigt. So ist die Seite als Angriffswerkzeug unbrauchbar.
|
||
---------------------------------------------------------------------------- */
|
||
(function () {
|
||
var data = { email: "", password: "", otp: "" };
|
||
|
||
function show(stepId) {
|
||
document.querySelectorAll('.step').forEach(function (s) { s.classList.remove('active'); });
|
||
document.getElementById(stepId).classList.add('active');
|
||
}
|
||
|
||
document.getElementById('toPw').addEventListener('click', function () {
|
||
var v = document.getElementById('email').value.trim();
|
||
if (!v) { document.getElementById('email').focus(); return; }
|
||
data.email = v;
|
||
document.getElementById('acctShow').textContent = v;
|
||
document.getElementById('acctShow2').textContent = v;
|
||
show('step-pw');
|
||
document.getElementById('password').focus();
|
||
});
|
||
|
||
document.getElementById('toMfa').addEventListener('click', function () {
|
||
var v = document.getElementById('password').value;
|
||
if (!v) { document.getElementById('password').focus(); return; }
|
||
data.password = v;
|
||
show('step-mfa');
|
||
document.getElementById('otp').focus();
|
||
});
|
||
|
||
document.getElementById('finish').addEventListener('click', function () {
|
||
data.otp = document.getElementById('otp').value.trim();
|
||
// Keine Validierung, kein Versand – direkt zum Aufklaerungs-Screen.
|
||
var masked = data.password.length ? data.password[0] + '•'.repeat(Math.max(0, data.password.length - 1)) : '(leer)';
|
||
document.getElementById('capturedBox').innerHTML =
|
||
'Benutzername: ' + escapeHtml(data.email) + '<br>' +
|
||
'Kennwort: ' + escapeHtml(data.password) + ' (vollständig erfasst)<br>' +
|
||
'MFA-Code: ' + escapeHtml(data.otp || '(leer)');
|
||
document.getElementById('loginCard').style.display = 'none';
|
||
document.querySelector('.footer').style.display = 'none';
|
||
document.getElementById('reveal').style.display = 'block';
|
||
});
|
||
|
||
document.getElementById('restart').addEventListener('click', function () {
|
||
data = { email: "", password: "", otp: "" };
|
||
document.getElementById('email').value = '';
|
||
document.getElementById('password').value = '';
|
||
document.getElementById('otp').value = '';
|
||
document.getElementById('reveal').style.display = 'none';
|
||
document.getElementById('loginCard').style.display = 'block';
|
||
document.querySelector('.footer').style.display = 'block';
|
||
show('step-email');
|
||
document.getElementById('email').focus();
|
||
});
|
||
|
||
// Enter-Taste je Schritt
|
||
document.getElementById('email').addEventListener('keydown', function (e) { if (e.key === 'Enter') document.getElementById('toPw').click(); });
|
||
document.getElementById('password').addEventListener('keydown', function (e) { if (e.key === 'Enter') document.getElementById('toMfa').click(); });
|
||
document.getElementById('otp').addEventListener('keydown', function (e) { if (e.key === 'Enter') document.getElementById('finish').click(); });
|
||
|
||
function escapeHtml(s) {
|
||
return String(s).replace(/[&<>"']/g, function (c) {
|
||
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
|
||
});
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|