Formulare für Cobrowsing vorbereiten

Wenn ein Agent eine Cobrowsing-Sitzung startet, streamt Univerx eine Live-Darstellung des DOM des Besuchers an den Agenten. Formulareingaben sind in diesem Stream enthalten, damit der Agent sehen kann, was der Besucher ausfüllt, und ihn Schritt für Schritt begleiten kann. Das ist gewollt und nützlich — aber bestimmte Felder sollten niemals für einen Agenten sichtbar sein, wie Passwörter, Zahlungskartennummern und andere personenbezogene Daten (PII).

Diese Anleitung gilt für beide Integrationsmethoden — das eingebettete Widget und das Client SDK. Maskierung erfolgt auf der DOM-Serialisierungsebene, bevor Daten den Browser des Besuchers verlassen. Die HTML-Attribute und CSS-Klassen funktionieren daher unabhängig davon, wie Sie Univerx integriert haben.

Diese Anleitung erklärt, was automatisch maskiert wird und wie Sie weitere Felder selbst markieren können.

Wie Maskierung funktioniert

Maskierung greift auf Serialisierungsebene ein, bevor Daten den Browser des Besuchers verlassen. Wenn ein Feld maskiert ist:

• Sein aktueller Wert wird niemals erfasst oder übertragen.
• Eingabe- und Änderungsereignisse für dieses Feld werden still verworfen — der Agent kann den Wert nicht durch Wiedergabe von Tastatureingaben rekonstruieren.
• Der Agent sieht das Feld normal in seiner Ansicht gerendert, jedoch mit einem Platzhalter (z. B. ••••••••) anstelle des echten Wertes.
• Label, Platzhaltertext und alle anderen Attribute des Felds sind weiterhin sichtbar, damit der Agent den Kontext verstehen kann.

Blockierung ist strenger: Ein blockiertes Element wird vollständig aus dem DOM-Snapshot ausgeschlossen und der Agent kann es überhaupt nicht sehen.

Automatische Maskierung

Das SDK maskiert folgende Felder automatisch, ohne zusätzlichen Code:

Was maskiert wird	Warum
<input type="password">	Immer sensibel
<input type="hidden">	Enthält oft CSRF-Token oder Sitzungs-IDs
<input type="email">	Enthält persönliche E-Mail-Adressen
<input type="tel">	Enthält persönliche Telefonnummern
autocomplete="current-password" oder "new-password"	Passwort-Manager befüllen diese
autocomplete="cc-number", "cc-exp", "cc-csc", "credit-card"	Zahlungskartendaten
name enthält password, pass, pwd (bei input, textarea, select)	Gängige Namenskonventionen für Passwörter
name enthält credit, card, ccv, cvv (bei input, textarea, select)	Gängige Namenskonventionen für Kartendaten
name enthält ssn, social (bei input, textarea, select)	Sozialversicherungsnummern
name enthält csrf, xsrf, token, session, auth	Sicherheits-Token
Jeder Wert, der einer 12–19-stelligen Ziffernfolge entspricht	In generische Eingaben eingetippte Kreditkartennummern
Jeder Wert, der einem SVN-Muster entspricht (z. B. 123-45-6789)	In generische Eingaben eingetippte Sozialversicherungsnummern
Jeder Wert, der einer E-Mail-Adresse entspricht	In generische Eingaben eingetippte E-Mail-Adressen

Hinweis

Die automatische Maskierung ist ein Best-Effort-Sicherheitsnetz. Verlassen Sie sich nicht allein darauf für Felder, die regulierte oder vertraglich sensible Daten enthalten — wenden Sie immer explizite Maskierung (siehe unten) auf Felder an, von denen Sie wissen, dass sie sensibel sind.

Ein Feld explizit maskieren

Fügen Sie das Attribut data-cobrowse-mask oder die CSS-Klasse cobrowse-mask zu jedem Input-, Textarea- oder Select-Element hinzu, das Sie maskieren möchten.

Über das Datenattribut

<!-- SVN-Feld – Agent sieht ••••••••, nicht den echten Wert -->
<input type="text" name="ssn" data-cobrowse-mask />

<!-- Geburtsdatum -->
<input type="text" name="date_of_birth" data-cobrowse-mask />

<!-- Eine Textarea mit sensiblem Freitext -->
<textarea name="medical_notes" data-cobrowse-mask></textarea>

Über eine CSS-Klasse

Nützlich, wenn Sie Maskierung lieber zentral über ein Designsystem oder Hilfsklassen steuern möchten:

<input type="text" name="ssn" class="cobrowse-mask" />

Beide Ansätze sind gleichwertig und können frei in Ihrer Codebasis kombiniert werden.

React-Beispiel

export function PersonalDetailsForm() {
  return (
    <form>
      <label>
        Vollständiger Name
        <input type="text" name="full_name" />
      </label>

      {/* SVN ist sensibel – maskieren */}
      <label>
        Sozialversicherungsnummer
        <input type="text" name="ssn" data-cobrowse-mask />
      </label>

      {/* Geburtsdatum ist personenbezogen – maskieren */}
      <label>
        Geburtsdatum
        <input type="date" name="dob" data-cobrowse-mask />
      </label>
    </form>
  );
}

Ein Element vollständig blockieren

Verwenden Sie data-cobrowse-block oder die CSS-Klasse cobrowse-block, wenn der Agent gar nichts sehen soll — nicht einmal den Feldrahmen oder das Label. Das Element und alle seine Kindelemente werden vollständig aus dem DOM-Snapshot ausgeschlossen.

<!-- Agent kann dieses Element überhaupt nicht sehen -->
<div class="sensitive-section" data-cobrowse-block>
  <label>Konto-PIN</label>
  <input type="text" name="pin" />
</div>

Achtung

Blockierung verbirgt dem Agenten auch den Kontext, nicht nur den Wert. Bevorzugen Sie Maskierung für einzelne Eingaben, damit der Agent weiterhin verstehen kann, was der Besucher ausfüllt. Verwenden Sie Blockierung für ganze Abschnitte, die tabu sind, wie eingebettete Zahlungs-iFrames von Drittanbietern oder vertrauliche interne Bereiche.

Maskierung vs. Blockierung: wann was verwenden

Szenario	Empfohlener Ansatz
Passwort- oder PIN-Eingabe	Automatisch – keine Aktion erforderlich, oder data-cobrowse-mask zur Klarheit hinzufügen
SVN, Steuer-ID, Geburtsdatum	data-cobrowse-mask
Medizinische oder rechtliche Freitextfelder	data-cobrowse-mask
Gesamter Zahlungsformular-Abschnitt	data-cobrowse-block
Drittanbieter-iFrame (z. B. Stripe Elements)	data-cobrowse-block am Container
Interne Admin-Notizen, die für den Besucher nicht relevant sind	data-cobrowse-block

Checkliste vor dem Go-live

Überprüfen Sie vor der Aktivierung von Cobrowsing in der Produktion jedes Formular, mit dem ein Besucher während einer Support-Sitzung interagieren könnte:

• Alle Passwort- und PIN-Eingaben sind maskiert (automatisch, aber überprüfen).
• Zahlungskartenfelder sind maskiert oder der Zahlungsabschnitt ist blockiert.
• Von Behörden ausgestellte ID-Nummern (SVN, Steuer-ID, Reisepass) haben data-cobrowse-mask.
• Geburtsdatum und andere personenbezogene Felder haben data-cobrowse-mask.
• Eingebettete Drittanbieter-Komponenten (Zahlungs-iFrames, Identitätsverifizierungs-Widgets) sind mit data-cobrowse-block blockiert.
• Freitextfelder, in die Besucher sensible Informationen eingeben könnten, sind maskiert.

Tipp

Bitten Sie Ihren Datenschutzbeauftragten oder Ihre Rechtsabteilung, zu prüfen, welche Felder in Ihrer Anwendung unter Ihre Datenschutzerklärung oder relevante Gesetze (z. B. DSGVO, HIPAA) fallen. Nutzen Sie diese Liste als Grundlage für die obige Checkliste.