Screenshots & Visual Diff

Drei dedizierte Viewports werden in Playwright-Chromium aufgenommen: Desktop 1280×800 (Mac Chrome UA), Tablet 820×1180 (iPad Safari UA, mobile-Profil), Mobile 375×812 (iPhone Safari UA, mobile-Profil). Jeder Viewport wird separat verglichen — Sie sehen sofort, ob ein Bug nur Mobile betrifft.

Screenshots über 50+ echte Viewports: iPhone 17 Pro Max / 17 Pro / 16 Pro Max / 16 Pro / 16 Plus / 16 / 16e / 15-Serie / SE, Galaxy S25 Ultra / S25+ / S25 / S24-Serie, Pixel 10 Pro XL / 10 / 9-Serie / 8-Serie, OnePlus 13, Xiaomi 15, Galaxy Z Fold 6 (entfaltet+zugeklappt), Z Flip 6, Pixel 9 Pro Fold, iPad Pro M4 13/11, iPad Air M3, iPad Mini A17, Galaxy Tab S10 Ultra/+, MacBook Air 13/Pro 14/16, FHD/QHD/4K/5K, Ultrawide 21:9/32:9 — plus Landscape-Varianten für alle Schlüsselgeräte und eigene Pixelgrößen. Smart-Picker mit Search, Category-Chips (NEU 2025/26, Foldables, Landscape, Vorgänger/Legacy) und visuellem Mini-Mockup pro Gerät. Paralleler Render (standardmäßig 4 Chromium-Contexts gleichzeitig, geteilter URL-Fetch/Cache → deutlich schneller). Jedes Gerät wird in Hell- UND Dunkel-Theme aufgenommen. Plan-Gates: Free 4 Geräte × 1 Scan/Tag, Starter 7 × 30/Monat, Business 15 × 200/Monat, Agency unbegrenzt. Eigene Pixelgrößen sind bis 4000×4000 px erlaubt, bis zu 20 Custom-Viewports pro Scan.

Wenn Sie ein neues Cookie-Banner einfügen oder eine Section-Höhe ändern, verschiebt sich der gesamte darunterliegende Inhalt — und ohne Korrektur würde der Diff jeden Pixel weiter unten als „geändert“ markieren. XICTRAQ scannt vertikale Verschiebungen automatisch (grob bis ±80 px, höchstens 5 % der Bildhöhe, dann ±3 px fein) und richtet die Bilder vor dem Diff aus. Ergebnis: Sie sehen nur echte Änderungen, keine kosmetischen Reflows.

Manche Sites zeigen pro Reload zufällige Inhalte (rotierende Banner, dynamische Reviews, A/B-Test). Übersteigt der y-shift-korrigierte Diff gegen die Baseline 3,5 %, führt XICTRAQ nach 15 Sekunden einen zweiten Screenshot durch und vergleicht die zwei aufeinanderfolgenden Aufnahmen miteinander. Unterscheiden die beiden Läufe sich bereits um mehr als 2 % und erklärt dieses Rauschen den Unterschied zur Baseline weitgehend (Rest unter 3 Prozentpunkten), rendert die Seite von sich aus inkonsistent — der Befund wird als „Flap“ markiert (flap_detected) und unterdrückt: kein Changelog-Eintrag, kein Alarm. Aus Ressourcengründen läuft dieser 15-Sekunden-Rescan pro Prüfzyklus nur für die ersten zwei geänderten Seiten.

Auch lange Seiten werden vollständig gescrollt und als Full-Height-Screenshot erfasst — eine Änderung im Footer am Ende einer 4000-px-Seite wird genauso erkannt wie eine im Hero.

Statt Sie mit Pixel-Differenzen alleine zu lassen, beschreibt XICTRAQ pro Diff den Anteil veränderter Pixel und ob sich die Seitenhöhe verschoben hat — regelbasiert, ohne KI-Halluzinations-Risiko. Jeder Changelog-Eintrag bekommt einen Schweregrad aus festen Schwellen: > 3,5 % Info, > 10 % Warnung, > 20 % kritisch. Erst ab 20 % geht zusätzlich ein eigener Alarm raus. Erkennt XICTRAQ ein Layout-/Längen-Artefakt (Höhendifferenz > 25 % oder vertikaler Versatz von 55 px und mehr), wird der Schweregrad bewusst auf Info gekappt und kein Alarm gefeuert — denn dann sind die Aufnahmen nicht direkt vergleichbar und der Pixel-Diff ist kein verlässliches Inhalts-Signal.

Damit ein und dieselbe Seite über Tage hinweg pixelstabil aussieht und nicht jeder Reflow als „Änderung“ gilt, stabilisiert XICTRAQ jede Aufnahme: Cookie-/Consent-Banner werden automatisch weggeklickt oder ausgeblendet, CSS-/JS-Animationen und Transitions auf 0 s eingefroren (kein halb-eingeblendeter Hero-Slider), horizontaler Overflow auf die exakte Viewport-Breite geklemmt und versehentlich geöffnete Off-Canvas-Menüs per Escape geschlossen. Tracker- und Analytics-Requests (inkl. der eigenen) werden blockiert, sodass der Screenshot selbst keine Besucher-Statistik verfälscht.

Jeder Viewport (Desktop, Tablet, Mobile) wird gegen seine eigene Baseline geprüft, und die Baseline ist an die volle URL gebunden (Host + Pfad) — mehrere überwachte Unterseiten derselben Domain überschreiben sich also nicht gegenseitig. Über die überwachten Inhaltsseiten erfasst XICTRAQ zusätzlich Screenshots ausgewählter Unterseiten in allen drei Viewports. Läuft das Monitoring auf einem entfernten Knoten, reist das Vorher-/Nachher-/Diff-Bild base64-kodiert (gedeckelt auf 4 MB je Bild) mit zur API, damit der Vergleich auch ohne gemeinsames Dateisystem archiviert werden kann.

Der prozentuale Anteil veränderter Pixel gegenüber der Baseline (visual_pct), bereits y-shift-korrigiert und flap-gefiltert. Eine großflächige visuelle Überschreibung — z. B. eine komplett ausgetauschte Startseite — schlägt hier sofort an, auch wenn der HTML-Code geschickt verschleiert wurde.

Das HTML wird vor dem Hashen normalisiert (Whitespace, dynamische Tokens, CSRF-Felder und Cache-Buster werden entfernt), sodass legitime Schwankungen keinen Fehlalarm auslösen. Ändert sich der Hash dennoch (html_changed), wurde an der Struktur oder den Inhalten geschraubt — selbst dann, wenn das gerenderte Bild fast identisch aussieht.

Ein struktureller Fingerprint des DOM zählt unter anderem alle externen Skript- und iframe-Hosts. Tauchen neue Fremd-Hosts auf, die nicht in der gelernten Baseline stehen (new_script_hosts, new_iframe_hosts), ist das ein starkes Indiz für ein eingeschleustes Skimming-Skript oder ein fremdes iframe — die klassische Magecart-Signatur.

Die drei Schichten werden nicht isoliert betrachtet, sondern zu einem einzigen Defacement-Score von 0 bis 100 zusammengeführt. Jedes Event listet die beteiligten Schichten (layer: pixel / html_hash / dom) mit Status und Detail auf, sodass Sie auf einen Blick sehen, welche Signale gemeinsam ausgeschlagen haben. Erst das Zusammenspiel mehrerer Schichten ergibt einen hohen Score — ein einzelnes harmloses Signal bleibt niedrig.

Nach dem Aktivieren etablieren die ersten 3 Screenshot-Läufe die Baseline (learning: true, learned_runs zählt mit). Während dieser Lernphase wird bewusst KEIN Alert ausgelöst — XICTRAQ lernt erst, wie Ihre Seite normal aussieht, welche externen Skript-Hosts legitim sind (baseline_script_hosts) und wie der HTML-Hash schwankt. Danach steht die Baseline (baseline_learned_at) und die Überwachung greift.

Die Defacement-Erkennung ist pro Website über einen Watch-Toggle zuschaltbar (watch: true). Standardmäßig ist sie aus — Sie aktivieren sie gezielt für die Seiten, bei denen eine Übernahme besonders schmerzhaft wäre, etwa Shop-Startseite, Checkout oder Login. Das Aktivieren startet automatisch die Lernphase.

Erreicht der Score 60 oder mehr, legt XICTRAQ ein Event an (status: open) und löst einen Alert mit der Severity „kritisch“ über Ihre konfigurierten Kanäle aus (E-Mail, Slack, Discord, Teams, Telegram, Webhook, Browser-Push). Das Event enthält Score, beteiligte Schichten, visual_pct, html_changed sowie die Listen neuer Skript-/iframe-Hosts — also alles, was Sie zur schnellen Einordnung brauchen.

Sinkt der Score in einem Folgelauf wieder unter 30, wird ein offenes Event automatisch auf „resolved“ gesetzt (resolved_at). So schließen sich kurzlebige Vorfälle — etwa eine versehentlich veröffentlichte Wartungsseite, die schnell zurückgerollt wurde — von selbst, ohne dass Sie manuell aufräumen müssen. Sie können ein Event jederzeit auch manuell als behoben markieren.

Die Baseline ändert sich bewusst NICHT von selbst — ein neuer Score überschreibt sie nie automatisch, damit ein Angreifer die Erkennung nicht durch schrittweise Veränderungen „einlernen“ kann. Nach einem geplanten Relaunch oder Redesign setzen Sie die Baseline per „Baseline neu lernen“ einmalig zurück; danach starten erneut 3 Lernläufe und legen den neuen Soll-Zustand fest.