118 lines
5.2 KiB
JavaScript
118 lines
5.2 KiB
JavaScript
/**
|
|
* 🛡️ IHK DSGVO & TOMS-KLASSIFIZIERER 🛡️
|
|
* =====================================
|
|
* Interaktiver Zuordnungs-Trainer für AP1 (LF 1 & LF 4) & AP2 (LF 11):
|
|
* - Die 8 klassischen technisch-organisatorischen Maßnahmen (BDSG / DSGVO)
|
|
* - Fallstudien & Praxisbeispiele mit Sofort-Feedback
|
|
*/
|
|
|
|
class TomsMatcher {
|
|
constructor(containerId) {
|
|
this.container = document.getElementById(containerId);
|
|
this.categories = [
|
|
{ id: "zutritt", name: "1. Zutrittskontrolle (Räume/Gebäude)" },
|
|
{ id: "zugang", name: "2. Zugangskontrolle (Systemanmeldung)" },
|
|
{ id: "zugriff", name: "3. Zugriffskontrolle (Berechtigungen auf Daten)" },
|
|
{ id: "weitergabe", name: "4. Weitergabekontrolle (Transport & Übertragung)" },
|
|
{ id: "eingabe", name: "5. Eingabekontrolle (Protokollierung & Audit)" },
|
|
{ id: "auftrag", name: "6. Auftragskontrolle (AVV & Weisung)" },
|
|
{ id: "verfuegbarkeit", name: "7. Verfügbarkeitskontrolle (Backups & USV)" },
|
|
{ id: "trennung", name: "8. Trennungskontrolle (Zweckbindung & Testdaten)" }
|
|
];
|
|
|
|
this.scenarios = [
|
|
{ text: "Serverraumtür mit elektronischem RFID-Chip und Vereinzelungsschleuse", target: "zutritt" },
|
|
{ text: "Erzwingen von Multi-Faktor-Authentifizierung (MFA) für alle Windows-Logins", target: "zugang" },
|
|
{ text: "Vergabe von NTFS-Rechten nach dem Least-Privilege-Prinzip auf Abteilungsordner", target: "zugriff" },
|
|
{ text: "Ende-zu-Ende-Verschlüsselung von E-Mails via S/MIME und TLS-Tunnel", target: "weitergabe" },
|
|
{ text: "Zentrales SIEM-Logfile protokolliert das Ändern und Löschen von Kundendatensätzen", target: "eingabe" },
|
|
{ text: "Abschluss eines Auftragsverarbeitungsvertrages (AVV) mit einem Cloud-Hosting-Dienstleister", target: "auftrag" },
|
|
{ text: "Installation einer USV-Anlage und tägliche Auslagerung von Backups in ein zweites Brandabteil", target: "verfuegbarkeit" },
|
|
{ text: "Strikte Trennung von Entwicklungs-, Test- und Produktivsystemen", target: "trennung" }
|
|
];
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
if (!this.container) return;
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
this.container.innerHTML = `
|
|
<div class="ihk-tool-card">
|
|
<div class="ihk-tool-header">
|
|
<div class="ihk-tool-title">
|
|
<span>🛡️</span> IHK DSGVO & TOMs-Klassifizierer (LF 4 & LF 11)
|
|
</div>
|
|
<div>
|
|
<span class="ihk-badge">8 IHK-Kernkategorien</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="color: #94a3b8; font-size: 0.9rem; margin-top: 0;">
|
|
Ordne die folgenden 8 typischen IHK-Praxismaßnahmen der jeweils exakt zutreffenden technisch-organisatorischen Maßnahme (TOM) zu:
|
|
</p>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;">
|
|
${this.scenarios.map((s, idx) => `
|
|
<div style="background: #0f172a; padding: 12px 16px; border-radius: 8px; border: 1px solid #334155; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;">
|
|
<div style="flex: 1; font-size: 0.95rem; color: #f8fafc;">
|
|
<strong>Fall ${idx + 1}:</strong> ${s.text}
|
|
</div>
|
|
<div style="width: 280px;">
|
|
<select class="ihk-select tom-select" data-idx="${idx}">
|
|
<option value="">-- Maßnahme wählen --</option>
|
|
${this.categories.map(c => `<option value="${c.id}">${c.name}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 12px;">
|
|
<button class="ihk-btn ihk-btn-success" id="btn-check-toms">✓ Zuordnungen prüfen</button>
|
|
<button class="ihk-btn ihk-btn-secondary" id="btn-reset-toms">Zurücksetzen</button>
|
|
</div>
|
|
|
|
<div id="toms-result" class="ihk-result-box"></div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById("btn-check-toms").addEventListener("click", () => this.check());
|
|
document.getElementById("btn-reset-toms").addEventListener("click", () => this.render());
|
|
}
|
|
|
|
check() {
|
|
const selects = this.container.querySelectorAll(".tom-select");
|
|
let correct = 0;
|
|
|
|
selects.forEach((sel, idx) => {
|
|
const target = this.scenarios[idx].target;
|
|
const val = sel.value;
|
|
if (val === target) {
|
|
correct++;
|
|
sel.style.borderColor = "#4ade80";
|
|
sel.style.background = "rgba(34, 197, 94, 0.15)";
|
|
} else {
|
|
sel.style.borderColor = "#f87171";
|
|
sel.style.background = "rgba(239, 68, 68, 0.15)";
|
|
}
|
|
});
|
|
|
|
const resBox = document.getElementById("toms-result");
|
|
const allRight = correct === this.scenarios.length;
|
|
resBox.innerHTML = `
|
|
<h4 style="color: ${allRight ? '#4ade80' : '#f87171'}; margin-top: 0;">
|
|
${allRight ? '🎉 Perfekt! Alle 8 TOMs exakt zugeordnet.' : `${correct} von ${this.scenarios.length} Maßnahmen richtig zugeordnet.`}
|
|
</h4>
|
|
<p style="color: #94a3b8; font-size: 0.9rem;">
|
|
<strong>IHK-Merksatz:</strong> Zutritt = Räumlich/Physisch | Zugang = Am System einloggen | Zugriff = Innerhalb des Systems Dateien/Ordner lesen/ändern.
|
|
</p>
|
|
`;
|
|
resBox.classList.add("active");
|
|
}
|
|
}
|
|
|
|
window.TomsMatcher = TomsMatcher;
|