feat(app): Schloss-Symbol fuer die Verbindung + abgelaufenes Zertifikat erlaubbar

Neben dem Zahnrad zeigt ein Schloss, wie sicher die Verbindung zu ARIA ist: Schloss = verschluesselt und in Ordnung, Schloss mit ! = Zertifikat-Problem (abgelaufen oder abgelehnt), durchgestrichen = unverschluesselt (TLS-Fallback oder so eingestellt). Antippen erklaert es in einfachen Worten; einmal pro App-Start kommt ein Hinweis, wenn das Zertifikat abgelaufen ist. Einstellungen → Verbindung: "Abgelaufenes Zertifikat akzeptieren". Toleriert GENAU das Ablaufdatum: die Kette wird zum Zeitpunkt kurz vor dem Ablauf gegen die System-CAs geprueft, der Hostname weiter von OkHttp. Selbstsignierte oder fremde Zertifikate kommen auch mit Schalter nicht durch (gegen das echte, abgelaufene RVS-Zertifikat und badssl.com getestet). Gilt fuer WebSocket und fetch (z.B. App-Update vom RVS). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-24 17:31:51 +02:00
parent 7da552f249
commit 3b63831c86
7 changed files with 514 additions and 3 deletions
@@ -0,0 +1,150 @@
+/**
+ * Schloss-Symbol in der Tab-Leiste (neben dem Zahnrad): zeigt, ob die
+ * Verbindung zu ARIA verschluesselt ist.
+ *
+ *   🔒        verschluesselt, alles in Ordnung
+ *   🔒 + !    Problem mit dem Zertifikat (abgelaufen / abgelehnt)
+ *   🔒 durchgestrichen   keine Verschluesselung (Fallback oder so eingestellt)
+ *
+ * Antippen erklaert in einfachen Worten, was das Symbol bedeutet.
+ * Einmal pro App-Start gibt's ausserdem einen Hinweis, wenn das Zertifikat
+ * abgelaufen ist — damit es nicht unbemerkt bleibt.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Alert, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import rvs, { SecurityState } from '../services/rvs';
+
+interface Props {
+  onOpenSettings: () => void;
+}
+
+const fmtDate = (ms: number) =>
+  ms ? new Date(ms).toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric',
+                                              hour: '2-digit', minute: '2-digit' }) : 'unbekannt';
+
+const SecurityLock: React.FC<Props> = ({ onOpenSettings }) => {
+  const [sec, setSec] = useState<SecurityState>(rvs.getSecurity());
+  const [open, setOpen] = useState(false);
+  const alerted = useRef<Set<string>>(new Set());
+
+  useEffect(() => rvs.onSecurityChange(setSec), []);
+
+  // Einmaliger Hinweis pro App-Start
+  useEffect(() => {
+    if (sec.kind === 'expired' && !alerted.current.has('expired')) {
+      alerted.current.add('expired');
+      Alert.alert('Zertifikat abgelaufen',
+        `Die Verbindung zu ARIA ist weiterhin verschlüsselt, aber das Sicherheits-Zertifikat `
+        + `des Servers ist seit ${fmtDate(sec.notAfter)} abgelaufen. Bitte dem Admin Bescheid geben.`);
+    } else if (sec.kind === 'cert_error' && sec.certStatus === 'expired' && !alerted.current.has('cert_error')) {
+      alerted.current.add('cert_error');
+      Alert.alert('Keine Verbindung — Zertifikat abgelaufen',
+        `Das Sicherheits-Zertifikat des Servers ist seit ${fmtDate(sec.notAfter)} abgelaufen, `
+        + `deshalb verbindet sich die App nicht.\n\nIn den Einstellungen unter „Verbindung“ kann man `
+        + `abgelaufene Zertifikate vorübergehend erlauben.`,
+        [{ text: 'OK' }, { text: 'Einstellungen', onPress: onOpenSettings }]);
+    }
+  }, [sec, onOpenSettings]);
+
+  const warn = sec.kind === 'expired' || sec.kind === 'cert_error';
+  const crossed = sec.kind === 'fallback' || sec.kind === 'plain';
+  if (sec.kind === 'unknown') return <View style={styles.slot} />;
+
+  let title = '';
+  let text = '';
+  if (sec.kind === 'secure') {
+    title = 'Verbindung verschlüsselt';
+    text = 'Alles in Ordnung. Die Verbindung zu ARIA ist verschlüsselt und das Zertifikat des Servers ist gültig.';
+  } else if (sec.kind === 'expired') {
+    title = 'Zertifikat abgelaufen';
+    text = `Die Verbindung ist verschlüsselt, aber das Zertifikat des Servers ist seit ${fmtDate(sec.notAfter)} `
+      + 'abgelaufen. Die App akzeptiert es, weil das in den Einstellungen so erlaubt ist. '
+      + 'Geprüft wird trotzdem, dass es wirklich das Zertifikat dieses Servers ist.\n\n'
+      + 'Das Zertifikat sollte erneuert werden.';
+  } else if (sec.kind === 'cert_error') {
+    title = 'Keine Verbindung — Zertifikat-Problem';
+    text = sec.certStatus === 'expired'
+      ? `Das Zertifikat des Servers ist seit ${fmtDate(sec.notAfter)} abgelaufen. Deshalb verbindet sich die App nicht.\n\n`
+        + 'In den Einstellungen unter „Verbindung“ kann man abgelaufene Zertifikate vorübergehend erlauben.'
+      : 'Das Zertifikat des Servers ist ungültig oder gehört nicht zu diesem Server. Zur Sicherheit verbindet sich '
+        + 'die App nicht.' + (sec.reason ? `\n\nGrund: ${sec.reason}` : '');
+  } else if (sec.kind === 'fallback') {
+    title = 'Nicht verschlüsselt (Notlösung)';
+    text = 'Die verschlüsselte Verbindung hat nicht geklappt. Die App ist deshalb ersatzweise UNVERSCHLÜSSELT '
+      + 'verbunden (TLS-Fallback).'
+      + (sec.certStatus === 'expired' ? `\n\nGrund: Das Zertifikat ist seit ${fmtDate(sec.notAfter)} abgelaufen.`
+        : sec.certStatus === 'invalid' ? '\n\nGrund: Das Zertifikat des Servers ist ungültig.'
+        : '\n\nGrund: Die verschlüsselte Verbindung kam nicht zustande.');
+  } else if (sec.kind === 'plain') {
+    title = 'Nicht verschlüsselt';
+    text = 'Für diese Verbindung ist keine Verschlüsselung eingestellt. Das ist nur im eigenen Heimnetz in Ordnung.';
+  }
+
+  return (
+    <>
+      <TouchableOpacity style={styles.slot} onPress={() => setOpen(true)} accessibilityLabel={title}>
+        <View>
+          <Text style={[styles.lock, crossed && styles.lockDim]}>{'🔒'}</Text>
+          {crossed && <View style={styles.strike} />}
+          {warn && <Text style={styles.bang}>!</Text>}
+        </View>
+      </TouchableOpacity>
+
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={() => setOpen(false)}>
+          <View style={styles.box}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.text}>{text}</Text>
+
+            <View style={styles.legend}>
+              <Text style={styles.legendRow}>{'🔒'}  verschlüsselt, alles in Ordnung</Text>
+              <Text style={styles.legendRow}>{'🔒'}<Text style={styles.legendBang}>!</Text>  Problem mit dem Zertifikat</Text>
+              <Text style={styles.legendRow}>{'🔒'}<Text style={styles.legendStrike}>/</Text>  nicht verschlüsselt</Text>
+            </View>
+
+            <View style={styles.buttons}>
+              {(sec.kind === 'cert_error' || sec.kind === 'expired' || sec.kind === 'fallback') && (
+                <TouchableOpacity style={styles.btn} onPress={() => { setOpen(false); onOpenSettings(); }}>
+                  <Text style={styles.btnText}>Einstellungen</Text>
+                </TouchableOpacity>
+              )}
+              <TouchableOpacity style={[styles.btn, styles.btnPrimary]} onPress={() => setOpen(false)}>
+                <Text style={styles.btnText}>OK</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  slot: { width: 52, alignItems: 'center', justifyContent: 'center' },
+  lock: { fontSize: 20 },
+  lockDim: { opacity: 0.7 },
+  strike: {
+    position: 'absolute', left: -3, right: -3, top: '50%', height: 2.5,
+    backgroundColor: '#FF3B30', transform: [{ rotate: '-45deg' }],
+  },
+  bang: {
+    position: 'absolute', right: -8, top: -6, minWidth: 15, height: 15, borderRadius: 8,
+    backgroundColor: '#FF9F0A', color: '#000', fontSize: 11, fontWeight: '900',
+    textAlign: 'center', lineHeight: 15, overflow: 'hidden',
+  },
+  overlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', padding: 24 },
+  box: { backgroundColor: '#1A1A2E', borderRadius: 14, padding: 20 },
+  title: { color: '#FFFFFF', fontSize: 17, fontWeight: '700', marginBottom: 10 },
+  text: { color: '#C8C8D8', fontSize: 14, lineHeight: 20 },
+  legend: { marginTop: 16, paddingTop: 12, borderTopWidth: 1, borderTopColor: '#2A2A3E' },
+  legendRow: { color: '#9090A8', fontSize: 13, marginVertical: 2 },
+  legendBang: { color: '#FF9F0A', fontWeight: '900' },
+  legendStrike: { color: '#FF3B30', fontWeight: '900' },
+  buttons: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 16, gap: 10 },
+  btn: { paddingVertical: 9, paddingHorizontal: 16, borderRadius: 8, backgroundColor: '#2A2A3E' },
+  btnPrimary: { backgroundColor: '#0096FF' },
+  btnText: { color: '#FFFFFF', fontWeight: '600' },
+});
+
+export default SecurityLock;
@@ -178,6 +178,14 @@ const SettingsScreen: React.FC = () => {
  const winDims = useWindowDimensions();
  const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
  const [manualToken, setManualToken] = useState('');
+  // Abgelaufenes Server-Zertifikat trotzdem akzeptieren (Kette + Hostname werden weiter geprueft)
+  const [allowExpiredCert, setAllowExpiredCert] = useState(false);
+  useEffect(() => { rvs.getAllowExpiredCert().then(setAllowExpiredCert); }, []);
+  const handleAllowExpiredCert = useCallback(async (value: boolean) => {
+    setAllowExpiredCert(value);
+    await rvs.setAllowExpiredCert(value);
+    rvs.connect(true);   // gleich mit der neuen Regel neu verbinden
+  }, []);
  const [manualHost, setManualHost] = useState('');
  const [manualPort, setManualPort] = useState('8765');
  const [currentMode, setCurrentMode] = useState('normal');
@@ -1450,6 +1458,24 @@ const SettingsScreen: React.FC = () => {
        <TouchableOpacity style={styles.connectButton} onPress={connectManually}>
          <Text style={styles.connectButtonText}>Verbinden</Text>
        </TouchableOpacity>
+
+        <View style={[styles.toggleRow, {marginTop: 16, borderTopWidth: 1, borderTopColor: '#1E1E2E', paddingTop: 12}]}>
+          <View style={styles.toggleInfo}>
+            <Text style={styles.toggleLabel}>Abgelaufenes Zertifikat akzeptieren</Text>
+            <Text style={styles.toggleHint}>
+              Notlösung, wenn das Zertifikat des Servers abgelaufen ist. Die Verbindung bleibt
+              verschlüsselt, und es wird weiter geprüft, dass es wirklich das Zertifikat dieses
+              Servers ist — nur das Ablaufdatum wird ignoriert. Wieder ausschalten, sobald das
+              Zertifikat erneuert ist.
+            </Text>
+          </View>
+          <Switch
+            value={allowExpiredCert}
+            onValueChange={handleAllowExpiredCert}
+            trackColor={{ false: '#2A2A3E', true: '#FF9F0A' }}
+            thumbColor={allowExpiredCert ? '#FFFFFF' : '#666680'}
+          />
+        </View>
      </View>

      {/* === Verbindungslog === */}
@@ -7,6 +7,9 @@
 */

 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { NativeModules } from 'react-native';
+
+const TlsTrust: any = NativeModules.TlsTrust;

 // --- Typen ---

@@ -27,6 +30,29 @@ export interface ConnectionConfig {
  useTLS: boolean;
 }

+/**
+ * Wie sicher ist die Verbindung? Fuer das Schloss-Symbol in der Tab-Leiste.
+ *   secure    — verschluesselt, Zertifikat in Ordnung
+ *   expired   — verschluesselt, aber das Zertifikat ist abgelaufen (per Schalter erlaubt)
+ *   cert_error— keine Verbindung, weil das Zertifikat abgelehnt wurde
+ *   fallback  — verbunden OHNE Verschluesselung, weil TLS fehlschlug
+ *   plain     — verbunden ohne Verschluesselung, so konfiguriert
+ *   unknown   — (noch) nichts Genaues
+ */
+export type SecurityKind = 'secure' | 'expired' | 'cert_error' | 'fallback' | 'plain' | 'unknown';
+
+export interface SecurityState {
+  kind: SecurityKind;
+  /** Pruefergebnis der App: ok | expired_accepted | expired | invalid | unknown */
+  certStatus: string;
+  /** Ablaufdatum des Server-Zertifikats (ms), 0 = unbekannt */
+  notAfter: number;
+  /** Bei fallback/cert_error: warum TLS nicht ging */
+  reason: string;
+}
+
+type SecurityCallback = (state: SecurityState) => void;
+
 type MessageCallback = (message: RVSMessage) => void;
 type StateCallback = (state: ConnectionState) => void;

@@ -64,6 +90,10 @@ class RVSConnection {
  private logListeners: LogCallback[] = [];
  private connectionLog: ConnectionLogEntry[] = [];
  private usingTLSFallback: boolean = false;
+  private securityListeners: SecurityCallback[] = [];
+  private security: SecurityState = { kind: 'unknown', certStatus: 'unknown', notAfter: 0, reason: '' };
+  /** Letzter Zertifikats-Fehler beim wss://-Versuch (bleibt bis wss:// wieder klappt) */
+  private certFailure: { status: string; notAfter: number; detail: string } | null = null;

  // --- Konfiguration ---

@@ -216,6 +246,7 @@ class RVSConnection {
        const tlsInfo = this.usingTLSFallback ? ' (TLS-Fallback: ws://)' : '';
        this.log('info', `Verbunden${tlsInfo}`);
        this.setState('connected');
+        this.updateSecurityOnOpen(useTLS);
        this.reconnectDelay = INITIAL_RECONNECT_DELAY_MS;
        this.startHeartbeat();
      };
@@ -239,6 +270,10 @@ class RVSConnection {
        this.clearTimers();
        this.ws = null;
        this.setState('disconnected');
+        this.setSecurity(this.certFailure
+          ? { kind: 'cert_error', certStatus: this.certFailure.status, notAfter: this.certFailure.notAfter,
+              reason: this.certFailure.detail }
+          : { kind: 'unknown', certStatus: 'unknown', notAfter: 0, reason: '' });

        // Sticky-Fallback-Reset: beim naechsten Reconnect wieder primary
        // (wss://) versuchen statt fuer immer auf ws:// zu kleben. War
@@ -258,6 +293,7 @@ class RVSConnection {
      this.ws.onerror = (error) => {
        const errorMsg = (error as any)?.message || 'Unbekannter Fehler';
        this.log('error', `WebSocket-Fehler: ${errorMsg}`);
+        if (useTLS) this.checkCertFailure(errorMsg);

        // TLS-Fallback: Wenn wss:// fehlschlaegt, auf ws:// wechseln
        if (this.config?.useTLS && !this.usingTLSFallback) {
@@ -287,6 +323,83 @@ class RVSConnection {
    }
  }

+  // --- Verbindungs-Sicherheit (Schloss-Symbol) ---
+
+  getSecurity(): SecurityState {
+    return this.security;
+  }
+
+  onSecurityChange(callback: SecurityCallback): () => void {
+    this.securityListeners.push(callback);
+    return () => {
+      this.securityListeners = this.securityListeners.filter(cb => cb !== callback);
+    };
+  }
+
+  private setSecurity(next: SecurityState): void {
+    const cur = this.security;
+    if (cur.kind === next.kind && cur.certStatus === next.certStatus
+        && cur.notAfter === next.notAfter && cur.reason === next.reason) return;
+    this.security = next;
+    this.securityListeners.forEach(cb => cb(next));
+  }
+
+  private async nativeCertStatus(): Promise<{ status: string; notAfter: number; detail: string }> {
+    try {
+      const r = await TlsTrust?.getStatus();
+      return { status: r?.status || 'unknown', notAfter: Number(r?.notAfter) || 0, detail: r?.detail || '' };
+    } catch (_) {
+      return { status: 'unknown', notAfter: 0, detail: '' };
+    }
+  }
+
+  private async updateSecurityOnOpen(viaTLS: boolean): Promise<void> {
+    if (viaTLS) {
+      this.certFailure = null;
+      const c = await this.nativeCertStatus();
+      if (c.status === 'expired_accepted') {
+        this.log('warn', `Zertifikat abgelaufen (${new Date(c.notAfter).toLocaleDateString()}) — per Einstellung akzeptiert`);
+      }
+      this.setSecurity({ kind: c.status === 'expired_accepted' ? 'expired' : 'secure',
+                         certStatus: c.status, notAfter: c.notAfter, reason: '' });
+    } else if (this.config?.useTLS) {
+      // wss:// ging nicht, ws:// schon → unverschluesselt per Fallback
+      this.setSecurity({ kind: 'fallback', certStatus: this.certFailure?.status || 'unknown',
+                         notAfter: this.certFailure?.notAfter || 0, reason: this.certFailure?.detail || '' });
+    } else {
+      this.setSecurity({ kind: 'plain', certStatus: 'unknown', notAfter: 0, reason: '' });
+    }
+  }
+
+  /** Lag der wss://-Fehler am Zertifikat? Dann merken (fuer Schloss + Hinweis). */
+  private async checkCertFailure(errorMsg: string): Promise<void> {
+    if (!/cert|trust anchor|chain validation|handshake|ssl/i.test(errorMsg)) return;
+    const c = await this.nativeCertStatus();
+    if (c.status !== 'expired' && c.status !== 'invalid') return;
+    this.certFailure = { status: c.status, notAfter: c.notAfter, detail: c.detail || errorMsg };
+    this.log('error', c.status === 'expired'
+      ? `Server-Zertifikat abgelaufen seit ${new Date(c.notAfter).toLocaleString()}`
+      : 'Server-Zertifikat ungueltig');
+    if (this.state !== 'connected') {
+      this.setSecurity({ kind: 'cert_error', certStatus: c.status, notAfter: c.notAfter,
+                         reason: this.certFailure.detail });
+    } else if (this.security.kind === 'fallback') {
+      // ws://-Fallback war schneller verbunden als diese Pruefung — Grund nachtragen
+      this.setSecurity({ ...this.security, certStatus: c.status, notAfter: c.notAfter,
+                         reason: this.certFailure.detail });
+    }
+  }
+
+  /** Schalter "Abgelaufenes Zertifikat akzeptieren" */
+  async getAllowExpiredCert(): Promise<boolean> {
+    try { return !!(await TlsTrust?.getStatus())?.allowExpired; } catch (_) { return false; }
+  }
+
+  async setAllowExpiredCert(value: boolean): Promise<void> {
+    try { await TlsTrust?.setAllowExpired(value); } catch (_) {}
+    this.log('info', `Abgelaufene Zertifikate ${value ? 'werden akzeptiert' : 'werden abgelehnt'}`);
+  }
+
  /** Reconnect mit exponentiellem Backoff planen */
  private scheduleReconnect(): void {
    this.log('info', `Reconnect in ${this.reconnectDelay / 1000}s...`);