External Link Shield – Bestätigung beim Verlassen & Vertrauensprüfung

[Don]

	Zusammenfassung	Diese Theme-Komponente fügt eine konfigurierbare Absicherung für externe Links in gekochten Beiträgen hinzu. Sie wendet Regeln basierend auf dem Vertrauenslevel, optionale Login- und Informations-Weiterleitungen, visuelle Indikatoren für vertrauenswürdige Domains und ein anpassbares Bestätigungs-Modal beim Verlassen an.
	Vorschau	Theme Creator
	Repository	https://github.com/VaperinaDEV/external-link-shield
	Installationsanleitung	Wie man ein Theme oder eine Theme-Komponente installiert
	Neu bei Discourse Themes?	Anfängerleitfaden zur Verwendung von Discourse Themes

Diese Theme-Komponente installieren

Hallo

Ich möchte eine Theme-Komponente vorstellen, die eine feingranulare Steuerung für externe Links in gekochten Beiträgen hinzufügt und Folgendes kombiniert:

• Zugriffskontrolle basierend auf dem Vertrauenslevel
• Schutz für anonyme Benutzer
• Ein benutzerdefiniertes Bestätigungs-Modal beim Verlassen
• und visuelle Indikatoren für vertrauenswürdige vs. unbekannte Domains

Diese Komponente wurde für Communities entwickelt, in denen externe Links rechtliche, sicherheitstechnische oder Vertrauensaspekte mit sich bringen können.

---

Funktionen

Konfigurierbare Regeln für Vertrauenslevel

Alle auf dem Vertrauenslevel basierenden Verhaltensweisen sind über Theme-Einstellungen vollständig konfigurierbar.

Sie können unabhängig voneinander aktivieren oder deaktivieren:

• Blockierung anonymer Benutzer
• TL0 Informations-Ersetzung
• TL1 Anforderung einer manuellen Freigabe
• Bestätigungs-Modal beim Verlassen für höhere Vertrauenslevel

Dies ermöglicht es der Komponente, sich an sehr unterschiedliche Community-Richtlinien anzupassen, von strikter Link-Absicherung bis hin zu minimaler Benutzerreaktion.

Vertrauenslevel-bewusste externe Links

Externe Links verhalten sich je nach Vertrauenslevel des Betrachters unterschiedlich:

• Anonyme Benutzer
  • Externe Links werden durch einen Login-Link oder eine in den Einstellungen definierte benutzerdefinierte URL ersetzt.
• TL0
  • Links werden durch eine konfigurierbare Weiterleitung ersetzt, zum Beispiel ein Thema, das die Vertrauenslevel erklärt, oder eine andere in den Einstellungen definierte URL.
• TL1
  • Links erfordern eine manuelle Freigabe (Klick zur Ansicht), und beim Klicken auf den Link wird das Bestätigungs-Modal beim Verlassen angezeigt.
• TL2+
  • Links verhalten sich normal, zeigen aber immer ein Bestätigungs-Modal beim Verlassen an.

---

Bestätigungs-Modal beim Verlassen

Bevor sie das Forum verlassen, sehen Benutzer ein Modal, das:

• Klar angibt, dass sie die Community verlassen
• Die vollständige Ziel-URL in <code>-Tags anzeigt
• Die external_links_in_new_tab-Präferenz des Benutzers respektiert

Dies ist besonders nützlich für:

• Compliance-intensive Communities
• Phishing-Abwehr
• Schulung weniger erfahrener Benutzer

---

Domain-basiertes Verhalten über Einstellungen

Die Komponente führt zwei Theme-Einstellungen ein:

internal_domains:
  type: list
  default: ""
  description: "Ihre Forum- und CDN-Domains (z.B. example.com|example-cdn.com). Diese erhalten KEIN Icon und KEIN Modal."

excluded_domains:
  type: list
  default: ""
  description: "Vertrauenswürdige externe Domains (z.B. youtube.com|google.com). Diese zeigen ein SCHLOSS-Icon, überspringen aber das Modal/die Absicherung."

• Interne Domains
  • Werden als intern behandelt → kein Icon, kein Modal
• Ausgeschlossene (vertrauenswürdige) Domains
  • Zeigen ein Schloss-Icon
  • Überspringen die Vertrauenslevel-Prüfung und das Modal
• Alle anderen externen Links
  • Zeigen ein externes-Link-Icon
  • Werden je nach Vertrauenslevel geprüft und/oder bestätigt

---

Visuelle Indikatoren (SCSS)

Icons werden rein über CSS hinzugefügt:

• Unbekannte externe Links → externes-Link-Icon
• Vertrauenswürdige externe Links → Schloss-Icon (Erfolgsfarbe)

Dies hält das DOM sauber und vermeidet das Injizieren von Icons basierend auf JavaScript.

Dieser Screenshot zeigt, wie die Komponente visuell unterscheidet zwischen:

• Ausgeschlossene Domains: vertrauenswürdige externe Links (Schloss-Icon, keine Bestätigung beim Verlassen),
• Interne Domains: interne Links (kein Icon, keine Bestätigung beim Verlassen),
• unbekannte externe Links (externes-Link-Icon mit Bestätigung beim Verlassen).

---

Anwendungsfälle

Diese Komponente ist nützlich, wenn Sie:

• Benutzer vor unsicheren oder irreführenden externen Links schützen möchten
• Neue Benutzer informieren möchten, bevor sie das Forum verlassen
• Die Vertrauensentwicklung der Community durchsetzen möchten
• Rechtliche / Compliance-Hinweise hinzufügen möchten, ohne die Benutzererfahrung zu beeinträchtigen

[jrgong]

Fantastische Theme-Komponente!!!

Wir haben tatsächlich etwas Ähnliches gebaut, bei dem wir auch Klickzähl-Abzeichen ausblenden und sie durch verifizierte/Gefahren-Abzeichen ersetzen.

Wir haben es hauptsächlich für unsere verifizierten/vertrauenswürdigen Anbieter und Händler verwendet, mit denen wir eine Partnerbeziehung haben.

Zusätzlich zeigt unser Popup auch Gutscheincodes an, die über den Objekt-Einstellungseditor der Theme-Komponente verwaltet werden.

[cnlanny]

Das ist eine großartige Themenkomponente! Vielen Dank für das Teilen!!!

[Jagster (Jakke Flemming)]

@Don

Alle anderen externen Links

• Sind gesperrt und/oder werden je nach Vertrauensstufe bestätigt

Aber nicht angemeldete Besucher können einen externen Link direkt öffnen (sie dürfen Links öffnen). So geplant und die Info/Warnung wird nur bestimmten TL angezeigt?

[祁同伟]

Rechtsklick zum Öffnen in neuem Tab überspringt die Überprüfung externer Links.

Kann dieser Teil eingeschränkt werden?

[satonotdead]

Das ist großartig, Don, danke, dass du es gebaut und geteilt hast!

@Don

• Vertrauenswürdige externe Links → Schloss-Symbol (Erfolgsfarbe)

Ich frage mich, warum für vertrauenswürdige externe Links ein Schloss-Symbol verwendet wird? Ich meine, es könnte als „gesperrt“ interpretiert werden , obwohl sie erlaubt sind.

Ich werde dieses Bauteil ausprobieren; es scheint alle unsere Anwendungsfälle für externe Links abzudecken. Ich werde auch versuchen, die Symbole nach rechts zu verschieben, da ich verstehe, dass dies der übliche Standard ist.

Wie immer teile ich nur meine Gedanken und freue mich, wenn sich das TC damit verbessern lässt.

[Don]

Hallo

Ich habe die Theme-Komponente auf v2.0 aktualisiert : DEV: Replace CSS-drawn link icons with configurable d-icon rendering; fix anonymous blocking crashAdd files via upload - Pull Request #1 - VaperinaDEV/external-link-shield - GitHub

Diese Aktualisierung enthält:

• Ersetzung der manuell gepflegten SVG-mask-image-Icons durch echte <svg class="d-icon">-Elemente, die über iconHTML() gerendert und von secure-links.js neben Links eingefügt werden

• Hinzufügen von Einstellungen:

  • exit_confirmation_continue_icon
  • external_link_icon,
  • trusted_link_icon,
  • external_link_icon_color,
  • trusted_link_icon_color,
  • link_icon_position (vorher/nachher)

• Behebung eines Absturzes, wenn enable_anonymous_blocking deaktiviert ist: currentUser.trust_level wurde für anonyme Benutzer (null) gelesen, was zu einem Fehler führte und den ursprünglichen <a>-Tag stillschweigend un verarbeitet/un geschützt ließ; anonyme Besucher erhalten nun einen klar definierten Durchgang (Icon + optionales Bestätigungsdialogfeld, keine TL-Prüfung)

---

> ./support --coffee

[Moin]

@Don

• external_link_icon

Vorschlag für v2.1: Verwendung des Icon-Einstellungstyps

@Discourse

Icon-Einstellung:

banner_icon:
  default: bullhorn
  type: icon

Icon-Einstellungen bieten Site-Betreibern einen durchsuchbaren Icon-Auswahldialog, wobei der Wert der Icon-Name ist. Discourse fügt das ausgewählte Icon dem Sprite Sheet hinzu, sodass Sie es in Ihrem Theme rendern können, ohne es separat registrieren zu müssen.

[Don]

Cool, danke, habe es geändert.

[eisammy (Sammy)]

Woher sollte ich wissen, dass es diese Komponente gibt? Vielen Dank für die Wartung, ich werde sie testen

[satonotdead]

Mit den letzten und schnellen Verbesserungen kann ich bestätigen, dass dieses Theme-Component jeden Use-Case abdeckt, den wir mit externen Links hatten.

Respekt an den großartigen Don!

[joo (slower)]

Wenn ein Thema im Themen-Vorschau-Dialog (Topic Preview Modal) angezeigt wird, ruft das Klicken auf ein Bild zur Vergrößerung (Öffnen der Lightbox) auch den „Abbruch-Bestätigungs“-Dialog der Komponente External Link Shield auf – obwohl es sich bei diesen Bildlinks nicht um externe Links handelt. Es handelt sich um lokal hochgeladene Bilder, die von unserer eigenen Domain/CDN bereitgestellt werden, nicht um extern eingebundene oder externe Bilder.

[Don]

@joo

Es handelt sich um lokal hochgeladene Bilder, die von unserer eigenen Domain/CDN ausgeliefert werden, nicht um Hotlinks oder externe Bilder.

Unterscheidet sich die CDN-Domain von deiner Foren-Domain? Falls ja, musst du die CDN-Domain ebenfalls in der internal_domains-Einstellung hinzufügen.

[joo (slower)]

Ich habe meine eigene Domain zur intern_domains-Einstellung hinzugefügt, und damit war das Problem gelöst.

[satonotdead]

Ich frage mich, ob dieses tolle Feature auch für Links in der Seitenleiste hinzugefügt werden könnte.

Dort befinden sich mehrere externe Links, und ich denke, es wäre eine gute Idee, auch diese zu gestalten. Vielleicht ohne Modal und/oder Einschränkungen, da die ideale Situation darin besteht, unnötige Reibungsverluste zu vermeiden (es handelt sich um verifizierte Links).

[Don]

Mich interessiert dieses Thema, weil ich den Use Case noch nicht vollständig verstehe.

Die Seitenleiste erlaubt es bereits, jedem Link ein Icon zuzuweisen, und Links, die von einem Administrator hinzugefügt werden, sind bereits verifiziert. Von Benutzern erstellte Abschnitte in der Seitenleiste ähneln dem, da der Benutzer explizit Links hinzufügt, die er bereits kennt und denen er vertraut.

Ich kann den Nutzen darin definitiv sehen, dort die Styling-Regeln für externe Links anzuwenden, aber mir ist nicht ganz klar, welchen zusätzlichen Mehrwert das Komponente bieten würde, über die bestehende Icon-Unterstützung der Seitenleiste hinaus, besonders da du erwähnt hast, dass du weder das Modal noch Einschränkungen möchtest.

Wäre dein Hauptziel einfach, visuell anzuzeigen, dass ein Link in der Seitenleiste auf eine externe Seite verweist, und dafür dasselbe Styling/dasselbe Icon wie die Komponente zu verwenden?

[satonotdead]

@Don

Wäre dein Hauptziel, visuell anzuzeigen, dass ein Sidebar-Link auf eine externe Seite verweist, wobei dieselbe Gestaltung/dasselbe Symbol wie das Komponente verwendet wird?

Danke, dass du das in Betracht gezogen hast. Genau, das gewünschte Verhalten ist es, den Nutzern mitzuteilen, dass sie sich auf einer neuen Seite befinden werden.