Skip to main content
JavascriptWordpress

Cómo evitar que copien el contenido de tu web

Por 28 diciembre, 2020Sin comentarios
Protege el contenido de tu web

Es probable que si te has decidido a leer este post, tengas un blog o mantengas un sitio web y te preocupa que se reutilice tu contenido de forma fraudulenta. ¿Pero es realmente importante?

Para empezar, si hemos generado nosotros el contenido, nos habrá costado nuestro esfuerzo desarrollar algo interesante y de calidad para el usuario. Por eso, que un tercero copie el contenido y se adjudique la autoría no hace gracia.

Pero, por si no fuera suficiente motivo, Google penaliza el contenido duplicado por lo que puede afectar al SEO de nuestro blog. Además de cornudo, apaleado…

¿Cómo podemos evitar que copien en contenido de nuestra web?

Si utilizamos un CMS como WordPress podremos utilizar algunos plugins que nos facilitan el trabajo. Por ejemplo te recomiendo 2, WP Content Copy Protection y WP Content Copy Protection & No Right Click. Estos dos plugins utilizan reglas agresivas pero eficaces para evitar que copien tu contenido. Por ejemplo:

  • Desactivan el botón derecho o menú contextual.
  • Desactivan los atajos de teclado como Ctrl+C, Ctrl+X, Ctrl+V, Ctrl+S y Ctrl+A, para evitar seleccionar y copiar el contenido.
  • Evita guardar, copiar o arrastrar tus imágenes para guardarlas en local.
  • Muestra un mensaje de alerta o copyright cada  vez que se intenten realizar estas acciones.

Además, tienen más características premium que le añaden más protección a la web. Pero con la versión gratuita vamos servidos. Hay que tener en cuenta que nunca podremos garantizar un 100% de protección. Por ejemplo, un desarrollador puede utilizar la consola del navegador o abrir el código fuente para copiar el contenido. Además, si utilizamos feeds, los plugins no pueden actuar ahí, lo que supone una brecha para copiar tu contenido.
Pero la mayoría no conoce esas técnicas, así que podemos considerar protegida nuestra web.

Si no estáis utilizando ningún CMS y no puedes tirar de plugins, os dejo un par de códigos para poder lograrlo con Javascript nativo o jQuery, si estamos utilizando esta librería:

// Javascript
document.addEventListener("contextmenu", function(e){
    e.preventDefault();
}, false);

//jQuery
$(function() {
   $(this).bind("contextmenu", function(e) {
       e.preventDefault();
   });
}); 

También os dejo un código para poder deshabilitar los atajos de teclado Ctrl+C y Ctrl+V:

// Javascript 
document.addEventListener('keydown', (event) => {
     var keystroke = String.fromCharCode(event.keyCode).toLowerCase();

     if(event.ctrlKey && (keystroke == 'c' || keystroke == 'v')) {
          event.returnValue = false;
     }
});

// jQuery
$(document).ready(function() {
       $('body').bind('copy paste', function(e) {
           e.preventDefault();
       });
});

Con esto estaríamos cubiertos y es compatible con la mayoría de navegadores. Otra técnica muy utilizada es el hotlink.

¿Qué es el hotlink?
Es la técnica que usa imágenes de tu web en otra web ‘pirata’ sin tener que descargarla y volverla ha subir. Lo que hace es usar el link de la imagen y la muestra en la web pirata con la dirección url de la tuya. Esta técnica no afecta al SEO pero si al rendimiento de tu servidor. Piensa que, aunque la imagen se muestra en otro sitio, es tu hosting el que está cargando la imagen por lo tanto consume recursos propios. Si tu web sufre hotlink de una imagen no tiene por que notarse. Pero si está afectando a todas tus imágenes, tu servidor puede verse afectado, ya que estaría consumiendo muchos recursos innecesarios.

Para evitar esta técnica tan solo tenemos que realizar un paso. Si utilizamos un servidor apache, tenemos que añadir el siguiente código en nuestro archivo .htaccess en el directorio
raíz:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|svg)$ http://yourdomain.com/message-error.jpg [NC,R,L]

Con este código conseguimos que las imágenes carguen bajo los dominios que nosotros le indiquemos. Te habrás dado cuenta que, además de poner el dominio propio, he puesto el de Google, Bing o Yahoo. Esto es para que los bots de rastreo no tengan problemas y se puedan indexar nuestras imágenes.

Si quieres saber más trucos para .htaccess puedes consultar mi post Trucos y consejos .htaccess.

Si nuestro servidor es NGINX tenemos que añadir este código en nuestro archivo de configuración:

location ~ .(gif|png|jpeg|jpg|svg)$ {
     valid_referers none blocked ~.google. ~.bing. ~.yahoo. yourdomain.com *.yourdomain.com;
     if ($invalid_referer) {
        return 403;
    }
}

Algunos hosting que utilizan cpanel tienen herramientas para evitar el hotlink, así ni si quiera tenemos que añadir el código.

Si seguimos estos pasos, podemos escribir con mayor tranquilidad sin miedo a que nos roben el contenido de nuestro sitio web. ¡Espero que os sirva!

Jairo Calero

Jairo Calero

Desarrollador web frontend y backend, especialista en webs app desarrolladas en PHP y Javascript. Experto en HTML, CSS3, PHP y Javascript con frameworks y librerías como jQuery, Angular y Bootstrap. Gestor de herramientas SEO como Google Analytics, Search Console, SEMrush o Hotjar. Email marketing y Big data.

Deja tu respuesta