Keywords:hotlink protect proteccion script web tutorial

El hotlink es, a dia de hoy, un problema para los creadores de contenido. A mi no me importa que me cojan una imagen para colgarla en una página, es más, creo que en cierto modo ayuda a que se extienda por ahí mis obras. Pero el problema del hotlinking es más grave, porque entran en juego otros factores como el ancho de banda disponible para una página. Para los que no teneis muy claro qué es el hotlinking, os pongo un ejemplo:

Imagina que tienes una pagina: "Mipaginadelahostia.com". Ok,ahora, tu navegas por mi página y ves una imagen que te encanta, y quieres ponerla en la tuya. Puedes hacer dos cosas:
1. Te bajas la imagen, la subes a tu server y pones el tag como siempre para mostrar la imagen.
2. No tienes server propio, no tienes ni idea o lo que sea, así que coges y pones el tag así: img xsrc="imagen.jpg"

Pues la segunda manera es lo que se llama hotlinking, un problema, porque cada vez que alguien entra en tu página, la imagen se pide a mi servidor, por lo que se gasta ancho de banda, pero yo no he conseguido ninguna visita. El problema principal reside en que en estas páginas no se suele dar ningún tipo de crédito a las páginas de las que cogen las imágenes, ni un mísero link.

Así que ayer, tras ver que a mi me hacían algo parecido, decidí crearme un script para al menos conseguir algo de crédito. Se trata de una combinación entre el uso del .htaccess, PHP y la librería GD, una de las combinaciones más potentes para web de hoy en día.

El sistema a utilizar es sencillo, cuando el server reciba una petición de un jpg desde fuera de nuestro propio dominio, debe redireccionarla a un fichero PHP, que colocará una marca de agua o watermark sobre la imagen solicitada y luego la mostrará.

Si pulsais sobre leer más, teneis un tutorial sobre como configurar todo esto.

Configurar el servidor
El primer paso es configurar el servidor para que redireccione las peticiones, para ello, debes crear o editar el fichero .htaccess en el directorio principal de tu servidor (donde debe estar el index de tu página). Si hay algo escrito ¡no lo borres! simplemente añade el siguiente código al final:

El código puede llegar a ser un poco complicado, si quereis profundizar más en el mod_rewrite (que he de deciros que es muy MUY potente, podeis encontrar un tutorial sobre lo básico aqui.

RewriteEngine On
Esta línea activa el motor para realizar las conversiones del mod_rewrite.

RewriteCond %{REQUEST_FILENAME} .*jpg$ [NC]
Con esta línea hacemos que sólo se procesen las peticiones de ficheros jpg.

RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !tuweb.com [NC]
RewriteCond %{HTTP_REFERER} !webamigo.com [NC]
RewriteCond %{HTTP_REFERER} !google. [NC]
RewriteCond %{HTTP_REFERER} !search?q=cache [NC]
Con estas líneas lo que hacemos es que sólo se procesen las peticiones que vienen de algún dominio, que no sea el tuyo, ni el de tu amigo, ni de google. Recordemos que sólo deben pasar las peticiones que queremos marcar con marca de agua.

RewriteRule (.*) /hotlinks.php?src=$
Si el proceso ha llegado hasta aquí es porque se trata de una petición de un jpg realizada desde una web que no queremos que lo haga impunemente. Por lo que llamamos al fichero que procesará la imagen, pasando como parámetro la ruta completa de la imagen.

Preparar el Script
El siguiente paso es preparar el script. Para ello, debemos primero crear con Photoshop una imagen que queramos usar como watermark (marca de agua). Recomiendo que sea una imagen pequeña, de unos 80-100 píxeles de ancho y unos 15-30 de alto. Debemos guardarla como PNG-8 (PNG-24 produce errores con algunas versiones de la librería GD) y con el nombre "watermark.png".

Una vez tengamos la imagen, pasemos de lleno al script:

1. Dado que lo que se está pidiendo es una imagen, debemos cambiar la cabecera para que se muestre la imagen correctamente, ya que por defecto es de tipo texto (daría un error mostrando la imagen de dejarlo así)

header('content-type: image/jpeg');

2. Tras esto, debemos cargar en memoria la imagen que vamos a usar como marca de agua, y además tomarle las medidas.

$watermark = imagecreatefrompng('watermark.png');
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);

3. Ahora creamos una imagen nueva a partir de la imágen que se ha solicitado. Recordemos que la ruta se pasaba como parámetro (src).

$image = imagecreatetruecolor($watermark_width, $watermark_height);
$image = imagecreatefromjpeg($_GET['src']);
$size = getimagesize($_GET['src']);

4. Con las dos siguientes líneas, establecemos la x e y para la posición donde colocaremos la marca de agua (abajo a la derecha y con cinco píxeles de margen).

$dest_x = $size[0] - $watermark_width - 5;
$dest_y = $size[1] - $watermark_height - 5;

5. Por último, colocamos la imagen watermark sobre la imagn solicitada, y mediante la función imagejpeg() la mostramos. Después destruimos de memoria las imágenes utilizadas (para no ocupar recursos, lo que se borra está en memoria, no se borra la imagen real)

imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);

Y con esto ya estaría listo. El código completo es el sigiente:

hotlinks.php:

header('content-type: image/jpeg');
$watermark = imagecreatefrompng('watermark.png');
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);
$image = imagecreatetruecolor($watermark_width, $watermark_height);
$image = imagecreatefromjpeg($_GET['src']);
$size = getimagesize($_GET['src']);
$dest_x = $size[0] - $watermark_width - 5;
$dest_y = $size[1] - $watermark_height - 5;
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);

?>

Sólo nos quedaría ahora subir tanto las modificaciones del .htaccess como el fichero hotlinks.php. Acordaos de poner vuestro sitio en el .htaccess!

Espero que os sea útil, podeis contactar conmigo a través de los comentarios, o mandando un mensaje desde el área de contacto