El hotlinking es cuando otra persona utiliza la URL de una imagen alojada en tu servidor web para mostrarla en su propio sitio web sin tu permiso, lo que puede aumentar el ancho de banda y el consumo de recursos de tu servidor ya que se realizan peticiones.

Para prevenir esta practica debemos de crear unas reglas en nuestro servidor web. A continuación os explicamos que reglas debéis de utilizar tanto para Apache como para Nginx.

Prevenir hotlinked en Apache

Para prevenir el hotlinking en Apache, puedes utilizar el archivo .htaccess para agregar reglas de reescritura y bloqueo de referencias.

Para hacer esto, deberemos de crear o editar el archivo .htaccess en el directorio raíz de tu sitio web.

Agrega las siguientes líneas de código:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?tusitio.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F]
🚨
No olvides de cambiar tusitio.com por el dominio de tu web!

¿Pero que significan estas reglas?

Con la primera línea lo que hacemos es activar el módulo de Rewrite. Luego verificamos que el referente no se encuentra vacío. A continuación, en la línea 3, se verifica si este referente no es de tu propio sitio web. Finalmente en laúltima línea bloqueamos el acceso a cualquier fichero con las extensiones  .jpg, .jpeg, .png y .gif, y devolvemos un HTTP 403 (Forbidden).

Guardamos el fichero para aplicar los cambios.

Guarda el archivo .htaccess y las reglas de bloqueo de hotlinking se aplicarán.

Extra: Cambia la imagen por otra

Otra posibilidad que tenemos, es que en vez de mostrar un error 403, es devolver el resultado de otra imagen, ya que si hace la petición pues al menos divertirnos un poco :)

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?tusitio.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ /ruta/a/tu/imagen_alternativa.jpg [NC,L]
🚨
No olvides de cambiar tusitio.com por el dominio de tu web!

Lo único que cambia en este código es la última línea, que en vez de mostrarle un error 403, lo que hacemos es retornar una imagen que tengamos en nuestro servidor.

🚨
Recuerda de cambiar la ruta absoluta para nuestra imagen!

Prevenir hotlinded en Nginx

Para prevenir el hotlinking en Nginx, puedes agregar las siguientes líneas de código en tu archivo de configuración de Nginx:

location ~ \.(gif|jpg|jpeg|png|svg)$ {
  valid_referers none blocked tusitio.com *.tusitio.com;
  if ($invalid_referer) {
    return 403;
  }
}
🚨
No olvides de cambiar tusitio.com por el dominio de tu web!

La primera línea indica que las reglas que hay dentro se aplicarán para este tipo de ficheros. Dentro del location, tendremos la primera línea que indica que referentes son válidos y que tienen acceso a la web. Finalmente hay una condición, que si el referente no está en la lista de referentes válidos, entonces devuelve un código de estado HTTP 403 (Forbidden).

Guardamos y recargamos la configuración de Nginx para que se aplique:

systemctl reload nginx

Extra: Cambia la imagen por otra

Otra posibilidad que tenemos, es que en vez de mostrar un error 403, es devolver el resultado de otra imagen, ya que si hace la petición pues al menos divertirnos un poco :)

location ~ \.(gif|jpg|jpeg|png|svg)$ {
  valid_referers none blocked tusitio.com *.tusitio.com;
  if ($invalid_referer) {
    rewrite $uri /path/to/no_hotlinking.jpg last;
    return 200;
  }
}
🚨
No olvides de cambiar tusitio.com por el dominio de tu web!

Como te habrás percatado, dentro de la condición hemos añadido que en vez de retornar error 403, esta web devolvemos una imagen que hemos seleccionado.

📢
Recuerda de cambiar la ruta absoluta para nuestra imagen!

LAMP - _ voidNull
Artículos sobre LAMP
LEMP - _ voidNull
Artículos sobre LEMP
Haz que cada palabra cuente: tu donación nos inspira a seguir creando contenido. Accede al apartado de Donación para hacer tu aportación