El atributo html target=”_blank” no funciona ¿o si?

Es de todos conocido desde hace años que para abrir un enlace o link en una nueva ventana hay que usar el atributo target="_blank" dentro de <a href=".

El problema, que no es nuevo y que surge ahora, es que con las “nuevas” versiones de los programas que estamos utilizando habitualmente ya no funciona. Se quiere achacar a los navegadores pero no es correcto del todo ya que recientemente se ha publicado que dicho atributo, tal cual, es vulnerable a ataques de phishing.

Esta vulnerabilidad, también conocida como reverse tabnabbing, es un tipo de ataque de phishing en el que el atacante reemplaza la ventana legítima, y fiable, por un documento malicioso usando el selector window.opener.location.assign() cuando se accede mediante un enlace de apertura en una nueva ventana. O sea, del tipo target=”_blank”.

Lo que hace el atacante es, usando el selector window.opener.location, llevar al usuario a alguna página falsa, que simula ser la original, o ejecuta algún JavaScript en la página de apertura en la que confía el usuario.

Explicado de manera sencilla, con el reverse tabnabbing, cuando haces clic en una web para abrir una página nueva y se abre en una nueva ventana, si luego vuelves a la web original, sin que tú te des cuenta, se cambia automáticamente esa página falsa que simula ser la buena.

Parece la página web original que estabas viendo pero tiene una url distinta (que se puede ver claramente). El problema es que la mayoría de los usuarios no se dan cuenta de que la URL ha cambiado ya que no se suelen fijar casi nunca, y menos si piensan que están en una web en la que confían, por ejemplo esta.

Luego, por ejemplo, la página web falsa les pedirá que accedan de nuevo a su cuenta, y claro, pero ya no estás donde te creías que provienes sino en una copia de la ventana original en la que hay otro documento, en este caso malicioso. Si introduces tus datos ya se lo has entregado a los hackers que harán con ellos lo que sea.

El modo de evitar la vulnerabilidad target=”_blank” o reverse tabnabbing es añadir a tus enlaces que abren en una nueva ventana la relación de enlace rel=”noopener”, y como el navegador Firefox no reconoce esta relación sumarle la relación noreferrer. O sea, añadiendo esto rel=”noopener noreferrer”.

Para evitar la vulnerabilidad, tu enlace externo debería ser así:
<a target="_blank" rel="noopener noreferrer" href="https://elenlaceexterno.es">Texto del enlace externo</a>

De este modo se elimina la posibilidad de aplicar la citada vulnerabilidad. Sencillo ¿no? pues en WordPress se aplica sólo automáticamente desde la versión 4.7.4, no hay que hacer nada al respecto.

¿Afecta al SEO añadir noopener noreferrer?
Una pregunta que ha surgido en los foros es si esto afectará en algo, por ejemplo, a los enlaces que tenga el atributo nofollow pues los modifica añadiéndoles los atributos noopener noreferrer.

Me refiero a que si tenías un enlace de este tipo en una entrada
<a rel="nofollow" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>

Si lo actualizas pasará a ser así
<a rel="nofollow noopener noreferrer" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>

Y la misma duda ha surgido en general, si añadir estas relaciones de enlace afecta en algo al SEO.

Pues no, según han respondido desde Google a preguntas de webmasters es un simple enlace, no añade ni quita ni afecta el posicionamiento a los enlaces, tengan nofollow o no, a los que se añada el noopener noreferrer.

Me parece muy bien que se corrija una vulnerabilidad pero mis pretensiones son otras, además de que no funciona
Cierto, la etiqueta target=”_blank” no siempre va a funcionar según en que lugar esté puesta. Es algo relativo al propio código, no se puede pretender integrar código html en código php y que funcione sin más, son necesarios unos pequeños ajustes que te pueden alterar los nervios en un momento dado. La falta de una coma, un punto y coma o de un paréntesis de cierre en una línea puede provocar que te quedes calvo de tanto tirarte de los pelos tratando de averiguar donde está el error y porqué no funciona.

También hay que tener en cuenta las comillas sencillas y las dobles, cada una tiene su sentido y no hay que cambiarlas nunca.

En las últimas versiones del admin de osCommerce se nos pueden dar casos de querer que un enlace se abra en una nueva ventana. Al ser algo exclusivamente para nosotros lo del phishing no nos afecta ya que un hacker no va a entrar a nuestro admin, y si entra ¿para que molestarse en crear una página falsa para obtener los datos de nuestros clientes si ya puede acceder a ellos?

Ahora vamos al punto en el que se me ha hecho necesario que un enlace se abra en una nueva venta y no había manera de conseguirlo. Concretamente me refiero a los boxes de la columna del admin.

Un addon para el admin de osCommerce puede traer incluido un nuevo box o no, pero también se puede dar el caso de que tengamos que crearlo nosotros mismos por otros motivos.

Crearlo es fácil, tan solo clonas uno existente y después modificas según tus necesidades los links internos (no olvides hacer lo mismo con el archivo de idioma!).

Una aclaración evidente. No sólo es clonar y modificar, si hacemos eso sustituimos el archivo original por el archivo clonado y perderemos el acceso a los links del archivo original. Lo que hay que hacer es clonar, renombrar, y modificar.

Voy a poner dos ejemplos reales, un acceso a la base de datos y un mapa del sitio ubicado en la parte catálogo. Ninguno de los dos addons trae box, tan sólo el primero dice que hacer para integrarlo en uno existente, y encima se abre en la misma ventana.

En el caso del acceso a la base de datos las instrucciones dicen que añadas esto (puede haber una discrepancia ya que mis tiendas están muy modificadas)

      array(
        'code' => 'database_admin.php',
        'title' => BOX_DATABASE_ADMIN,
        'link' => tep_href_link('database_admin.php')

pero nosotros pondremos esto otro que es lo que hace que se abra en una nueva ventana

      array(
        'code' => 'database_admin.php',
        'title' => BOX_DATABASE_ADMIN,
        'link' => (tep_href_link('database_admin.php') . "\" target=\"_blank")

La diferencia está en la última línea, se ha metido dentro de un paréntesis todo lo que engloba el link y se ha añadido target=”_blank” además de la barra invertida delante de cada doble comillas inicial.

Para el caso del mapa del sitio ubicado en una carpeta en la parte catálogo no hay instrucciones al respecto, tan sólo dice que apuntes las diferentes urls, sobre todo la que crea el mapa xml para google, para cuando tengas que actualizarlo al añadir nuevos productos.

Tal como se ha dicho antes, clonamos cualquier box del admin y lo editamos poniendo esto (no olvides hacer lo mismo con el archivo de idioma!)

      array(
        'code' => 'googlesitemap/index.php',
        'title' => BOX_SITEMAPS_GOOGLE_SITEMAP,
        'link' => tep_catalog_href_link('googlesitemap/index.php' . "\" target=\"_blank")

Si nos fijamos en el código anterior aqui se ha añadido la carpeta donde está el archivo en el apartado code y se ha cambiado tep_href_link por tep_catalog_href_link al mismo tiempo que se vuelve a añadir la carpeta donde está el archivo en el apartado link. También se ha añadido target=”_blank” junto a sus barras invertidas como en el caso anterior, pero ojo porque ahora NO se ha englobado todo dentro de un nuevo paréntesis, se ha añadido dentro del existente.

Como hemos visto, se puede añadir target=”_blank” de dos maneras distintas según sea el caso y las dos funcionan. Ignoro si hay otra forma mas sencilla de hacer lo mismo, las que a mi me funcionan son estas y espero que le sirvan a quien esté tan “desesperado” como yo llegué a estarlo yo al no conseguir que funcionara, que se abriera el link en una nueva ventana.

Buscando por internet he encontrado esto

El atributo html target=”_blank” hace que un link se abra en otra ventana, pero si pretendes validar el código html de tu web, te encontrarás con que dicho atributo no valida. La solución es sustituirlo por un JavaScript.

onclick="this.target='_blank' "

O sea, que antes se ponía así
<a href="url" target="_blank">nombre del enlace</a>

y funcionaba pero ahora habría que ponerlo de esta manera para que funcione
<a href="url" onclick="this.target='_blank' ">nombre del enlace</a>

La búsqueda por internet ha sido para encontrar la solución. Por desgracia no la he encontrado y me he visto a obligado a publicarla aquí para uso y disfrute de todos aquellos que lo necesiten.



Facebooktwittergoogle_plusredditpinterestlinkedinmail

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


dos + = 7

Protected with IP Blacklist CloudIP Blacklist Cloud