Este componente de tema añade protección configurable para enlaces externos en publicaciones cocinadas. Aplica reglas basadas en el nivel de confianza, redirecciones opcionales de inicio de sesión e información, indicadores visuales para dominios de confianza y una ventana modal de confirmación de salida personalizable.
Me gustaría compartir un Componente de Tema que añade control detallado sobre los enlaces externos en publicaciones cocinadas, combinando:
control de acceso basado en el nivel de confianza
protección de usuario anónimo
una ventana modal de confirmación de salida personalizada
e indicadores visuales para dominios confiables versus desconocidos
Este componente está diseñado para comunidades donde los enlaces externos pueden implicar implicaciones legales, de seguridad o de confianza.
Características
Reglas de nivel de confianza configurables
Todos los comportamientos basados en el nivel de confianza son totalmente configurables a través de la configuración del tema.
Puede habilitar o deshabilitar independientemente:
bloqueo de usuarios anónimos
reemplazo informativo para TL0
requisito de revelación manual para TL1
ventana modal de confirmación de salida para niveles de confianza más altos
Esto permite que el componente se adapte a políticas comunitarias muy diferentes, desde un blindaje estricto de enlaces hasta una mínima fricción para el usuario.
Enlaces externos conscientes del nivel de confianza
Los enlaces externos se comportan de manera diferente según el nivel de confianza del espectador:
Usuarios anónimos
Los enlaces externos se reemplazan con un enlace de inicio de sesión o una URL personalizada definida en la configuración.
TL0
Los enlaces se reemplazan con una redirección configurable, por ejemplo, un tema que explica los niveles de confianza o cualquier otra URL definida en la configuración.
TL1
Los enlaces requieren revelación manual (clic para ver), luego hacer clic en el enlace muestra la ventana modal de confirmación de salida.
TL2+
Los enlaces se comportan normalmente pero siempre muestran una ventana modal de confirmación de salida.
Ventana modal de confirmación de salida
Antes de salir del foro, los usuarios ven una ventana modal que:
Indica claramente que están abandonando la comunidad
Muestra la URL de destino completa en etiquetas <code>
Respeta la preferencia del usuario external_links_in_new_tab
Comportamiento basado en el dominio a través de la configuración
El componente introduce dos configuraciones de tema:
internal_domains:
type: list
default: ""
description: "Sus dominios de foro y CDN (ej. example.com|example-cdn.com). Estos NO tendrán icono NI modal."
excluded_domains:
type: list
default: ""
description: "Dominios externos de confianza (ej. youtube.com|google.com). Estos mostrarán un icono de CANDADO pero omitirán el modal/blindaje."
Dominios internos
Tratados como internos → sin icono, sin modal
Dominios excluidos (de confianza)
Muestran un icono de candado
Omiten la verificación del nivel de confianza y el modal
Todos los demás enlaces externos
Muestran un icono de enlace externo
Están sujetos a verificación y/o confirmación según el nivel de confianza
Indicadores visuales (SCSS)
Los iconos se añaden puramente a través de CSS:
Enlaces externos desconocidos → icono de enlace externo
Enlaces externos de confianza → icono de candado (color de éxito)
Esto mantiene el DOM limpio y evita la inyección de iconos basada en JS.
Lo usamos principalmente para nuestros proveedores y comerciantes verificados/de confianza con los que tenemos una asociación de afiliados.
Además, nuestra ventana emergente también muestra códigos de cupón que se gestionan a través del editor de configuración de Objetos del componente de tema.
Pero los visitantes no registrados pueden abrir un enlace externo directamente (tienen permitido abrir enlaces). ¿Está planeado así y la información/advertencia solo se muestra a ciertos niveles de confianza (TL)?
Esto es genial, Don. ¡Gracias por crearlo y compartirlo!
Me pregunto por qué los enlaces externos de confianza usan un icono de candado. Quiero decir, se puede interpretar como “bloqueado” cuando en realidad están permitidos.
Voy a probar este componente; parece cubrir todos nuestros casos de uso para enlaces externos. También voy a intentar mover los iconos a la derecha, ya que entiendo que ese es el estándar común.
Como siempre, solo comparto mis ideas y me alegra si el TC puede mejorarse con ellas.
Sustitución de los iconos mask-image de SVG mantenidos manualmente por elementos reales <svg class="d-icon"> renderizados mediante iconHTML(), insertados junto a los enlaces por secure-links.js
Añadido de ajustes:
exit_confirmation_continue_icon
external_link_icon,
trusted_link_icon,
external_link_icon_color,
trusted_link_icon_color,
link_icon_position (antes/después)
Corrección de un error que causaba el bloqueo cuando enable_anonymous_blocking está desactivado: currentUser.trust_level se leía para usuarios anónimos (null), lo que provocaba una excepción y dejaba silenciosamente el <a> original sin procesar ni proteger; ahora los visitantes anónimos obtienen un paso definido (icono + modal de confirmación opcional, sin control por nivel de confianza)
Al previsualizar un tema en el modal de vista previa, hacer clic en una imagen para ampliarla (abrir el lightbox) también activa el modal de «confirmación de salida» del componente External Link Shield, aunque estos enlaces de imagen no son enlaces externos. Son imágenes subidas localmente y servidas desde nuestro propio dominio/CDN, no imágenes enlazadas externamente ni de fuentes externas.
Me pregunto si esta fantástica función podría añadirse a los enlaces de la barra lateral.
Tenemos varios enlaces externos allí, y creo que sería una buena idea estilizarlos también. Quizás sin modal y/o restricciones, ya que la situación ideal es evitar fricciones innecesarias (son enlaces verificados).
Me intriga un poco, porque todavía no estoy del todo seguro de entender el caso de uso.
La barra lateral ya permite asignar un icono a cada enlace, y los enlaces añadidos por un administrador ya están verificados. Las secciones de la barra lateral creadas por el usuario son similares en el sentido de que el usuario está añadiendo explícitamente enlaces que ya conoce y en los que confía.
Así que sin duda puedo ver el valor de aplicar el estilo de enlace externo allí, pero no estoy seguro de qué valor adicional aportaría el componente más allá del soporte de iconos existente de la barra lateral, especialmente dado que mencionaste que no quieres el modal ni las restricciones.
¿Tu objetivo principal sería simplemente indicar visualmente que un enlace de la barra lateral apunta a un sitio externo, utilizando el mismo estilo/icono que el componente?
Características
Reglas de nivel de confianza configurables
Enlaces externos conscientes del nivel de confianza
Ventana modal de confirmación de salida
Comportamiento basado en el dominio a través de la configuración
Indicadores visuales (SCSS)
Casos de uso
cuando en realidad están permitidos.
: 
