nis2-agile/docs/nis2/incidente_r01/incident-notification.html
DevEnv nis2-agile 5c545ea3d0 [FEAT] Integrazione analisi docs/nis2 v1.7.0 — scoring asset, tassonomia incidenti, PIR, NIST CSF, fonti certe
Fase 1 - Asset Relevance Scoring NIS2 (GV.OC-04): metodologia 0-100 a 6 criteri,
  AssetScoringService + endpoint scoringGrid/score/relevantSystems + UI assets.html + registro stampabile.
Fase 2 - Tassonomia incidenti Determina ACN 164179/2025: IS-1..4 + regime essenziale/importante (Allegati 3/4).
Fase 3 - Post-Incident Review (5-Whys) + metriche TTD/TTC/TTR + timestamp di fase.
Fase 4 - Mapping NIST CSF 2.0 (43 controlli) reference-only.
Fonti certe: registry config/nis2_sources.php + grounding AI (vieta riferimenti inventati) +
  citazioni help.js + ingest PDF normativi nella KB RAG (scripts/ingest-nis2-sources.php).
Migrazioni 020/021/022 (additive idempotenti). Fix VectorService IP Qdrant (drift .5->.3).
Analisi concorrenza Evix (docs/EVIX_ANALISI_CONCORRENZA.html, gap-driven).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-05-29 17:15:13 +02:00

759 lines
30 KiB
HTML

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notifiche CSIRT - INC-2024-047</title>
<style>
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #1c2128;
--border-color: #30363d;
--text-primary: #c9d1d9;
--text-secondary: #8b949e;
--accent-primary: #58a6ff;
--accent-secondary: #1f6feb;
--success: #3fb950;
--warning: #d29922;
--danger: #f85149;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-y: auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
padding: 24px 0;
margin-bottom: 32px;
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
}
.breadcrumb {
font-size: 13px;
color: var(--text-secondary);
margin-top: 4px;
}
.breadcrumb a {
color: var(--accent-primary);
text-decoration: none;
}
.btn {
padding: 8px 16px;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-primary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
}
.btn:hover {
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.btn-primary {
background-color: var(--accent-primary);
border-color: var(--accent-primary);
color: white;
}
.btn-primary:hover {
background-color: var(--accent-secondary);
color: white;
}
.btn-danger {
background-color: var(--danger);
border-color: var(--danger);
color: white;
}
.btn-danger:hover {
background-color: #dc2626;
}
.alert-box {
background-color: rgba(210, 153, 34, 0.1);
border: 1px solid var(--warning);
border-left: 4px solid var(--warning);
border-radius: 6px;
padding: 20px;
margin-bottom: 24px;
}
.alert-box.danger {
background-color: rgba(248, 81, 73, 0.1);
border-color: var(--danger);
border-left-color: var(--danger);
}
.alert-box.success {
background-color: rgba(63, 185, 80, 0.1);
border-color: var(--success);
border-left-color: var(--success);
}
.alert-title {
font-weight: 600;
margin-bottom: 8px;
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.alert-content {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
}
.section {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 24px;
margin-bottom: 24px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
}
.section-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.timeline-horizontal {
display: flex;
justify-content: space-between;
margin-bottom: 32px;
position: relative;
}
.timeline-horizontal::before {
content: '';
position: absolute;
top: 20px;
left: 0;
right: 0;
height: 2px;
background: var(--border-color);
z-index: 0;
}
.timeline-step {
flex: 1;
text-align: center;
position: relative;
z-index: 1;
}
.timeline-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-tertiary);
border: 2px solid var(--border-color);
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
}
.timeline-step.completed .timeline-circle {
background: var(--success);
border-color: var(--success);
color: white;
}
.timeline-step.active .timeline-circle {
background: var(--warning);
border-color: var(--warning);
color: white;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(210, 153, 34, 0.7); }
50% { box-shadow: 0 0 0 10px rgba(210, 153, 34, 0); }
}
.timeline-label {
font-size: 12px;
color: var(--text-secondary);
font-weight: 600;
margin-bottom: 4px;
}
.timeline-deadline {
font-size: 11px;
color: var(--text-secondary);
}
.timeline-step.completed .timeline-label,
.timeline-step.active .timeline-label {
color: var(--text-primary);
}
.form-section {
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 20px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 10px 12px;
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-primary);
font-size: 14px;
font-family: inherit;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: var(--accent-primary);
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
.form-help {
font-size: 12px;
color: var(--text-secondary);
margin-top: 6px;
}
.info-box {
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 16px;
margin-bottom: 16px;
}
.info-box-title {
font-weight: 600;
color: var(--accent-primary);
margin-bottom: 8px;
font-size: 13px;
}
.info-box-content {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.data-table th {
background-color: var(--bg-primary);
color: var(--text-secondary);
font-weight: 600;
text-align: left;
padding: 10px 12px;
border: 1px solid var(--border-color);
font-size: 11px;
text-transform: uppercase;
}
.data-table td {
padding: 10px 12px;
border: 1px solid var(--border-color);
color: var(--text-primary);
}
@media (max-width: 768px) {
.timeline-horizontal {
flex-direction: column;
}
.timeline-horizontal::before {
display: none;
}
.timeline-step {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
text-align: left;
}
.timeline-circle {
margin: 0;
}
}
</style>
</head>
<body>
<div class="header">
<div class="header-content">
<div>
<h1>📡 Notifiche CSIRT Italia - INC-2024-047</h1>
<div class="breadcrumb">
<a href="dashboard.html">Dashboard NIS2</a> /
<a href="incident-dashboard.html">Gestione Incidenti</a> /
<a href="incident-detail.html?id=INC-2024-047">INC-2024-047</a> /
Notifiche CSIRT
</div>
</div>
<a href="incident-detail.html?id=INC-2024-047" class="btn">← Torna all'Incidente</a>
</div>
</div>
<div class="container">
<!-- Alert Scadenza -->
<div class="alert-box danger">
<div class="alert-title">
⏰ Scadenza Imminente - Preallarme CSIRT
</div>
<div class="alert-content">
Il <strong>preallarme</strong> deve essere inviato al CSIRT Italia entro <strong>24 ore</strong> dalla conoscenza dell'incidente significativo.<br>
<strong>Scadenza:</strong> 2024-03-07 08:15 (rimangono <span style="color: var(--danger); font-weight: 700;">18 ore</span>)<br>
<strong>Canale:</strong> Portale CSIRT Italia (https://www.csirt.gov.it) o PEC dedicata
</div>
</div>
<!-- Timeline Notifiche -->
<div class="timeline-horizontal">
<div class="timeline-step active">
<div class="timeline-circle">1</div>
<div class="timeline-label">Preallarme</div>
<div class="timeline-deadline">Entro 24h</div>
</div>
<div class="timeline-step">
<div class="timeline-circle">2</div>
<div class="timeline-label">Notifica Completa</div>
<div class="timeline-deadline">Entro 72h</div>
</div>
<div class="timeline-step">
<div class="timeline-circle">3</div>
<div class="timeline-label">Relazioni Intermedie</div>
<div class="timeline-deadline">Su richiesta</div>
</div>
<div class="timeline-step">
<div class="timeline-circle">4</div>
<div class="timeline-label">Relazione Finale</div>
<div class="timeline-deadline">Entro 1 mese</div>
</div>
</div>
<!-- Sezione Preallarme -->
<div class="section">
<div class="section-header">
<div class="section-title">1. Preallarme (Entro 24 ore)</div>
</div>
<div class="info-box">
<div class="info-box-title">📋 Contenuto Minimo Preallarme</div>
<div class="info-box-content">
<ul style="margin-left: 20px; margin-top: 8px;">
<li>Se l'incidente è presumibilmente causato da atti illegittimi o malevoli</li>
<li>Se può avere impatto transfrontaliero</li>
<li>Descrizione preliminare dell'incidente</li>
</ul>
</div>
</div>
<form id="prealertForm">
<div class="form-section">
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px;">Dati Incidente</h3>
<div class="form-group">
<label class="form-label">Codice Incidente</label>
<input type="text" class="form-input" value="INC-2024-047" readonly>
</div>
<div class="form-group">
<label class="form-label">Data/Ora Rilevazione</label>
<input type="text" class="form-input" value="2024-03-06 08:15" readonly>
</div>
<div class="form-group">
<label class="form-label">Classificazione NIS2</label>
<input type="text" class="form-input" value="IS-2 - Impatto su integrità/riservatezza dati" readonly>
</div>
</div>
<div class="form-section">
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px;">Informazioni Preallarme</h3>
<div class="form-group">
<label class="form-label">Atti Illegittimi o Malevoli?</label>
<select class="form-select" required>
<option value="yes" selected>Sì - Attacco ransomware</option>
<option value="no">No</option>
<option value="unknown">Da determinare</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Impatto Transfrontaliero?</label>
<select class="form-select" required>
<option value="no" selected>No</option>
<option value="yes"></option>
<option value="possible">Possibile</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Descrizione Preliminare Incidente</label>
<textarea class="form-textarea" required>Tentativo di attacco ransomware (famiglia BlackCat/ALPHV) rilevato su server ERP di produzione. L'EDR ha bloccato l'esecuzione del malware in fase iniziale. Il vettore di attacco è stato identificato come email phishing con allegato malevolo, sfruttando credenziali utente precedentemente compromesse. Il sistema è stato immediatamente isolato. Nessuna crittografia dati avvenuta. Nessuna esfiltrazione rilevata. Incidente contenuto con successo.</textarea>
<div class="form-help">Fornire una descrizione sintetica ma completa dell'incidente</div>
</div>
<div class="form-group">
<label class="form-label">Sistemi/Servizi Impattati</label>
<textarea class="form-textarea">- Server ERP-PROD-01 (HW-SRV-001)
- Applicazione SAP ERP (SW-ERP-001)
- Servizio gestionale aziendale (SRV-ERP-001)
- 45 utenti interni impattati da interruzione servizio</textarea>
</div>
<div class="form-group">
<label class="form-label">Azioni di Contenimento Adottate</label>
<textarea class="form-textarea">- Isolamento immediato server dalla rete (08:22)
- Blocco account utente compromesso (09:30)
- Blocco IP C2 su firewall (09:45)
- Preservazione evidenze forensi (08:35)
- Attivazione Crisis Team e CISO (08:25)
- Contenimento confermato entro 2.2 ore dalla rilevazione</textarea>
</div>
</div>
<div class="form-section">
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px;">Dati Organizzazione</h3>
<div class="form-group">
<label class="form-label">Nome Organizzazione</label>
<input type="text" class="form-input" value="[Nome Azienda]" required>
</div>
<div class="form-group">
<label class="form-label">Settore NIS2</label>
<select class="form-select" required>
<option value="">Seleziona settore...</option>
<option value="energia">Energia</option>
<option value="trasporti">Trasporti</option>
<option value="bancario">Bancario</option>
<option value="sanitario">Sanitario</option>
<option value="digitale" selected>Infrastrutture Digitali</option>
<option value="acqua">Acqua Potabile</option>
<option value="altro">Altro</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Referente Tecnico</label>
<input type="text" class="form-input" value="CISO - P. Lombardi" required>
</div>
<div class="form-group">
<label class="form-label">Email Contatto</label>
<input type="email" class="form-input" value="ciso@azienda.it" required>
</div>
<div class="form-group">
<label class="form-label">Telefono Contatto</label>
<input type="tel" class="form-input" value="+39 02 1234567" required>
</div>
</div>
<div style="display: flex; gap: 12px; justify-content: flex-end; padding-top: 24px; border-top: 1px solid var(--border-color);">
<button type="button" class="btn" onclick="savePrealertDraft()">Salva Bozza</button>
<button type="button" class="btn btn-primary" onclick="previewPrealert()">Anteprima</button>
<button type="submit" class="btn btn-danger">📡 Invia Preallarme CSIRT</button>
</div>
</form>
</div>
<!-- Sezione Notifica Completa -->
<div class="section">
<div class="section-header">
<div class="section-title">2. Notifica Completa (Entro 72 ore)</div>
</div>
<div class="alert-box">
<div class="alert-title">⏸️ In Attesa Invio Preallarme</div>
<div class="alert-content">
La notifica completa può essere compilata dopo l'invio del preallarme.<br>
<strong>Scadenza:</strong> 2024-03-09 08:15 (72 ore dalla rilevazione)
</div>
</div>
<div class="info-box">
<div class="info-box-title">📋 Contenuto Notifica Completa</div>
<div class="info-box-content">
<ul style="margin-left: 20px; margin-top: 8px;">
<li>Aggiornamento informazioni del preallarme</li>
<li>Valutazione iniziale dell'incidente</li>
<li>Gravità e impatto dettagliato</li>
<li>Indicatori di compromissione (IoC) se disponibili</li>
<li>Misure di contenimento adottate</li>
<li>Stato corrente della gestione</li>
</ul>
</div>
</div>
<button class="btn" disabled style="opacity: 0.5;">Compila Notifica Completa (disponibile dopo preallarme)</button>
</div>
<!-- Sezione Relazione Finale -->
<div class="section">
<div class="section-header">
<div class="section-title">4. Relazione Finale (Entro 1 mese)</div>
</div>
<div class="alert-box">
<div class="alert-title">⏸️ In Attesa Chiusura Incidente</div>
<div class="alert-content">
La relazione finale deve essere inviata entro 1 mese dalla notifica completa,
o entro 1 mese dalla gestione completa dell'incidente se ancora in corso.<br>
<strong>Scadenza stimata:</strong> 2024-04-09
</div>
</div>
<div class="info-box">
<div class="info-box-title">📋 Contenuto Relazione Finale</div>
<div class="info-box-content">
<ul style="margin-left: 20px; margin-top: 8px;">
<li>Descrizione dettagliata dell'incidente</li>
<li>Causa radice (root cause) identificata o probabile</li>
<li>Misure di mitigazione applicate</li>
<li>Impatto transfrontaliero (se applicabile)</li>
<li>Tipo di minaccia o causa radice</li>
<li>Misure correttive in corso e pianificate</li>
<li>Lesson learned e raccomandazioni</li>
</ul>
</div>
</div>
<button class="btn" disabled style="opacity: 0.5;">Compila Relazione Finale (disponibile dopo chiusura incidente)</button>
</div>
<!-- Storico Comunicazioni -->
<div class="section">
<div class="section-header">
<div class="section-title">Storico Comunicazioni CSIRT</div>
</div>
<table class="data-table">
<thead>
<tr>
<th>Data/Ora</th>
<th>Tipo Comunicazione</th>
<th>Canale</th>
<th>Protocollo/Riferimento</th>
<th>Stato</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6" style="text-align: center; color: var(--text-secondary); padding: 24px;">
Nessuna comunicazione inviata ancora
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
function savePrealertDraft() {
alert('Bozza preallarme salvata con successo. Puoi continuare la compilazione in seguito.');
}
function previewPrealert() {
const tooltip = document.createElement('div');
tooltip.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 24px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
z-index: 10000;
max-width: 700px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
`;
tooltip.innerHTML = `
<h3 style="margin-bottom: 16px; color: var(--text-primary);">📄 Anteprima Preallarme CSIRT Italia</h3>
<div style="background: var(--bg-tertiary); padding: 20px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; line-height: 1.8; font-family: monospace;">
<strong>PREALLARME INCIDENTE SIGNIFICATIVO NIS2</strong><br>
<strong>Protocollo:</strong> [Generato automaticamente]<br>
<strong>Data invio:</strong> ${new Date().toLocaleString('it-IT')}<br>
<br>
<strong>ORGANIZZAZIONE:</strong> [Nome Azienda]<br>
<strong>Settore:</strong> Infrastrutture Digitali<br>
<strong>Tipologia soggetto:</strong> ${sessionStorage.getItem('nis2_subject_type') === 'essential' ? 'Essenziale' : 'Importante'}<br>
<br>
<strong>CODICE INCIDENTE:</strong> INC-2024-047<br>
<strong>Data/Ora rilevazione:</strong> 2024-03-06 08:15<br>
<strong>Classificazione:</strong> IS-2 (Impatto integrità/riservatezza dati)<br>
<br>
<strong>NATURA INCIDENTE:</strong><br>
☑ Atti illegittimi o malevoli: SÌ (Attacco ransomware)<br>
☐ Impatto transfrontaliero: NO<br>
<br>
<strong>DESCRIZIONE PRELIMINARE:</strong><br>
Tentativo di attacco ransomware (famiglia BlackCat/ALPHV) rilevato su server ERP di produzione.
L'EDR ha bloccato l'esecuzione del malware in fase iniziale. Il vettore di attacco è stato identificato
come email phishing con allegato malevolo, sfruttando credenziali utente precedentemente compromesse.
Il sistema è stato immediatamente isolato. Nessuna crittografia dati avvenuta. Nessuna esfiltrazione rilevata.
Incidente contenuto con successo.<br>
<br>
<strong>SISTEMI IMPATTATI:</strong><br>
- Server ERP-PROD-01<br>
- Applicazione SAP ERP<br>
- 45 utenti interni<br>
<br>
<strong>AZIONI CONTENIMENTO:</strong><br>
- Isolamento server (2.2h)<br>
- Blocco account compromesso<br>
- Blocco IP C2<br>
- Evidenze preservate<br>
<br>
<strong>REFERENTE:</strong> CISO - P. Lombardi<br>
<strong>Contatto:</strong> ciso@azienda.it / +39 02 1234567<br>
<br>
<em>Notifica completa seguirà entro 72 ore.</em>
</div>
<div style="display: flex; gap: 12px;">
<button onclick="this.parentElement.parentElement.remove()" style="flex: 1; padding: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-weight: 600; cursor: pointer;">
Chiudi
</button>
<button onclick="this.parentElement.parentElement.remove(); document.getElementById('prealertForm').dispatchEvent(new Event('submit'));" style="flex: 1; padding: 10px; background: var(--danger); border: none; border-radius: 6px; color: white; font-weight: 600; cursor: pointer;">
Conferma e Invia
</button>
</div>
`;
document.body.appendChild(tooltip);
}
document.getElementById('prealertForm').addEventListener('submit', function(e) {
e.preventDefault();
const tooltip = document.createElement('div');
tooltip.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--bg-secondary);
border: 2px solid var(--success);
border-radius: 8px;
padding: 32px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
z-index: 10000;
max-width: 500px;
text-align: center;
`;
tooltip.innerHTML = `
<div style="font-size: 48px; margin-bottom: 16px;">✅</div>
<h2 style="color: var(--success); margin-bottom: 16px;">Preallarme Inviato con Successo</h2>
<p style="color: var(--text-secondary); margin-bottom: 8px;">Protocollo CSIRT:</p>
<p style="font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 24px; font-family: monospace;">CSIRT-2024-03-06-${Math.floor(Math.random() * 10000)}</p>
<div style="background: var(--bg-tertiary); padding: 16px; border-radius: 6px; margin-bottom: 24px; text-align: left;">
<p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;"><strong>Dettagli invio:</strong></p>
<ul style="font-size: 13px; color: var(--text-secondary); margin-left: 20px;">
<li>Data/Ora invio: ${new Date().toLocaleString('it-IT')}</li>
<li>Canale: Portale CSIRT Italia</li>
<li>Ricevuta PEC: Confermata</li>
<li>Scadenza rispettata: ✅ SÌ (entro 24h)</li>
</ul>
<p style="font-size: 13px; color: var(--text-secondary); margin-top: 12px;">
<strong>Prossimo step:</strong> Notifica completa entro 2024-03-09 08:15 (72h)
</p>
</div>
<button onclick="window.location.href='incident-detail.html?id=INC-2024-047'" style="padding: 12px 24px; background: var(--accent-primary); border: none; border-radius: 6px; color: white; font-weight: 600; cursor: pointer;">
Torna all'Incidente
</button>
`;
document.body.appendChild(tooltip);
});
</script>
</body>
</html>