Ce composant de thème ajoute une protection configurable pour les liens externes dans les messages cuits. Il applique des règles basées sur le niveau de confiance, des redirections optionnelles de connexion et d’information, des indicateurs visuels pour les domaines de confiance et une modale de confirmation de sortie personnalisable.
J’aimerais partager un Composant de Thème qui ajoute un contrôle granulaire sur les liens externes dans les messages cuits, combinant :
un contrôle d’accès basé sur le niveau de confiance
une protection pour les utilisateurs anonymes
une modale de confirmation de sortie personnalisée
et des indicateurs visuels pour les domaines de confiance par rapport aux domaines inconnus
Ce composant est conçu pour les communautés où les liens externes peuvent avoir des implications légales, de sécurité ou de confiance.
Fonctionnalités
Règles de niveau de confiance configurables
Tous les comportements basés sur le niveau de confiance sont entièrement configurables via les paramètres du thème.
Vous pouvez activer ou désactiver indépendamment :
le blocage des utilisateurs anonymes
le remplacement d’information pour TL0
l’exigence de révélation manuelle pour TL1
la modale de confirmation de sortie pour les niveaux de confiance supérieurs
Cela permet au composant de s’adapter à des politiques communautaires très différentes, allant d’un blindage strict des liens à une friction minimale pour l’utilisateur.
Liens externes conscients du niveau de confiance
Les liens externes se comportent différemment en fonction du niveau de confiance de l’utilisateur :
Utilisateurs anonymes
Les liens externes sont remplacés par un lien de connexion ou une URL personnalisée définie dans les paramètres.
TL0
Les liens sont remplacés par une redirection configurable, par exemple un sujet expliquant les niveaux de confiance ou toute autre URL définie dans les paramètres.
TL1
Les liens nécessitent une révélation manuelle (cliquer pour voir), puis cliquer sur le lien affiche la modale de confirmation de sortie.
TL2+
Les liens se comportent normalement mais affichent toujours une modale de confirmation de sortie.
Modale de confirmation de sortie
Avant de quitter le forum, les utilisateurs voient une modale qui :
Indique clairement qu’ils quittent la communauté
Affiche l’URL de destination complète dans des balises \u003ccode\u003e
Respecte la préférence de l’utilisateur external_links_in_new_tab
Ceci est particulièrement utile pour :
les communautés soumises à des contraintes de conformité
Comportement basé sur le domaine via les paramètres
Le composant introduit deux paramètres de thème :
internal_domains:
type: list
default: ""
description: "Vos domaines de forum et CDN (ex: example.com|example-cdn.com). Ceux-ci n'auront AUCUNE icône et AUCUNE modale."
excluded_domains:
type: list
default: ""
description: "Domaines externes de confiance (ex: youtube.com|google.com). Ceux-ci afficheront une icône de Cadenas mais ignoreront la modale/le blindage."
Domaines internes
Traités comme internes → pas d’icône, pas de modale
Domaines exclus (de confiance)
Affichent une icône de cadenas
Sautent le contrôle du niveau de confiance et la modale
Tous les autres liens externes
Affichent une icône de lien externe
Sont contrôlés et/ou confirmés en fonction du niveau de confiance
Indicateurs visuels (SCSS)
Les icônes sont ajoutées purement via CSS :
Liens externes inconnus → icône external-link
Liens externes de confiance → icône de cadenas (couleur succès)
Ceci maintient le DOM propre et évite l’injection d’icônes basée sur JS.
Nous avons en fait construit quelque chose de similaire où nous masquons également les badges de nombre de clics et les remplaçons par des badges vérifiés/danger.
Mais les visiteurs non connectés peuvent ouvrir un lien externe directement (ils sont autorisés à ouvrir des liens). C’est prévu ainsi et l’information/l’avertissement n’est montré qu’à certains niveaux de confiance ?
C’est super Don, merci de l’avoir créé et partagé !
Je me demande pourquoi les liens externes de confiance utilisent une icône de cadenas ? Je veux dire, cela peut être interprété comme « verrouillé » alors qu’ils sont autorisés.
J’essaierai ce composant ; il semble couvrir tous nos cas d’utilisation pour les liens externes. J’essaierai aussi de déplacer les icônes à droite, car je comprends que c’est le standard courant.
Comme toujours, je partage simplement mes réflexions et je serai ravi que le TC puisse être amélioré grâce à elles.
Remplacement des icônes mask-image SVG gérées manuellement par de vrais éléments <svg class="d-icon"> rendus via iconHTML(), insérés à côté des liens par secure-links.js
Ajout de paramètres :
exit_confirmation_continue_icon
external_link_icon,
trusted_link_icon,
external_link_icon_color,
trusted_link_icon_color,
link_icon_position (avant/après)
Correction d’un plantage lorsque enable_anonymous_blocking est désactivé : currentUser.trust_level était lu pour les utilisateurs anonymes (null), ce qui provoquait une erreur et laissait silencieusement le <a> d’origine non traité/non protégé ; les visiteurs anonymes obtiennent désormais un passage bien défini (icône + modale de confirmation optionnelle, sans filtrage par niveau de confiance)
Grâce aux dernières et rapides améliorations, je peux confirmer que ce composant Theme gère tous les cas d’usage que nous avions avec les liens externes.
Lors de l’aperçu d’un sujet dans la fenêtre modale d’aperçu des sujets, le clic sur une image pour l’agrandir (ouverture de la lightbox) déclenche également la fenêtre modale de « confirmation de sortie » du composant External Link Shield — alors que ces liens d’image ne sont pas des liens externes. Il s’agit d’images téléversées localement, servies depuis notre propre domaine/CDN, et non d’images hébergées ailleurs ou externes.
Le domaine du CDN est-il différent de celui de votre forum ? Si c’est le cas, vous devez également ajouter le domaine du CDN au paramètre internal_domains.
Je me demande si cette fonctionnalité fantastique pourrait être ajoutée aux liens de la barre latérale.
Nous avons plusieurs liens externes là-bas, et je pense qu’il serait une bonne idée de les styliser également. Peut-être sans modale et/ou restrictions, car la situation idéale est d’éviter les frictions inutiles (il s’agit de liens vérifiés).
Je suis curieux à ce sujet, car je ne suis pas sûr de bien comprendre le cas d’usage pour l’instant.
La barre latérale permet déjà d’attribuer une icône à chaque lien, et les liens ajoutés par un administrateur sont déjà vérifiés. Les sections de la barre latérale créées par les utilisateurs sont similaires en ce sens que l’utilisateur ajoute explicitement des liens qu’il connaît déjà et auxquels il fait confiance.
Je vois donc clairement l’intérêt d’appliquer le style des liens externes à cet endroit, mais je ne suis pas certain de la valeur supplémentaire que le composant apporterait au-delà du support existant des icônes dans la barre latérale, d’autant plus que vous avez mentionné ne pas vouloir de modale ni de restrictions.
Votre objectif principal serait-il simplement d’indiquer visuellement qu’un lien de la barre latérale pointe vers un site externe, en utilisant le même style/icône que le composant ?
Merci d’avoir pris le temps d’envisager cette option. C’est exactement cela, le comportement souhaité est d’informer les utilisateurs qu’ils accéderont à une nouvelle page.
Fonctionnalités
Règles de niveau de confiance configurables
Liens externes conscients du niveau de confiance
Modale de confirmation de sortie
Comportement basé sur le domaine via les paramètres
Indicateurs visuels (SCSS)
Cas d’utilisation
alors qu’ils sont autorisés.
: 
