f09e24d52c
Remove duplicate compliance and DSGVO admin pages that have been superseded by the unified SDK pipeline. Update navigation, sidebar, roles, and module registry to reflect the new structure. Add DSFA corpus API proxy and source-policy components. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1138 lines
58 KiB
TypeScript
1138 lines
58 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Security Dashboard - DevSecOps
|
|
*
|
|
* Security scan results, vulnerability tracking, and compliance status
|
|
* Migrated from old admin (/admin/security)
|
|
*/
|
|
|
|
import { useEffect, useState, useCallback } from 'react'
|
|
import { PagePurpose } from '@/components/common/PagePurpose'
|
|
import { DevOpsPipelineSidebarResponsive } from '@/components/infrastructure/DevOpsPipelineSidebar'
|
|
|
|
interface ToolStatus {
|
|
name: string
|
|
installed: boolean
|
|
version: string | null
|
|
last_run: string | null
|
|
last_findings: number
|
|
}
|
|
|
|
interface Finding {
|
|
id: string
|
|
tool: string
|
|
severity: string
|
|
title: string
|
|
message: string | null
|
|
file: string | null
|
|
line: number | null
|
|
found_at: string
|
|
}
|
|
|
|
interface SeveritySummary {
|
|
critical: number
|
|
high: number
|
|
medium: number
|
|
low: number
|
|
info: number
|
|
total: number
|
|
}
|
|
|
|
interface HistoryItem {
|
|
timestamp: string
|
|
title: string
|
|
description: string
|
|
status: string
|
|
}
|
|
|
|
type ScanType = 'secrets' | 'sast' | 'deps' | 'containers' | 'sbom' | 'all'
|
|
|
|
interface MonitoringMetric {
|
|
name: string
|
|
value: number
|
|
unit: string
|
|
status: 'ok' | 'warning' | 'critical'
|
|
trend: 'up' | 'down' | 'stable'
|
|
}
|
|
|
|
interface ActiveAlert {
|
|
id: string
|
|
severity: 'critical' | 'high' | 'medium' | 'low'
|
|
title: string
|
|
source: string
|
|
timestamp: string
|
|
acknowledged: boolean
|
|
}
|
|
|
|
export default function SecurityDashboardPage() {
|
|
const [tools, setTools] = useState<ToolStatus[]>([])
|
|
const [findings, setFindings] = useState<Finding[]>([])
|
|
const [summary, setSummary] = useState<SeveritySummary>({ critical: 0, high: 0, medium: 0, low: 0, info: 0, total: 0 })
|
|
const [history, setHistory] = useState<HistoryItem[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [scanning, setScanning] = useState<string | null>(null)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [activeTab, setActiveTab] = useState<'overview' | 'findings' | 'tools' | 'history' | 'monitoring'>('overview')
|
|
const [monitoringMetrics, setMonitoringMetrics] = useState<MonitoringMetric[]>([])
|
|
const [activeAlerts, setActiveAlerts] = useState<ActiveAlert[]>([])
|
|
const [severityFilter, setSeverityFilter] = useState<string | null>(null)
|
|
const [toolFilter, setToolFilter] = useState<string | null>(null)
|
|
const [showFullDocs, setShowFullDocs] = useState(false)
|
|
const [isInitialLoad, setIsInitialLoad] = useState(true)
|
|
const [scanMessage, setScanMessage] = useState<string | null>(null)
|
|
const [lastScanTime, setLastScanTime] = useState<string | null>(null)
|
|
|
|
const fetchData = useCallback(async (showLoadingSpinner = false) => {
|
|
// Only show loading spinner on initial load, not on auto-refresh
|
|
if (showLoadingSpinner) {
|
|
setLoading(true)
|
|
}
|
|
setError(null)
|
|
|
|
try {
|
|
const [toolsRes, findingsRes, summaryRes, historyRes] = await Promise.all([
|
|
fetch('/api/v1/security/tools'),
|
|
fetch('/api/v1/security/findings'),
|
|
fetch('/api/v1/security/summary'),
|
|
fetch('/api/v1/security/history'),
|
|
])
|
|
|
|
if (toolsRes.ok) {
|
|
setTools(await toolsRes.json())
|
|
}
|
|
if (findingsRes.ok) {
|
|
setFindings(await findingsRes.json())
|
|
}
|
|
if (summaryRes.ok) {
|
|
setSummary(await summaryRes.json())
|
|
}
|
|
if (historyRes.ok) {
|
|
setHistory(await historyRes.json())
|
|
}
|
|
|
|
// Fetch monitoring data
|
|
const [metricsRes, alertsRes] = await Promise.all([
|
|
fetch('/api/v1/security/monitoring/metrics'),
|
|
fetch('/api/v1/security/monitoring/alerts'),
|
|
])
|
|
|
|
if (metricsRes.ok) {
|
|
setMonitoringMetrics(await metricsRes.json())
|
|
} else {
|
|
// Default metrics if API not available
|
|
setMonitoringMetrics([
|
|
{ name: 'API Latency', value: 45, unit: 'ms', status: 'ok', trend: 'stable' },
|
|
{ name: 'Auth Failures', value: 3, unit: '/h', status: 'ok', trend: 'down' },
|
|
{ name: 'Rate Limit Hits', value: 12, unit: '/h', status: 'warning', trend: 'up' },
|
|
{ name: 'Failed Logins', value: 0, unit: '/24h', status: 'ok', trend: 'stable' },
|
|
{ name: 'SSL Expiry', value: 45, unit: 'days', status: 'ok', trend: 'down' },
|
|
{ name: 'Open Ports', value: 8, unit: '', status: 'ok', trend: 'stable' },
|
|
])
|
|
}
|
|
if (alertsRes.ok) {
|
|
setActiveAlerts(await alertsRes.json())
|
|
} else {
|
|
setActiveAlerts([])
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Verbindung zum Backend fehlgeschlagen')
|
|
} finally {
|
|
setLoading(false)
|
|
setIsInitialLoad(false)
|
|
}
|
|
}, [])
|
|
|
|
// Initial load only - runs once
|
|
useEffect(() => {
|
|
fetchData(true) // Show loading spinner on initial load
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
// Auto-refresh every 60 seconds (without loading spinner)
|
|
useEffect(() => {
|
|
const interval = setInterval(() => fetchData(false), 60000)
|
|
return () => clearInterval(interval)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
const scanTypeLabels: Record<ScanType, string> = {
|
|
secrets: 'Secrets (Gitleaks)',
|
|
sast: 'SAST (Semgrep + Bandit)',
|
|
deps: 'Dependencies (Trivy + Grype)',
|
|
containers: 'Container',
|
|
sbom: 'SBOM (Syft)',
|
|
all: 'Full Scan',
|
|
}
|
|
|
|
const runScan = async (scanType: ScanType) => {
|
|
console.log(`Starting scan: ${scanType}`)
|
|
setScanning(scanType)
|
|
setError(null)
|
|
setScanMessage(`${scanTypeLabels[scanType]} wird gestartet...`)
|
|
|
|
try {
|
|
const response = await fetch(`/api/v1/security/scan/${scanType}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
|
|
console.log(`Scan response status: ${response.status}`)
|
|
|
|
if (!response.ok) {
|
|
const errorText = await response.text()
|
|
console.error(`Scan error: ${errorText}`)
|
|
throw new Error(`Scan fehlgeschlagen: ${response.status} - ${errorText}`)
|
|
}
|
|
|
|
const result = await response.json()
|
|
console.log('Scan result:', result)
|
|
|
|
// Show success message
|
|
setScanMessage(`${scanTypeLabels[scanType]} laeuft im Hintergrund. Ergebnisse werden in wenigen Sekunden aktualisiert.`)
|
|
setLastScanTime(new Date().toLocaleTimeString('de-DE'))
|
|
|
|
// Refresh data after scan completes
|
|
setTimeout(() => {
|
|
fetchData(false)
|
|
setScanMessage(null)
|
|
}, 5000)
|
|
setTimeout(() => fetchData(false), 15000)
|
|
setTimeout(() => fetchData(false), 30000)
|
|
} catch (err) {
|
|
console.error('Scan error:', err)
|
|
setError(err instanceof Error ? err.message : 'Scan fehlgeschlagen - Pruefe Browser-Konsole')
|
|
setScanMessage(null)
|
|
} finally {
|
|
setScanning(null)
|
|
}
|
|
}
|
|
|
|
const getSeverityBadge = (severity: string) => {
|
|
const base = 'px-3 py-1 rounded-full text-xs font-semibold uppercase'
|
|
switch (severity.toUpperCase()) {
|
|
case 'CRITICAL':
|
|
return `${base} bg-red-100 text-red-800`
|
|
case 'HIGH':
|
|
return `${base} bg-orange-100 text-orange-800`
|
|
case 'MEDIUM':
|
|
return `${base} bg-yellow-100 text-yellow-800`
|
|
case 'LOW':
|
|
return `${base} bg-green-100 text-green-800`
|
|
default:
|
|
return `${base} bg-blue-100 text-blue-800`
|
|
}
|
|
}
|
|
|
|
const getStatusBadge = (installed: boolean) => {
|
|
return installed
|
|
? 'px-2 py-1 rounded text-xs font-semibold bg-green-100 text-green-800'
|
|
: 'px-2 py-1 rounded text-xs font-semibold bg-red-100 text-red-800'
|
|
}
|
|
|
|
const getHistoryStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'success':
|
|
return 'bg-green-500'
|
|
case 'warning':
|
|
return 'bg-yellow-500'
|
|
case 'error':
|
|
return 'bg-red-500'
|
|
default:
|
|
return 'bg-slate-400'
|
|
}
|
|
}
|
|
|
|
const getOverallStatus = () => {
|
|
if (summary.critical > 0) {
|
|
return { label: 'Critical Issues', color: 'bg-red-100 text-red-800' }
|
|
}
|
|
if (summary.high > 0) {
|
|
return { label: 'High Issues', color: 'bg-orange-100 text-orange-800' }
|
|
}
|
|
if (summary.medium > 0) {
|
|
return { label: 'Warnings', color: 'bg-yellow-100 text-yellow-800' }
|
|
}
|
|
return { label: 'Secure', color: 'bg-green-100 text-green-800' }
|
|
}
|
|
|
|
const filteredFindings = findings.filter(f => {
|
|
if (severityFilter && f.severity.toUpperCase() !== severityFilter.toUpperCase()) return false
|
|
if (toolFilter && f.tool.toLowerCase() !== toolFilter.toLowerCase()) return false
|
|
return true
|
|
})
|
|
|
|
const toolDescriptions: Record<string, { icon: string; desc: string }> = {
|
|
gitleaks: { icon: '🔑', desc: 'Secrets Detection in Git History' },
|
|
semgrep: { icon: '🔍', desc: 'Static Application Security Testing (SAST)' },
|
|
bandit: { icon: '🐍', desc: 'Python Security Linter' },
|
|
trivy: { icon: '🔒', desc: 'Container & Filesystem Vulnerability Scanner' },
|
|
grype: { icon: '🐛', desc: 'Vulnerability Scanner for Dependencies' },
|
|
syft: { icon: '📦', desc: 'SBOM Generator (CycloneDX/SPDX)' },
|
|
}
|
|
|
|
// Map tool names to backend scan types
|
|
const toolToScanType: Record<string, ScanType> = {
|
|
gitleaks: 'secrets',
|
|
semgrep: 'sast',
|
|
bandit: 'sast',
|
|
trivy: 'deps',
|
|
grype: 'deps',
|
|
syft: 'sbom',
|
|
}
|
|
|
|
const status = getOverallStatus()
|
|
|
|
return (
|
|
<div>
|
|
<PagePurpose
|
|
title="Security Dashboard"
|
|
purpose="DevSecOps Dashboard mit Echtzeit-Scan-Ergebnissen. Ueberwachen Sie Secrets, Schwachstellen und Abhaengigkeiten. Fuehren Sie Security-Scans manuell aus oder integrieren Sie sie in Ihre CI/CD-Pipeline."
|
|
audience={['DevOps', 'Security', 'Entwickler']}
|
|
gdprArticles={['Art. 32 (Sicherheit der Verarbeitung)']}
|
|
architecture={{
|
|
services: ['Gitleaks', 'Semgrep', 'Bandit', 'Trivy', 'Grype', 'Syft'],
|
|
databases: ['JSON Reports'],
|
|
}}
|
|
relatedPages={[
|
|
{ name: 'SBOM', href: '/infrastructure/sbom', description: 'Software Bill of Materials' },
|
|
{ name: 'Middleware', href: '/infrastructure/middleware', description: 'API Gateway & Rate Limiting' },
|
|
{ name: 'Controls', href: '/sdk/controls', description: 'Security Controls' },
|
|
]}
|
|
collapsible={true}
|
|
defaultCollapsed={true}
|
|
/>
|
|
|
|
{/* DevOps Pipeline Sidebar */}
|
|
<DevOpsPipelineSidebarResponsive currentTool="security" />
|
|
|
|
{/* Header with Status */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<div className="flex items-center gap-4">
|
|
<h2 className="text-xl font-semibold text-slate-900">Security Status</h2>
|
|
<span className={`px-3 py-1 rounded-full text-sm font-semibold ${status.color}`}>
|
|
{status.label}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex items-center gap-2 text-sm text-slate-500">
|
|
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
|
Auto-Refresh aktiv
|
|
</span>
|
|
<button
|
|
onClick={() => runScan('all')}
|
|
disabled={scanning !== null}
|
|
className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${
|
|
scanning === 'all'
|
|
? 'bg-orange-200 text-orange-800'
|
|
: 'bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50'
|
|
}`}
|
|
>
|
|
{scanning === 'all' ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-700" />
|
|
<span>Full Scan laeuft...</span>
|
|
</>
|
|
) : (
|
|
'Full Scan starten'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Severity Summary */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
<div className="border-l-4 border-red-500 bg-slate-50 rounded-r-lg p-4">
|
|
<div className="text-3xl font-bold text-red-600">{summary.critical}</div>
|
|
<div className="text-sm text-slate-600">Critical</div>
|
|
</div>
|
|
<div className="border-l-4 border-orange-500 bg-slate-50 rounded-r-lg p-4">
|
|
<div className="text-3xl font-bold text-orange-600">{summary.high}</div>
|
|
<div className="text-sm text-slate-600">High</div>
|
|
</div>
|
|
<div className="border-l-4 border-yellow-500 bg-slate-50 rounded-r-lg p-4">
|
|
<div className="text-3xl font-bold text-yellow-600">{summary.medium}</div>
|
|
<div className="text-sm text-slate-600">Medium</div>
|
|
</div>
|
|
<div className="border-l-4 border-green-500 bg-slate-50 rounded-r-lg p-4">
|
|
<div className="text-3xl font-bold text-green-600">{summary.low}</div>
|
|
<div className="text-sm text-slate-600">Low</div>
|
|
</div>
|
|
<div className="border-l-4 border-blue-500 bg-slate-50 rounded-r-lg p-4">
|
|
<div className="text-3xl font-bold text-blue-600">{summary.info}</div>
|
|
<div className="text-sm text-slate-600">Info</div>
|
|
</div>
|
|
<div className="border-l-4 border-slate-400 bg-slate-50 rounded-r-lg p-4">
|
|
<div className="text-3xl font-bold text-slate-700">{summary.total}</div>
|
|
<div className="text-sm text-slate-600">Total</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden mb-6">
|
|
<div className="flex border-b border-slate-200">
|
|
{(['overview', 'findings', 'tools', 'history', 'monitoring'] as const).map(tab => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={`px-6 py-3 text-sm font-medium transition-colors ${
|
|
activeTab === tab
|
|
? 'bg-orange-50 text-orange-700 border-b-2 border-orange-600'
|
|
: 'text-slate-600 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
{tab === 'overview' && 'Uebersicht'}
|
|
{tab === 'findings' && `Findings (${summary.total})`}
|
|
{tab === 'tools' && 'Tools'}
|
|
{tab === 'history' && 'Historie'}
|
|
{tab === 'monitoring' && 'Monitoring'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{/* Scan Status Message */}
|
|
{scanMessage && (
|
|
<div className="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg text-blue-700 flex items-center gap-3">
|
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600" />
|
|
<div>
|
|
<span className="font-medium">{scanMessage}</span>
|
|
{lastScanTime && (
|
|
<span className="text-sm text-blue-500 ml-2">(gestartet um {lastScanTime})</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center py-12">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-600" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Overview Tab */}
|
|
{activeTab === 'overview' && (
|
|
<div className="space-y-6">
|
|
{/* Tools Grid */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">DevSecOps Tools</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{tools.map(tool => {
|
|
const info = toolDescriptions[tool.name.toLowerCase()] || { icon: '🔧', desc: 'Security Tool' }
|
|
return (
|
|
<div key={tool.name} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xl">{info.icon}</span>
|
|
<span className="font-semibold text-slate-900">{tool.name}</span>
|
|
</div>
|
|
<span className={getStatusBadge(tool.installed)}>
|
|
{tool.installed ? 'Installiert' : 'Nicht installiert'}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-slate-600 mb-3">{info.desc}</p>
|
|
<div className="flex justify-between items-center text-xs text-slate-500">
|
|
<span>{tool.version || '-'}</span>
|
|
<span>Letzter Scan: {tool.last_run || 'Nie'}</span>
|
|
</div>
|
|
<button
|
|
onClick={() => runScan(toolToScanType[tool.name.toLowerCase()] || 'all')}
|
|
disabled={scanning !== null || !tool.installed}
|
|
className={`mt-3 w-full px-3 py-1.5 text-sm border rounded transition-colors flex items-center justify-center gap-2 ${
|
|
scanning === toolToScanType[tool.name.toLowerCase()]
|
|
? 'bg-orange-100 border-orange-300 text-orange-700'
|
|
: 'bg-white border-slate-300 hover:bg-slate-50 disabled:opacity-50'
|
|
}`}
|
|
>
|
|
{scanning === toolToScanType[tool.name.toLowerCase()] ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-600" />
|
|
<span>Scan laeuft...</span>
|
|
</>
|
|
) : (
|
|
'Scan starten'
|
|
)}
|
|
</button>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Findings */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Aktuelle Findings</h3>
|
|
{findings.length === 0 ? (
|
|
<div className="text-center py-8 text-slate-500">
|
|
<span className="text-4xl block mb-2">🎉</span>
|
|
Keine Findings gefunden. Das ist gut!
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-slate-200">
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Severity</th>
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tool</th>
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Finding</th>
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Datei</th>
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Gefunden</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{findings.slice(0, 10).map((finding, idx) => (
|
|
<tr key={`${finding.id}-${idx}`} className="border-b border-slate-100 hover:bg-slate-50">
|
|
<td className="py-3 px-4">
|
|
<span className={getSeverityBadge(finding.severity)}>{finding.severity}</span>
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-slate-600">{finding.tool}</td>
|
|
<td className="py-3 px-4 text-sm text-slate-900">{finding.title}</td>
|
|
<td className="py-3 px-4 text-sm text-slate-500 font-mono">{finding.file || '-'}</td>
|
|
<td className="py-3 px-4 text-sm text-slate-500">
|
|
{finding.found_at ? new Date(finding.found_at).toLocaleString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
}) : '-'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{findings.length > 10 && (
|
|
<button
|
|
onClick={() => setActiveTab('findings')}
|
|
className="mt-4 text-sm text-orange-600 hover:text-orange-700"
|
|
>
|
|
Alle {findings.length} Findings anzeigen →
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Findings Tab */}
|
|
{activeTab === 'findings' && (
|
|
<div>
|
|
{/* Filters */}
|
|
<div className="flex gap-2 mb-4 flex-wrap">
|
|
<button
|
|
onClick={() => setSeverityFilter(null)}
|
|
className={`px-3 py-1 rounded-full text-sm ${!severityFilter ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
|
|
>
|
|
Alle
|
|
</button>
|
|
{['CRITICAL', 'HIGH', 'MEDIUM', 'LOW', 'INFO'].map(sev => (
|
|
<button
|
|
key={sev}
|
|
onClick={() => setSeverityFilter(sev)}
|
|
className={`px-3 py-1 rounded-full text-sm ${severityFilter === sev ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
|
|
>
|
|
{sev}
|
|
</button>
|
|
))}
|
|
<span className="mx-2 border-l border-slate-300" />
|
|
{['gitleaks', 'semgrep', 'bandit', 'trivy', 'grype'].map(t => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setToolFilter(toolFilter === t ? null : t)}
|
|
className={`px-3 py-1 rounded-full text-sm capitalize ${toolFilter === t ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
|
|
>
|
|
{t}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{filteredFindings.length === 0 ? (
|
|
<div className="text-center py-8 text-slate-500">
|
|
Keine Findings mit diesem Filter gefunden.
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-slate-200">
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Severity</th>
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tool</th>
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Finding</th>
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Datei</th>
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Zeile</th>
|
|
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Gefunden</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredFindings.map((finding, idx) => (
|
|
<tr key={`${finding.id}-${idx}`} className="border-b border-slate-100 hover:bg-slate-50">
|
|
<td className="py-3 px-4">
|
|
<span className={getSeverityBadge(finding.severity)}>{finding.severity}</span>
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-slate-600">{finding.tool}</td>
|
|
<td className="py-3 px-4">
|
|
<div className="text-sm text-slate-900">{finding.title}</div>
|
|
{finding.message && (
|
|
<div className="text-xs text-slate-500 mt-1">{finding.message}</div>
|
|
)}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-slate-500 font-mono max-w-xs truncate">
|
|
{finding.file || '-'}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-slate-500">{finding.line || '-'}</td>
|
|
<td className="py-3 px-4 text-sm text-slate-500">
|
|
{finding.found_at ? new Date(finding.found_at).toLocaleDateString('de-DE') : '-'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Tools Tab */}
|
|
{activeTab === 'tools' && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{tools.map(tool => {
|
|
const info = toolDescriptions[tool.name.toLowerCase()] || { icon: '🔧', desc: 'Security Tool' }
|
|
return (
|
|
<div key={tool.name} className="bg-white border border-slate-200 rounded-lg p-6">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<span className="text-2xl">{info.icon}</span>
|
|
<h3 className="text-lg font-semibold text-slate-900">{tool.name}</h3>
|
|
</div>
|
|
<p className="text-sm text-slate-600">{info.desc}</p>
|
|
</div>
|
|
<span className={getStatusBadge(tool.installed)}>
|
|
{tool.installed ? 'Installiert' : 'Nicht installiert'}
|
|
</span>
|
|
</div>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-500">Version:</span>
|
|
<span className="font-mono">{tool.version || '-'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-500">Letzter Scan:</span>
|
|
<span>{tool.last_run || 'Nie'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-500">Findings:</span>
|
|
<span className="font-semibold">{tool.last_findings}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 mt-4">
|
|
<button
|
|
onClick={() => runScan(toolToScanType[tool.name.toLowerCase()] || 'all')}
|
|
disabled={scanning !== null || !tool.installed}
|
|
className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
|
|
scanning === toolToScanType[tool.name.toLowerCase()]
|
|
? 'bg-orange-200 text-orange-800'
|
|
: 'bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50'
|
|
}`}
|
|
>
|
|
{scanning === toolToScanType[tool.name.toLowerCase()] ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-700" />
|
|
<span>Scan laeuft...</span>
|
|
</>
|
|
) : (
|
|
'Scan starten'
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => window.open(`/api/v1/security/reports/${tool.name.toLowerCase()}`, '_blank')}
|
|
className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
|
|
>
|
|
Report
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* History Tab */}
|
|
{activeTab === 'history' && (
|
|
<div className="space-y-4">
|
|
{history.length === 0 ? (
|
|
<div className="text-center py-8 text-slate-500">
|
|
Keine Scan-Historie vorhanden.
|
|
</div>
|
|
) : (
|
|
<div className="relative">
|
|
<div className="absolute left-4 top-0 bottom-0 w-0.5 bg-slate-200" />
|
|
{history.map((item, idx) => (
|
|
<div key={idx} className="relative pl-10 pb-6">
|
|
<div className={`absolute left-2.5 w-3 h-3 rounded-full ${getHistoryStatusColor(item.status)}`} />
|
|
<div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
|
<div className="flex justify-between items-start mb-1">
|
|
<span className="font-semibold text-slate-900">{item.title}</span>
|
|
<span className="text-xs text-slate-500">
|
|
{new Date(item.timestamp).toLocaleString('de-DE')}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-slate-600">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Monitoring Tab */}
|
|
{activeTab === 'monitoring' && (
|
|
<div className="space-y-6">
|
|
{/* Real-time Metrics */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
Security Metriken
|
|
</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
{monitoringMetrics.map((metric, idx) => (
|
|
<div
|
|
key={idx}
|
|
className={`rounded-lg p-4 border ${
|
|
metric.status === 'critical' ? 'bg-red-50 border-red-200' :
|
|
metric.status === 'warning' ? 'bg-yellow-50 border-yellow-200' :
|
|
'bg-green-50 border-green-200'
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-start mb-2">
|
|
<span className="text-xs text-slate-600">{metric.name}</span>
|
|
<span className={`text-xs ${
|
|
metric.trend === 'up' ? 'text-red-600' :
|
|
metric.trend === 'down' ? 'text-green-600' :
|
|
'text-slate-500'
|
|
}`}>
|
|
{metric.trend === 'up' ? '↑' : metric.trend === 'down' ? '↓' : '→'}
|
|
</span>
|
|
</div>
|
|
<div className={`text-2xl font-bold ${
|
|
metric.status === 'critical' ? 'text-red-700' :
|
|
metric.status === 'warning' ? 'text-yellow-700' :
|
|
'text-green-700'
|
|
}`}>
|
|
{metric.value}
|
|
<span className="text-sm font-normal ml-1">{metric.unit}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Active Alerts */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
Aktive Alerts
|
|
{activeAlerts.filter(a => !a.acknowledged).length > 0 && (
|
|
<span className="ml-2 px-2 py-0.5 bg-red-500 text-white text-xs rounded-full">
|
|
{activeAlerts.filter(a => !a.acknowledged).length}
|
|
</span>
|
|
)}
|
|
</h3>
|
|
{activeAlerts.length === 0 ? (
|
|
<div className="text-center py-8 bg-green-50 rounded-lg border border-green-200">
|
|
<span className="text-4xl block mb-2">✓</span>
|
|
<span className="text-green-700">Keine aktiven Security-Alerts</span>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{activeAlerts.map((alert) => (
|
|
<div
|
|
key={alert.id}
|
|
className={`flex items-center justify-between p-4 rounded-lg border ${
|
|
alert.severity === 'critical' ? 'bg-red-50 border-red-200' :
|
|
alert.severity === 'high' ? 'bg-orange-50 border-orange-200' :
|
|
alert.severity === 'medium' ? 'bg-yellow-50 border-yellow-200' :
|
|
'bg-blue-50 border-blue-200'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<span className={`px-2 py-1 text-xs font-semibold rounded uppercase ${
|
|
alert.severity === 'critical' ? 'bg-red-100 text-red-800' :
|
|
alert.severity === 'high' ? 'bg-orange-100 text-orange-800' :
|
|
alert.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' :
|
|
'bg-blue-100 text-blue-800'
|
|
}`}>
|
|
{alert.severity}
|
|
</span>
|
|
<div>
|
|
<div className="font-medium text-slate-900">{alert.title}</div>
|
|
<div className="text-xs text-slate-500">
|
|
{alert.source} • {new Date(alert.timestamp).toLocaleString('de-DE')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{!alert.acknowledged && (
|
|
<button className="px-3 py-1 text-xs bg-white border border-slate-300 rounded hover:bg-slate-50">
|
|
Bestaetigen
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Security Overview Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
|
<h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
|
|
<svg className="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
Authentifizierung
|
|
</h4>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Aktive Sessions</span>
|
|
<span className="font-medium">24</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Fehlgeschlagene Logins (24h)</span>
|
|
<span className="font-medium text-green-600">0</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">2FA-Quote</span>
|
|
<span className="font-medium text-green-600">100%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
|
<h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
|
|
<svg className="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
SSL/TLS
|
|
</h4>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Zertifikate</span>
|
|
<span className="font-medium">5 aktiv</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Naechster Ablauf</span>
|
|
<span className="font-medium text-green-600">45 Tage</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">TLS Version</span>
|
|
<span className="font-medium">1.3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
|
<h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
|
|
<svg className="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
Firewall
|
|
</h4>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Blockierte IPs (24h)</span>
|
|
<span className="font-medium">12</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Rate Limit Hits</span>
|
|
<span className="font-medium text-yellow-600">7</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">WAF Status</span>
|
|
<span className="font-medium text-green-600">Aktiv</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Link to CI/CD for pipeline monitoring */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<div>
|
|
<div className="font-medium text-blue-900">Pipeline Security</div>
|
|
<div className="text-sm text-blue-700">Security-Scans in CI/CD Pipelines und Container-Status</div>
|
|
</div>
|
|
</div>
|
|
<a
|
|
href="/infrastructure/ci-cd"
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
|
|
>
|
|
CI/CD Dashboard →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Documentation Section */}
|
|
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Security Dokumentation
|
|
</h3>
|
|
<button
|
|
onClick={() => setShowFullDocs(!showFullDocs)}
|
|
className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors flex items-center gap-2 text-sm font-medium"
|
|
>
|
|
<svg className={`w-4 h-4 transition-transform ${showFullDocs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
{showFullDocs ? 'Weniger anzeigen' : 'Vollstaendige Dokumentation'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Short Description */}
|
|
<div className="prose prose-slate max-w-none">
|
|
<p className="text-slate-600">
|
|
Das Security Dashboard bietet einen zentralen Ueberblick ueber alle DevSecOps-Aktivitaeten.
|
|
Es integriert 6 Security-Tools fuer umfassende Code- und Infrastruktur-Sicherheit:
|
|
Secrets Detection, Static Analysis (SAST), Dependency Scanning und SBOM-Generierung.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tool Quick Reference */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mt-4">
|
|
<div className="bg-red-50 p-3 rounded-lg text-center">
|
|
<span className="text-lg">🔑</span>
|
|
<p className="text-xs font-medium text-red-800 mt-1">Gitleaks</p>
|
|
<p className="text-xs text-red-600">Secrets</p>
|
|
</div>
|
|
<div className="bg-blue-50 p-3 rounded-lg text-center">
|
|
<span className="text-lg">🔍</span>
|
|
<p className="text-xs font-medium text-blue-800 mt-1">Semgrep</p>
|
|
<p className="text-xs text-blue-600">SAST</p>
|
|
</div>
|
|
<div className="bg-yellow-50 p-3 rounded-lg text-center">
|
|
<span className="text-lg">🐍</span>
|
|
<p className="text-xs font-medium text-yellow-800 mt-1">Bandit</p>
|
|
<p className="text-xs text-yellow-600">Python</p>
|
|
</div>
|
|
<div className="bg-purple-50 p-3 rounded-lg text-center">
|
|
<span className="text-lg">🔒</span>
|
|
<p className="text-xs font-medium text-purple-800 mt-1">Trivy</p>
|
|
<p className="text-xs text-purple-600">Container</p>
|
|
</div>
|
|
<div className="bg-green-50 p-3 rounded-lg text-center">
|
|
<span className="text-lg">🐛</span>
|
|
<p className="text-xs font-medium text-green-800 mt-1">Grype</p>
|
|
<p className="text-xs text-green-600">Dependencies</p>
|
|
</div>
|
|
<div className="bg-orange-50 p-3 rounded-lg text-center">
|
|
<span className="text-lg">📦</span>
|
|
<p className="text-xs font-medium text-orange-800 mt-1">Syft</p>
|
|
<p className="text-xs text-orange-600">SBOM</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Full Documentation (Expandable) */}
|
|
{showFullDocs && (
|
|
<div className="mt-6 bg-slate-50 rounded-lg p-6 border border-slate-200">
|
|
<div className="prose prose-slate max-w-none prose-headings:text-slate-900 prose-p:text-slate-600 prose-li:text-slate-600">
|
|
|
|
<h3>1. Security Tools Uebersicht</h3>
|
|
|
|
<h4>🔑 Gitleaks - Secrets Detection</h4>
|
|
<p>Durchsucht die gesamte Git-Historie nach versehentlich eingecheckten Secrets wie API-Keys, Passwoertern und Tokens.</p>
|
|
<ul>
|
|
<li><strong>Scan-Bereich:</strong> Git-Historie, Commits, Branches</li>
|
|
<li><strong>Erkannte Secrets:</strong> AWS Keys, GitHub Tokens, Private Keys, Passwoerter</li>
|
|
<li><strong>Ausgabe:</strong> JSON-Report mit Fundstelle, Commit-Hash, Autor</li>
|
|
</ul>
|
|
|
|
<h4>🔍 Semgrep - Static Application Security Testing</h4>
|
|
<p>Fuehrt regelbasierte statische Code-Analyse durch, um Sicherheitsluecken und Anti-Patterns zu finden.</p>
|
|
<ul>
|
|
<li><strong>Unterstuetzte Sprachen:</strong> Python, JavaScript, TypeScript, Go, Java</li>
|
|
<li><strong>Regelsets:</strong> OWASP Top 10, CWE, Security Best Practices</li>
|
|
<li><strong>Findings:</strong> SQL Injection, XSS, Path Traversal, Insecure Deserialization</li>
|
|
</ul>
|
|
|
|
<h4>🐍 Bandit - Python Security Linter</h4>
|
|
<p>Spezialisierter Security-Linter fuer Python-Code mit Fokus auf haeufige Sicherheitsprobleme.</p>
|
|
<ul>
|
|
<li><strong>Checks:</strong> Hardcoded Passwords, SQL Injection, Shell Injection</li>
|
|
<li><strong>Severity Levels:</strong> LOW, MEDIUM, HIGH</li>
|
|
<li><strong>Confidence:</strong> LOW, MEDIUM, HIGH</li>
|
|
</ul>
|
|
|
|
<h4>🔒 Trivy - Container & Filesystem Scanner</h4>
|
|
<p>Scannt Container-Images und Dateisysteme auf bekannte Schwachstellen (CVEs).</p>
|
|
<ul>
|
|
<li><strong>Scan-Typen:</strong> Container Images, Filesystems, Git Repositories</li>
|
|
<li><strong>Datenbanken:</strong> NVD, GitHub Advisory, Alpine SecDB, RedHat OVAL</li>
|
|
<li><strong>Ausgabe:</strong> CVE-ID, Severity, Fixed Version, Description</li>
|
|
</ul>
|
|
|
|
<h4>🐛 Grype - Dependency Vulnerability Scanner</h4>
|
|
<p>Analysiert Software-Abhaengigkeiten auf bekannte Sicherheitsluecken.</p>
|
|
<ul>
|
|
<li><strong>Package Manager:</strong> npm, pip, go mod, Maven, Gradle</li>
|
|
<li><strong>Input:</strong> SBOM (CycloneDX/SPDX), Lockfiles, Container Images</li>
|
|
<li><strong>Matching:</strong> CPE-basiert, Package URL (purl)</li>
|
|
</ul>
|
|
|
|
<h4>📦 Syft - SBOM Generator</h4>
|
|
<p>Erstellt Software Bill of Materials (SBOM) fuer Compliance und Supply-Chain-Security.</p>
|
|
<ul>
|
|
<li><strong>Formate:</strong> CycloneDX (JSON/XML), SPDX, Syft JSON</li>
|
|
<li><strong>Erfassung:</strong> Packages, Lizenzen, Versionen, Checksums</li>
|
|
<li><strong>Compliance:</strong> NIS2, ISO 27001, DSGVO Art. 32</li>
|
|
</ul>
|
|
|
|
<h3>2. Severity-Klassifizierung</h3>
|
|
<table className="min-w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b">
|
|
<th className="text-left py-2">Severity</th>
|
|
<th className="text-left py-2">CVSS Score</th>
|
|
<th className="text-left py-2">Reaktionszeit</th>
|
|
<th className="text-left py-2">Beispiele</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs font-semibold">CRITICAL</span></td><td>9.0 - 10.0</td><td>Sofort (24h)</td><td>RCE, Auth Bypass, Exposed Secrets</td></tr>
|
|
<tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-orange-100 text-orange-800 rounded text-xs font-semibold">HIGH</span></td><td>7.0 - 8.9</td><td>1-3 Tage</td><td>SQL Injection, XSS, Path Traversal</td></tr>
|
|
<tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded text-xs font-semibold">MEDIUM</span></td><td>4.0 - 6.9</td><td>1-2 Wochen</td><td>Information Disclosure, CSRF</td></tr>
|
|
<tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-green-100 text-green-800 rounded text-xs font-semibold">LOW</span></td><td>0.1 - 3.9</td><td>Naechster Sprint</td><td>Minor Info Leak, Best Practice</td></tr>
|
|
<tr><td className="py-2"><span className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs font-semibold">INFO</span></td><td>0.0</td><td>Optional</td><td>Empfehlungen, Hinweise</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>3. Scan-Workflow</h3>
|
|
<pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
|
|
{`┌─────────────────────────────────────────────────────────────┐
|
|
│ Security Scan Pipeline │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ 1. Secrets Detection (Gitleaks) │
|
|
│ └── Scannt Git-Historie nach API-Keys & Credentials │
|
|
│ ↓ │
|
|
│ 2. Static Analysis (Semgrep + Bandit) │
|
|
│ └── Code-Analyse auf Sicherheitsluecken │
|
|
│ ↓ │
|
|
│ 3. Dependency Scan (Trivy + Grype) │
|
|
│ └── CVE-Check aller Abhaengigkeiten │
|
|
│ ↓ │
|
|
│ 4. SBOM Generation (Syft) │
|
|
│ └── Software Bill of Materials erstellen │
|
|
│ ↓ │
|
|
│ 5. Report & Dashboard │
|
|
│ └── Ergebnisse aggregieren und visualisieren │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘`}
|
|
</pre>
|
|
|
|
<h3>4. Remediation-Strategien</h3>
|
|
|
|
<h4>Bei Secrets-Findings:</h4>
|
|
<ol>
|
|
<li>Secret sofort rotieren (neue API-Keys, Passwoerter)</li>
|
|
<li>Git-Historie bereinigen (BFG Repo-Cleaner oder git filter-branch)</li>
|
|
<li>Betroffene Systeme auf unauthorisierte Zugriffe pruefen</li>
|
|
<li>Secret-Scanning in Pre-Commit-Hooks aktivieren</li>
|
|
</ol>
|
|
|
|
<h4>Bei SAST-Findings:</h4>
|
|
<ol>
|
|
<li>Finding-Details und betroffene Code-Stelle analysieren</li>
|
|
<li>Empfohlene Fix-Strategie aus Semgrep-Dokumentation anwenden</li>
|
|
<li>Unit-Tests fuer den Fix schreiben</li>
|
|
<li>Code-Review durch Security-erfahrenen Entwickler</li>
|
|
</ol>
|
|
|
|
<h4>Bei Dependency-Vulnerabilities:</h4>
|
|
<ol>
|
|
<li>Pruefen ob ein Patch/Update verfuegbar ist</li>
|
|
<li>Abhaengigkeit auf gepatchte Version aktualisieren</li>
|
|
<li>Falls kein Patch: Workaround oder Alternative evaluieren</li>
|
|
<li>Temporaer: WAF-Regel als Mitigation</li>
|
|
</ol>
|
|
|
|
<h3>5. CI/CD Integration</h3>
|
|
<p>Security-Scans sind in die Gitea Actions Pipeline integriert:</p>
|
|
<ul>
|
|
<li><strong>Pre-Commit:</strong> Gitleaks (lokale Secrets-Pruefung)</li>
|
|
<li><strong>Pull Request:</strong> Semgrep, Bandit, Trivy (Blocking bei Critical)</li>
|
|
<li><strong>Main Branch:</strong> Full Scan + SBOM-Update</li>
|
|
<li><strong>Nightly:</strong> Dependency-Update-Check</li>
|
|
</ul>
|
|
|
|
<h3>6. Compliance-Mapping</h3>
|
|
<table className="min-w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b">
|
|
<th className="text-left py-2">Regulation</th>
|
|
<th className="text-left py-2">Artikel</th>
|
|
<th className="text-left py-2">Erfuellt durch</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="border-b"><td className="py-2">DSGVO</td><td>Art. 32</td><td>Alle Security-Scans, Vulnerability Management</td></tr>
|
|
<tr className="border-b"><td className="py-2">NIS2</td><td>Art. 21</td><td>SBOM, Supply-Chain-Security, Incident Response</td></tr>
|
|
<tr className="border-b"><td className="py-2">ISO 27001</td><td>A.12.6</td><td>Vulnerability Management, Patch Management</td></tr>
|
|
<tr><td className="py-2">OWASP</td><td>Top 10</td><td>SAST (Semgrep), Secrets Detection</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>7. API-Endpunkte</h3>
|
|
<table className="min-w-full text-sm font-mono">
|
|
<thead>
|
|
<tr className="border-b">
|
|
<th className="text-left py-2">Methode</th>
|
|
<th className="text-left py-2">Endpoint</th>
|
|
<th className="text-left py-2 font-sans">Beschreibung</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/tools</td><td className="font-sans">Tool-Status abrufen</td></tr>
|
|
<tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/findings</td><td className="font-sans">Alle Findings abrufen</td></tr>
|
|
<tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/summary</td><td className="font-sans">Severity-Zusammenfassung</td></tr>
|
|
<tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/history</td><td className="font-sans">Scan-Historie</td></tr>
|
|
<tr className="border-b"><td className="py-2"><span className="bg-green-100 text-green-700 px-1 rounded">POST</span></td><td>/api/v1/security/scan/all</td><td className="font-sans">Full Scan starten</td></tr>
|
|
<tr><td className="py-2"><span className="bg-green-100 text-green-700 px-1 rounded">POST</span></td><td>/api/v1/security/scan/[tool]</td><td className="font-sans">Einzelnes Tool scannen</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|