¿Cómo evitar el hotlinking de imágenes en WordPress?

"¿Debo mantener o eliminar los enlaces de imágenes en WordPress?" Esta es una cuestión que se puede debatir durante mucho tiempo.

Incluso si después de elegir el alojamiento administrado de WordPress, es posible que haya mantenido la configuración predeterminada. Pero imagine, cuando carga e inserta una imagen en un artículo o página, se agrega automáticamente un enlace a la imagen misma.

Y si sus visitantes hacen clic en esa imagen en un artículo, serán movidos a otro sitio web o a una página que solo muestra la imagen en el tamaño original. Mientras que, en general, las imágenes se escalan para adaptarse perfectamente a sus artículos. Este fenómeno se llama hotlinking o enlace en línea.

¿Qué es el Hotlinking de imágenes?

El hotlinking, también conocido como “robo de ancho de banda”, es una práctica indebida llevada a cabo por particulares que crean enlaces directos a contenidos (imágenes, vídeos) alojados en otros servidores con el fin de utilizar sus recursos informáticos y de ancho de banda.

Un ejemplo clásico consiste en enlaces directos a contenidos multimedia en un servidor A que se insertan en páginas web servidas por el servidor B ; el navegador del visitante que accede a la página web en el servidor B realizará solicitudes HTTP al servidor A para recuperar recursos multimedia, lo que provocará un desperdicio de CPU y ancho de banda y, en última instancia, de dinero.

¿Cómo funciona el Hotlinking?

Tienes que volver al código HTML para comprender primero cómo se muestran las imágenes en las páginas web.

Sin entrar en detalles, HTML es un lenguaje simple estructurado por marcado: etiquetas (en este caso etiquetas HTML) delimitan cada elemento de la página de forma jerárquica, enmarcando los valores y aportando atributos a su contenido (el ancho o el alto de la imagen, o el texto alternativo que permita su descripción, por ejemplo).

La visualización clásica de una imagen se realiza con la etiqueta img para la imagen y la etiqueta alt para la descripción en el código de una página ubicada en un sitio web. Por ejemplo, considere los siguientes escenarios.

Código HTML del servidor Un sitio web:

<img src=”/imagen.jpg” alt=”descripción” />

Un sitio web que realiza un enlace activo simplemente procede, utilizando en el atributo src (que significa fuente) de las etiquetas de imagen, la dirección directa de sus imágenes.

Esto es lo que solemos hacer, por ejemplo, cuando mostramos nuestras imágenes desde nuestros propios sitios web.

Código HTML del sitio web del servidor B:

<img src=”http://www.tudominio.com/imagen.jpg” alt=”descripción” />

Al final, terminas con una de tus imágenes publicada en un sitio web que no es tuyo, sin tu autorización, y la guinda del pastel: ¡el perpetrador de esta travesura está picando tu ancho de banda!

¿Cómo detectar Hotlinking?

¡Esto no es obvio!

Todavía puede usar herramientas como TinEye. Es una extensión de sitio web y navegador, que podrá buscar imágenes similares a la que usted indique. ¡Funciona muy bien, en el límite de los sitios web que indexa TinEye, y requiere verificar todas sus imágenes a mano!

La otra solución es automatizar la detección de imágenes cargadas desde un sitio web que no sea el tuyo. Es técnicamente más complejo pero funciona muy bien.

En principio, el archivo .htaccess del servidor Apache se encarga de interceptar las imágenes antes de que se muestren.

Cómo evitar hotlinking en WordPress usando .htaccess

Veamos cómo puede evitar el hotlinking en su WordPress insertando algunas líneas en el archivo .htaccess en la carpeta raíz del documento.

Inicie sesión en su plataforma de alojamiento , use sus credenciales de inicio de sesión en cualquier software de FTP (estoy usando Filezilla), vaya a /public_html/ → y acceda a su archivo .htaccess .

¿Imaginas el impacto que puede tener este tipo de comportamiento si varias de tus imágenes se muestran en foros con mucho tráfico?

Primero, debe Ver/Editar (o crear) el archivo .htaccess dentro del directorio raíz de su sitio web.

Una vez abierto el archivo, pegue las siguientes líneas al final y guarde el archivo:

Motor de reescritura en
RewriteCond "%{HTTP_REFERER}" "!^$"
RewriteCond "%{HTTP_REFERER}" "!www.sudominio.com" [NC]
Regla de reescritura "\.(jpg|jpeg|png|gif|svg)$" "-" [F,NC]

Nota: No olvides reemplazar tudominio.com con el nombre y la extensión de tu sitio web.

• La primera línea sirve para activar mod_rewrite .
• La segunda línea permite referentes en blanco. Debe habilitar esto, ya que algunos visitantes pueden usar un firewall personal o un programa antivirus que elimina la información de referencia de la página enviada por el navegador web.
• La tercera línea, por el contrario, es la que impide la descarga y el hotlinking de los contenidos, cuando HTTP_REFERER no está configurado explícitamente en yourdomain.com , que se supone que es el que debe protegerse. En este caso, es necesario reemplazar tudominio.com con el nombre de dominio que deseas proteger.
• La cuarta línea especifica las extensiones prohibidas, aquellas que están inhibidas por hotlinking.

En este caso, puede especificar cualquier número de extensiones separadas por “ | " personaje. Además, en este caso, la comparación no distingue entre mayúsculas y minúsculas y, en caso de una coincidencia positiva, la solicitud se vuelve a escribir en un archivo nulo, lo que origina un error 403 .

Desde el navegador, siguiendo el ejemplo que hicieron los servidores A y B al principio, la página web cargada por el servidor B parecería no tener contenido cargado por A. El uso del ancho de banda y la CPU del servidor A de esta manera se vuelve insignificante y se limita solo al procesamiento de la solicitud por parte del motor de reescritura.

Use el complemento para evitar los enlaces directos

Como probablemente sepa, un complemento puede ampliar la funcionalidad de su sitio web y, por lo tanto, evitar los enlaces directos en su sitio web. Aquí hay 2 de los complementos más populares en esta área:

1. Seguridad de iThemes

iThemes Security corrige vulnerabilidades comunes, detiene ataques automatizados y protege las credenciales. El complemento tiene un sistema de escaneo de malware, así como la capacidad de rastrear a los usuarios que realizan cambios de contenido, así como conexiones y desconexiones. Muchas otras características lo ayudan a proteger su sitio web.

¡Terminando!

Para ver si ha bloqueado el enlace activo a través de .htaccess o complemento, pruebe su sitio web en altlab.com, donde deberá ingresar la dirección de la imagen. Si no se muestra o se muestra la imagen que elija, el anti-hotlink estará activo.

¿Conoces otras formas de eliminar enlaces de las imágenes de WordPress? Si es así, comparte tu forma de hacerlo en los comentarios a continuación.

*Esta es una publicación invitada de Saud Razzak de Cloudways.