feat: Cookie-Test tab — 3-phase consent test UI + API proxy
Third tab "Cookie-Test" in Compliance Agent: - Phase A: Before consent (tracking without permission) - Phase B: After rejection (CRITICAL if tracking persists) - Phase C: After acceptance (undocumented services) - CMP badge (Didomi, OneTrust, etc.) - Violation cards with severity badges and legal references Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,37 @@
|
|||||||
|
/**
|
||||||
|
* Consent Test API Proxy
|
||||||
|
* POST /api/sdk/v1/agent/consent-test → consent-tester:8094/scan
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server'
|
||||||
|
|
||||||
|
const CONSENT_TESTER_URL = process.env.CONSENT_TESTER_URL || 'http://bp-compliance-consent-tester:8094'
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const body = await request.text()
|
||||||
|
|
||||||
|
const response = await fetch(`${CONSENT_TESTER_URL}/scan`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body,
|
||||||
|
signal: AbortSignal.timeout(180000), // 3 min — 3 browser phases
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorText = await response.text()
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: `Consent-Tester: ${response.status}`, detail: errorText },
|
||||||
|
{ status: response.status }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.json(await response.json())
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Consent test proxy error:', error)
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Cookie-Test fehlgeschlagen oder Timeout' },
|
||||||
|
{ status: 503 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
interface Violation {
|
||||||
|
service: string
|
||||||
|
severity: string
|
||||||
|
text: string
|
||||||
|
legal_ref: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PhaseData {
|
||||||
|
scripts: string[]
|
||||||
|
cookies: string[]
|
||||||
|
tracking_services?: string[]
|
||||||
|
new_tracking?: string[]
|
||||||
|
violations?: Violation[]
|
||||||
|
undocumented?: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ConsentData {
|
||||||
|
banner_detected: boolean
|
||||||
|
banner_provider: string
|
||||||
|
phases: {
|
||||||
|
before_consent: PhaseData
|
||||||
|
after_reject: PhaseData
|
||||||
|
after_accept: PhaseData
|
||||||
|
}
|
||||||
|
summary: {
|
||||||
|
critical: number
|
||||||
|
high: number
|
||||||
|
undocumented: number
|
||||||
|
total_violations: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const SEV = {
|
||||||
|
CRITICAL: { bg: 'bg-red-100 border-red-300', text: 'text-red-800', badge: 'bg-red-600' },
|
||||||
|
HIGH: { bg: 'bg-orange-100 border-orange-300', text: 'text-orange-800', badge: 'bg-orange-500' },
|
||||||
|
}
|
||||||
|
|
||||||
|
function PhaseCard({ title, icon, data, type }: {
|
||||||
|
title: string; icon: string; data: PhaseData; type: 'before' | 'reject' | 'accept'
|
||||||
|
}) {
|
||||||
|
const violations = data.violations || []
|
||||||
|
const tracking = data.tracking_services || data.new_tracking || []
|
||||||
|
const undocumented = data.undocumented || []
|
||||||
|
const hasProblem = violations.length > 0 || undocumented.length > 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`border rounded-lg p-4 ${hasProblem ? 'border-red-200 bg-red-50' : 'border-green-200 bg-green-50'}`}>
|
||||||
|
<h4 className="text-sm font-semibold text-gray-900 mb-2 flex items-center gap-2">
|
||||||
|
<span>{icon}</span> {title}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
{/* Violations */}
|
||||||
|
{violations.map((v, i) => (
|
||||||
|
<div key={i} className={`mb-2 p-2 rounded border ${SEV[v.severity as keyof typeof SEV]?.bg || SEV.HIGH.bg}`}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className={`text-[10px] px-1.5 py-0.5 rounded text-white ${SEV[v.severity as keyof typeof SEV]?.badge || SEV.HIGH.badge}`}>
|
||||||
|
{v.severity}
|
||||||
|
</span>
|
||||||
|
<span className={`text-xs font-medium ${SEV[v.severity as keyof typeof SEV]?.text || SEV.HIGH.text}`}>
|
||||||
|
{v.service}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-700 mt-1">{v.text}</p>
|
||||||
|
<p className="text-[10px] text-gray-500 mt-0.5">{v.legal_ref}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Undocumented (Phase C only) */}
|
||||||
|
{undocumented.map((s, i) => (
|
||||||
|
<div key={i} className="mb-2 p-2 rounded border border-yellow-300 bg-yellow-50">
|
||||||
|
<span className="text-xs text-yellow-800">✗ {s} — nicht in Cookie-Policy dokumentiert</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Tracking services (no violations) */}
|
||||||
|
{violations.length === 0 && undocumented.length === 0 && tracking.length > 0 && (
|
||||||
|
<div className="text-xs text-green-700">
|
||||||
|
{tracking.map((t, i) => <div key={i}>✓ {t} — {type === 'accept' ? 'mit Consent OK' : 'erkannt'}</div>)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{violations.length === 0 && undocumented.length === 0 && tracking.length === 0 && (
|
||||||
|
<p className="text-xs text-green-700">✓ Keine Tracking-Dienste erkannt</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Cookie/Script count */}
|
||||||
|
<div className="flex gap-3 mt-2 text-[10px] text-gray-400">
|
||||||
|
<span>{data.scripts?.length || 0} Scripts</span>
|
||||||
|
<span>{data.cookies?.length || 0} Cookies</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ConsentTestResult({ data }: { data: ConsentData }) {
|
||||||
|
const s = data.summary
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className={`w-3 h-3 rounded-full ${data.banner_detected ? 'bg-green-500' : 'bg-red-500'}`} />
|
||||||
|
<span className="text-sm font-medium text-gray-900">
|
||||||
|
Cookie-Banner: {data.banner_detected ? data.banner_provider : 'Nicht erkannt'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{s.critical > 0 && (
|
||||||
|
<span className="text-xs px-2 py-1 rounded bg-red-600 text-white font-medium">
|
||||||
|
{s.critical} Kritisch
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{s.high > 0 && (
|
||||||
|
<span className="text-xs px-2 py-1 rounded bg-orange-500 text-white font-medium">
|
||||||
|
{s.high} Hoch
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{s.total_violations === 0 && (
|
||||||
|
<span className="text-xs px-2 py-1 rounded bg-green-500 text-white font-medium">
|
||||||
|
Keine Verstoesse
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Three Phases */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<PhaseCard
|
||||||
|
title="Phase A: Vor Einwilligung"
|
||||||
|
icon="🔍"
|
||||||
|
data={data.phases.before_consent}
|
||||||
|
type="before"
|
||||||
|
/>
|
||||||
|
{data.banner_detected && (
|
||||||
|
<>
|
||||||
|
<PhaseCard
|
||||||
|
title="Phase B: Nach Ablehnung"
|
||||||
|
icon="🚫"
|
||||||
|
data={data.phases.after_reject}
|
||||||
|
type="reject"
|
||||||
|
/>
|
||||||
|
<PhaseCard
|
||||||
|
title="Phase C: Nach Zustimmung"
|
||||||
|
icon="✅"
|
||||||
|
data={data.phases.after_accept}
|
||||||
|
type="accept"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* No banner warning */}
|
||||||
|
{!data.banner_detected && (
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-lg p-3 text-xs text-red-700">
|
||||||
|
<strong>Kein Cookie-Banner erkannt.</strong> Alle erkannten Tracking-Dienste laden ohne
|
||||||
|
Einwilligung — dies ist ein Verstoss gegen §25 TDDDG.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -6,9 +6,10 @@ import { AnalysisResult } from './_components/AnalysisResult'
|
|||||||
import { AnalysisHistory } from './_components/AnalysisHistory'
|
import { AnalysisHistory } from './_components/AnalysisHistory'
|
||||||
import { FollowUpQuestions } from './_components/FollowUpQuestions'
|
import { FollowUpQuestions } from './_components/FollowUpQuestions'
|
||||||
import { ScanResult } from './_components/ScanResult'
|
import { ScanResult } from './_components/ScanResult'
|
||||||
|
import { ConsentTestResult } from './_components/ConsentTestResult'
|
||||||
|
|
||||||
type AnalysisMode = 'pre_launch' | 'post_launch'
|
type AnalysisMode = 'pre_launch' | 'post_launch'
|
||||||
type AnalysisTab = 'quick' | 'scan'
|
type AnalysisTab = 'quick' | 'scan' | 'consent'
|
||||||
|
|
||||||
const MODES: { id: AnalysisMode; label: string; desc: string; icon: string }[] = [
|
const MODES: { id: AnalysisMode; label: string; desc: string; icon: string }[] = [
|
||||||
{ id: 'pre_launch', label: 'Internes Dokument', desc: 'Vor Veroeffentlichung pruefen', icon: '📋' },
|
{ id: 'pre_launch', label: 'Internes Dokument', desc: 'Vor Veroeffentlichung pruefen', icon: '📋' },
|
||||||
@@ -17,7 +18,8 @@ const MODES: { id: AnalysisMode; label: string; desc: string; icon: string }[] =
|
|||||||
|
|
||||||
const TABS: { id: AnalysisTab; label: string; info: string }[] = [
|
const TABS: { id: AnalysisTab; label: string; info: string }[] = [
|
||||||
{ id: 'quick', label: 'Schnellanalyse', info: 'Analysiert nur die eingegebene URL. Fuer einen umfassenden Check nutzen Sie den Website-Scan.' },
|
{ id: 'quick', label: 'Schnellanalyse', info: 'Analysiert nur die eingegebene URL. Fuer einen umfassenden Check nutzen Sie den Website-Scan.' },
|
||||||
{ id: 'scan', label: 'Website-Scan', info: 'Scannt automatisch 5-10 Unterseiten (Startseite, Datenschutz, Impressum, AGB, Cookies) und gleicht erkannte Dienste mit der Datenschutzerklaerung ab.' },
|
{ id: 'scan', label: 'Website-Scan', info: 'Scannt automatisch 5-10 Unterseiten und gleicht erkannte Dienste mit der Datenschutzerklaerung ab.' },
|
||||||
|
{ id: 'consent', label: 'Cookie-Test', info: 'Testet mit echtem Browser was VOR und NACH Cookie-Einwilligung geladen wird. Erkennt Verstoesse gegen §25 TDDDG.' },
|
||||||
]
|
]
|
||||||
|
|
||||||
export default function AgentPage() {
|
export default function AgentPage() {
|
||||||
@@ -28,6 +30,9 @@ export default function AgentPage() {
|
|||||||
const [scanError, setScanError] = useState<string | null>(null)
|
const [scanError, setScanError] = useState<string | null>(null)
|
||||||
const [scanData, setScanData] = useState<any>(null)
|
const [scanData, setScanData] = useState<any>(null)
|
||||||
const [scanHistory, setScanHistory] = useState<any[]>([])
|
const [scanHistory, setScanHistory] = useState<any[]>([])
|
||||||
|
const [consentLoading, setConsentLoading] = useState(false)
|
||||||
|
const [consentError, setConsentError] = useState<string | null>(null)
|
||||||
|
const [consentData, setConsentData] = useState<any>(null)
|
||||||
const { analyze, answerFollowUp, loading, error, result, history } = useAgentAnalysis()
|
const { analyze, answerFollowUp, loading, error, result, history } = useAgentAnalysis()
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
@@ -36,7 +41,7 @@ export default function AgentPage() {
|
|||||||
|
|
||||||
if (tab === 'quick') {
|
if (tab === 'quick') {
|
||||||
analyze(url.trim(), mode)
|
analyze(url.trim(), mode)
|
||||||
} else {
|
} else if (tab === 'scan') {
|
||||||
setScanLoading(true)
|
setScanLoading(true)
|
||||||
setScanError(null)
|
setScanError(null)
|
||||||
setScanData(null)
|
setScanData(null)
|
||||||
@@ -55,11 +60,28 @@ export default function AgentPage() {
|
|||||||
} finally {
|
} finally {
|
||||||
setScanLoading(false)
|
setScanLoading(false)
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
setConsentLoading(true)
|
||||||
|
setConsentError(null)
|
||||||
|
setConsentData(null)
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/sdk/v1/agent/consent-test', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ url: url.trim() }),
|
||||||
|
})
|
||||||
|
if (!res.ok) throw new Error(`Cookie-Test fehlgeschlagen: ${res.status}`)
|
||||||
|
setConsentData(await res.json())
|
||||||
|
} catch (e) {
|
||||||
|
setConsentError(e instanceof Error ? e.message : 'Unbekannter Fehler')
|
||||||
|
} finally {
|
||||||
|
setConsentLoading(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const isLoading = tab === 'quick' ? loading : scanLoading
|
const isLoading = tab === 'quick' ? loading : tab === 'scan' ? scanLoading : consentLoading
|
||||||
const currentError = tab === 'quick' ? error : scanError
|
const currentError = tab === 'quick' ? error : tab === 'scan' ? scanError : consentError
|
||||||
const currentTab = TABS.find(t => t.id === tab)!
|
const currentTab = TABS.find(t => t.id === tab)!
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -105,7 +127,7 @@ export default function AgentPage() {
|
|||||||
{/* URL Input */}
|
{/* URL Input */}
|
||||||
<form onSubmit={handleSubmit} className="flex gap-3">
|
<form onSubmit={handleSubmit} className="flex gap-3">
|
||||||
<input type="url" value={url} onChange={e => setUrl(e.target.value)}
|
<input type="url" value={url} onChange={e => setUrl(e.target.value)}
|
||||||
placeholder={tab === 'scan' ? 'https://www.example.com/' : 'https://example.com/datenschutz'}
|
placeholder={tab === 'consent' ? 'https://www.example.com/' : tab === 'scan' ? 'https://www.example.com/' : 'https://example.com/datenschutz'}
|
||||||
className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
|
className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
|
||||||
disabled={isLoading} required />
|
disabled={isLoading} required />
|
||||||
<button type="submit" disabled={isLoading || !url.trim()}
|
<button type="submit" disabled={isLoading || !url.trim()}
|
||||||
@@ -114,8 +136,8 @@ export default function AgentPage() {
|
|||||||
<><svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
<><svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||||
</svg>{tab === 'scan' ? 'Scanne...' : 'Analysiere...'}</>
|
</svg>{tab === 'consent' ? 'Teste Cookies...' : tab === 'scan' ? 'Scanne...' : 'Analysiere...'}</>
|
||||||
) : tab === 'scan' ? 'Website scannen' : 'Analysieren'}
|
) : tab === 'consent' ? 'Cookie-Test starten' : tab === 'scan' ? 'Website scannen' : 'Analysieren'}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@@ -143,6 +165,13 @@ export default function AgentPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Consent Test Result */}
|
||||||
|
{tab === 'consent' && consentData && (
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
|
||||||
|
<ConsentTestResult data={consentData} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* History */}
|
{/* History */}
|
||||||
{tab === 'quick' && (
|
{tab === 'quick' && (
|
||||||
<AnalysisHistory history={history} onSelect={r => { setUrl(r.url); analyze(r.url, mode) }} />
|
<AnalysisHistory history={history} onSelect={r => { setUrl(r.url); analyze(r.url, mode) }} />
|
||||||
@@ -152,7 +181,7 @@ export default function AgentPage() {
|
|||||||
<h3 className="text-sm font-medium text-gray-700 mb-3">Letzte Scans</h3>
|
<h3 className="text-sm font-medium text-gray-700 mb-3">Letzte Scans</h3>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{scanHistory.map((item, i) => (
|
{scanHistory.map((item, i) => (
|
||||||
<button key={i} onClick={() => { setUrl(item.url); }}
|
<button key={i} onClick={() => setUrl(item.url)}
|
||||||
className="w-full text-left p-3 bg-white border border-gray-200 rounded-lg hover:border-purple-300 hover:bg-purple-50 transition-colors">
|
className="w-full text-left p-3 bg-white border border-gray-200 rounded-lg hover:border-purple-300 hover:bg-purple-50 transition-colors">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<span className="text-xs font-medium text-gray-500 w-8">{item.pages_scanned}p</span>
|
<span className="text-xs font-medium text-gray-500 w-8">{item.pages_scanned}p</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user