Curso HTML 5.4 Atributos target, rel y buenas prácticas de seguridad

• _self: Abre el enlace en la misma ventana o pestaña (comportamiento por defecto).
• _blank: Abre el enlace en una nueva pestaña o ventana.
• _parent: Abre el enlace en el framing parent si existe (caso de uso con framesets).
• _top: Abre el enlace en toda la ventana, saliendo de todos los frames.
• nombre-de-ventana: Abre el enlace en una ventana o pestaña con ese nombre (útil para grupos de enlaces).

Ejemplo básico

Visitar Ejemplo (self)


Visitar Ejemplo (blank)


Visitar Otra (misma ventana)

Consideraciones

• Usar _blank sin precauciones de seguridad puede exponer tu sitio a reverse tabnabbing.
• En contextos de single-page applications o iframes, _parent y _top ayudan a controlar dónde recarga el contenido.
• Los identificadores de ventana (por ejemplo, target='miVentana') pueden agrupar múltiples enlaces en la misma pestaña dedicada.

Atributo rel

El atributo rel especifica la relación entre el documento actual y el recurso vinculado. Es fundamental para mejorar la seguridad, SEO y el comportamiento de navegadores y agentes de usuario.

Valores de rel orientados a seguridad

Ejemplos combinados

  Ir a Sitio Externo




  Ver Oferta Patrocinada

Buenas prácticas de seguridad

• Siempre usa rel='noopener' cuando emplees target='_blank', para evitar ataques de reverse tabnabbing.

  
    Enlace seguro
  
      

• Agrega noexcept noreferrer si no deseas que tu URL aparezca en el Referer que se envía al destino:

  
    Enlace sin referer
  
      

• Clasifica enlaces según su propósito usando rel='nofollow', 'ugc' o 'sponsored' para transparencia y mejor control SEO:
  • nofollow: Evita que el enlace transfiera autoridad SEO.
  • ugc: Para contenido generado por usuarios (comentarios, foros).
  • sponsored: Para enlaces pagados o de patrocinio.
• Revisa políticas de CORS y Content Security Policy (CSP) para reforzar el aislamiento de recursos externos.
• Valida siempre URLs dinámicas (provistas por usuarios) y escapa caracteres especiales para evitar inyección de código o ataques XSS.

Detalles profundos y escenarios avanzados

Cuando un enlace se abre con target='_blank', la nueva ventana obtiene una referencia al window.opener de la página origen. Con JavaScript, podría ejecutarse código malicioso como:

Por ello, rel='noopener' redefine internamente window.opener a null, impidiendo estas redirecciones forzadas.

Además, ten en cuenta:

• Política de Referer: Con rel='noreferrer' no se envía la cabecera Referer. Útil cuando no quieres exponer la URL de tu página de origen.
• Impacto en SEO: Relacionar rel='external' sirve de pista semántica para analizadores automáticos, aunque no siempre es interpretado por buscadores grandes.
• Control de ventanas: Si nombras la ventana, múltiples clics en distintos enlaces con el mismo nombre reutilizarán la ventana ya abierta.

Resumen de combinaciones más seguras

Con estas pautas y ejemplos profundos, dominarás el uso de target y rel en HTML5 garantizando tanto una buena experiencia de usuario como la seguridad y control SEO de tu sitio.