Tutorial para configurar CloudFlare

Ya hemos hablado de CloudFlare en numerosas ocasiones, ya que se trata de una de las redes de entrega de contenidos (CDN) más grandes y potentes que existen actualmente en internet, y debido a las herramientas y funcionalidades de las que dispone, te va a permitir mejorar el rendimiento y seguridad de tu web de forma considerable, por lo que es una configuración que casi siempre solemos recomendar, sobre todo teniendo en cuenta que su versión gratuita es suficiente para la gran mayoría de instalaciones. Antes de entrar en profundidad con la configuración de CloudFlare sería interesante recordar lo que es un CDN y cómo funciona. Un CDN es un grupo de servidores distribuidos en distintos puntos geográficos del mundo que almacenan en caché ciertos contenidos estáticos de tu web, ya sean archivos CSS, JS, imágenes, vídeos, etc, lo que permite entregar dichos contenidos de una forma más rápida y cercana al usuario que los está solicitando. En el caso de CloudFlare, realmente no sirve el contenido más cercano geográficamente al usuario final, sino que funciona mediante DNS Anycast, lo que implica que, si uno de los servidores DNS se desconecta, el resto podrá seguir respondiendo a las consultas, y, además, permite distribuir y extender el tráfico por toda la red, ya que una solicitud a la misma dirección IP la pueden responder muchos servidores de manera simultánea. Además, es importante aclarar también que CloudFlare funciona como proxy inverso, es decir, es un intermediario que se sitúa entre el navegador y el propio alojamiento de la web, por lo que el usuario final le está solicitando la información al propio proxy, y no al servidor donde realmente se aloja tu instalación. Por ello, además de funcionar como un CDN, puedes configurar CloudFlare como WAF en tu sitio web. Un WAF (Firewall de aplicaciones web) es una medida o sistema de protección entre la aplicación web y el tráfico que se produce en la misma, básicamente se encarga de filtrar o bloquear el tráfico HTTP, lo que permite proteger la aplicación contra ataques maliciosos, tráfico no deseado, inyecciones de SQL, etc. En el caso de CloudFlare, su funcionamiento como WAF dependerá de las opciones que apliques en la propia configuración, no obstante, por defecto ya dispone de una protección contra ataques de denegación de servicio (DDoS), y su versión gratuita es suficiente para proteger tu web contra la mayoría de ataques que pueden producirse en la misma. Actualmente, CloudFlare es sin duda uno de los CDN que dispone de más centros de datos alrededor del mundo, te dejamos una captura en donde puedes comprobar los que tiene a fecha de hoy: Esto puedes revisarlo desde este enlace, en los que también te indican la ubicación de cada uno de ellos: https://www.cloudflare.com/es-es/network/ Como te comentamos anteriormente, la configuración de CloudFlare es algo que solemos recomendar a nivel WPO y seguridad, pero, ¿qué ventajas tiene realmente implementarlo en tu sitio web?

• Mejora el tiempo de carga de la web: ya que almacena contenidos en caché y los sirve en puntos más cercanos geográficamente al visitante.
• Reduce el coste de ancho de banda del alojamiento: ya que, al almacenar dichos contenidos en caché, le permite ahorrar multitud de solicitudes al servidor dónde tienes alojada tu web.
• Mayor seguridad: al funcionar con DNS Anycast, permite soportar y mitigar ataques DDoS, además de que también dispone de una serie de configuraciones y funcionalidades que te permiten configurar reglas de bloqueo (ya sea a ciertos países, IPs concretas, configuraciones contra bots, etc).
• Te ofrece analíticas sobre los visitantes y el tráfico que se realiza a tu web

Teniendo en cuenta todos los puntos anteriores, va a permitir que tu web soporte cantidades de tráfico muy importantes, y todo ello de forma gratuita. [elementor-template id="80835"]

Configuración básica de CloudFlare

Vamos a comenzar ya con la configuración de CloudFlare, aclarar que sería válida para cualquier web, sea cual sea el CMS que utilices. Antes de nada, me gustaría comentarte que en este post no vamos a hablar de todas las opciones que tiene CloudFlare disponibles, sino que te explicaremos cómo puedes realizar la configuración básica del CDN y mencionaremos alguna opción adicional que puede ser interesante a nivel WPO y seguridad. Si prefieres ver un vídeo explicativo de la configuración de CloudFlare en su versión gratuita, te dejamos este vídeo del canal de Álvaro en el que se explica todo el proceso, además de explicar de manera simple casi todas las opciones que tiene la versión gratuita.

Lo primero que tenemos que hacer es crear una cuenta en la plataforma desde este enlace: https://dash.cloudflare.com/sign-up, necesitarás introducir un correo electrónico y una contraseña. Una vez creada la cuenta, te llegará un email de verificación al correo que hayas establecido, el cual tendrás que aceptar si quieres disfrutar de algunas funcionalidades adicionales, por ejemplo, la creación de nuevos miembros. Es recomendable utilizar una cuenta de correo a la que puedas tener acceso en todo momento, lo idóneo es que no utilices una de tu dominio, ya que, si en el futuro decides cambiarlo o te caduca, no tendrías la opción de recuperar la cuenta si olvidas tu contraseña. Dicho esto, en la siguiente ventana te aparecerá un mensaje de bienvenida que te permitirá añadir el primer sitio web mediante un asistente de configuración, le damos a “Añada un sitio web o aplicación” y nos llevará a otra pantalla en la que tendremos que introducir el dominio. Una vez añadido, le damos a “Continuar”, ahora CloudFlare te pedirá que escojas entre uno de los planes que tiene disponibles, el plan gratuito se encuentra en la parte inferior, te lo hemos señalado con una flecha. Le damos a “Confirmar plan” para avanzar al siguiente paso, en el que CloudFlare nos permitirá realizar un examen rápido para analizar los registros DNS actuales del dominio. Cuando CloudFlare finalice el análisis, nos mostrará en pantalla todos los registros que ha escaneado. Lo normal es que no tengamos que añadir ningún registro, pero en ciertas ocasiones, es posible que tengamos que añadir algunos adicionales o personalizados, lo más recomendable es que realices una comparación de todos los registros de tu dominio para verificarlo. Si tienes el dominio apuntando a un hosting o VPS de Raiola Networks, puedes utilizar la herramienta de “Editor de zonas” de cPanel para comprobarlos o el apartado “DNS” de VestaCP. Llegados a este punto, tendrás que escoger los registros que quieres que pasen por el CDN, los que tengan la nube en color naranja lo tendrán habilitado y los subdominios o registros que aparezcan con la nube gris no pasarán por el proxy. Nuestra recomendación en este caso es que habilites el proxy únicamente en los registros a nivel web (ya sean IPv4 o IPv6 en caso de que los permita tu proveedor), es sumamente importante que no lo actives en los registros mail, ya que impedirán que el servicio de correo funcione correctamente. Una vez realizados los ajustes correspondientes y verificado todo lo anterior, ya podríamos pasar al siguiente paso, en el que te indicarán las DNS que tienes que configurar en el dominio para que comience a funcionar con CloudFlare. El cambio de DNS tendrás que realizarlo en tu actual proveedor de dominio. Una vez modificadas las DNS, lo idóneo es esperar a que se propaguen completamente, este es un proceso que puede variar dependiendo de la extensión del dominio, y en casos excepcionales puede demorarse hasta 24/48 horas.

Configuración de SSL/TLS en CloudFlare:

Una vez realizados todos los pasos anteriores, es importante que compruebes la configuración del apartado del SSL/TLS, ya que, en caso de ser incorrecta, puede provocar que se genere un bucle de redirecciones en tu web. Para ello, nos dirigimos a la sección de “Información general” del apartado de SSL/TLS, desde el que tendremos que escoger una de las opciones disponibles:

• Si nuestro sitio web no utiliza HTTPS, tendremos que escoger la opción “Desactivado (inseguro)”.

• Si tu plan de hosting no permite certificados SSL o tu sitio web no dispone de un certificado SSL, la opción recomendable sería “Flexible”, con esta opción se encriptará el tráfico entre el visitante y el propio CloudFlare, no obstante, las conexiones entre CloudFlare y el servidor de origen se realizarán mediante HTTP.

• El modo de encriptación “Completo” es el recomendable para sitios webs que tengan un certificado autofirmado como puede ser Let`s Encrypt. Esta opción habilita la encriptación de extremo a extremo, es decir, desde el navegador a CloudFlare y desde CloudFlare al servidor de origen.

• El modo de encriptación “Completo (estricto)” habilita la encriptación de extremo a extremo al igual que el completo, no obstante, los requisitos son más estrictos y es recomendable utilizar un certificado SSL validado.

Debes tener en cuenta que los ajustes de este apartado pueden tardar varios minutos en completarse, por lo que puede que no percibas el cambio de forma instantánea.

Explicación de pantalla inicial 

Una vez que se hayan propagado las DNS y si hemos realizado todos los ajustes indicados con anterioridad, habremos finalizado la configuración básica de CloudFlare, y el panel principal mostrará algo parecido a lo siguiente: Desde esta página, además de poder visualizar una serie de estadísticas (las cuales puedes revisar también desde el apartado “Analytics y registros”) tienes la opción de activar algunas funcionalidades que pueden ser interesantes en ciertas situaciones, por ejemplo:

• Modo Under Attack: al activarlo, se mostrará a todos los visitantes un desafío de Javascript al acceder a la web y bloqueará tráfico sospechoso que se efectúe a la misma, es una buena opción si se está realizando un ataque DDoS a tu sitio web.
• Modo desarrollo: te permite desactivar la caché del propio CloudFlare, lo que puede ser de utilidad si estamos realizando modificaciones en el sitio web.
• Pausar CloudFlare: si no quieres que el tráfico de tu sitio web pase a través de la red de CloudFlare, puedes desactivar el CDN desde esta opción, es el equivalente a desactivar el proxy (nube naranja) en los registros DNS y puede ser de utilidad si creemos que existe algún tipo de problema o incompatibilidad entre CloudFlare y otro elemento de tu web.

Además de esto, también tienes enlaces hacia otro tipo de opciones como puede ser la configuración de la caché (hablaremos brevemente de ella a continuación), la obtención de un token de la API para integrarla con otras aplicaciones, o la ejecución de una prueba de velocidad, que es una funcionalidad en versión beta todavía, pero que te permite realizar test del sitio web que parecen basarse en las puntuaciones de PageSpeed y los Core Web Vitals.

Configuraciones avanzadas del CDN y configuración de caché:

CloudFlare te permite habilitar algunas opciones adicionales a nivel WPO que te pueden ayudar a mejorar el tiempo de respuesta del sitio web, y otras que vienen incluidas ya por defecto, como puede ser la compresión brotli, el cual es un método de compresión más potente que gzip. Hay que tener en cuenta que una buena parte de las configuraciones de este tipo requieren de un plan de pago, y a pesar de que cada vez hay menos opciones de este tipo disponibles en la versión gratuita de CloudFlare, te indicaremos a continuación algunas que pueden ser interesantes. En el apartado "Speed" > "Optimización" podremos ver 5 secciones, la mayoría de opciones disponibles se encuentran en "Optimización de contenido" y en "Optimización de protocolo":

• CloudFlare Fonts (actualmente en versión beta): incorpora los estilos de Google Fonts directamente en la página HTML y almacena las fuentes en caché, lo que permite reducir las solicitudes externas de fuentes de terceros.
• Early Hints: permite al navegador empezar a cargar de forma inmediata recursos críticos de tu página web (CSS, fuentes, etc) antes de recibir la respuesta HTML completa.
• Rocket Loader: carga de forma asíncrona los JS del sitio web, es una opción que suele fallar bastante y que no solemos recomendar.
• Minificador automático: esta opción te permite implementar la minificación de JS, CSS y HTML, no obstante, parece que la configuración ya no estará disponible a partir del 5 de agosto de 2024.

• HTTP/2: está habilitada de forma predeterminada en todos los dominios, mejora el envío de solicitudes y las respuestas HTTP.
• De HTTP/2 a Origen: viene habilitada por defecto y permite solicitudes HTTP/2 entre el origen y CloudFlare`s Edge.
• HTTP/3 (con QUIC): acelera las solicitudes y respuestas HTTP e incluye una mejora de seguridad con respecto a HTTP/2.
• Reanudación de conexión 0-RTT: Se mejora el rendimiento para visitantes que ya hayan accedido previamente a tu sitio web.

En cuanto a la configuración de caché en CloudFlare, podemos modificarla desde el apartado "Almacenamiento en Caché" > "Configuración", desde aquí podremos:

• Purgar caché manualmente: ya sea de forma completa o parcial, por ejemplo, de alguna URL en concreto.
• Modificar el nivel de almacenamiento en caché (lo recomendable es configurarlo en “Estándar”, tal y como viene por defecto).
• Cambiar el tiempo de vida de la caché del navegador (si quieres respetar los TTL del propio hosting puedes escoger la opción de "Respetar los encabezados existentes").

• Crawler Hints: si se habilita, CloudFlare notificará a los motores de búsqueda si se hacen modificaciones en la web.
• Always online: al habilitar esta opción, CloudFlare mostrará una versión cacheada del sitio web en caso de que el servidor de origen no se encuentre disponible.
• Modo desarrollo: ya hablamos sobre el anteriormente, permite desactivar completamente la caché de CloudFlare.

Algunas configuraciones a nivel WAF

En este post no vamos a meternos muy de lleno en las opciones que tiene CloudFlare a nivel seguridad/WAF, no obstante, consideramos que existen dos funcionalidades de este CDN que hay que destacar, ya que pueden salvarte de algún problema puntual y te permiten realizar alguna configuración muy interesante a nivel bloqueo. Si quieres utilizar CloudFlare únicamente como CDN y no como WAF, puedes deshabilitar prácticamente todas las opciones de este último desde el apartado "Configuración" de la sección de Seguridad, estableciendo la opción de "Esencialmente desactivado" en "Nivel de seguridad". Dicho esto, la primera de las opciones de la que queremos hablarte es la de crear reglas personalizadas, la cual puedes encontrar en la sección de "WAF" del apartado de "Seguridad". Desde aquí podrás crear reglas de todo tipo para proteger tu sitio web de vulnerabilidades o ataques que estén realizando al mismo, además, es posible que si utilizas algún servicio externo como Redsys o plataformas que requieran algún tipo de sincronización, sea necesario configurar una exclusión para que funcionen correctamente y puedan pasar por el proxy sin ser bloqueadas. Vamos a ponerte 2 ejemplos sencillos para que veas el funcionamiento de esta herramienta.

• Si utilizas Redsys, la configuración que tienes que aplicar para que la respuesta llegue al servidor de origen correctamente sería la siguiente:

• Si quieres realizar un bloqueo (de un país en concreto, una IP, un continente, etc) puedes tomar de ejemplo la siguiente configuración, en la cual se bloquea completamente el tráfico desde Argelia, Asia y la IP indicada:

Como podrás imaginar, esta funcionalidad te va a permitir realizar reglas de todo tipo, desde permitir el acceso únicamente a IPs geolocalizadas en España, bloqueos por agente de usuario, por versión HTTP, etc. Quiero aclarar que la versión gratuita de CloudFlare únicamente permite establecer 5 reglas personalizadas, lo que suele ser suficiente para el 90% de las webs, si quisieras configurar más reglas de este tipo, tendrías que optar por uno de los planes de pago disponibles. Otra funcionalidad que puede ser interesante en ciertas ocasiones puntuales sería el "Modo Bot Fight" de CloudFlare, el cual detecta como actúan los bots y los bloquea en base a unos parámetros o patrones establecidos. Normalmente, esta opción suele permitir los bots conocidos como los de Google, ya que los incluye en una lista blanca, no obstante, hay que tener cuidado al habilitarlo porque es posible que llegue a bloquear otro tipo de bots legítimos.

Integrar CloudFlare en WordPress:

Existe un plugin oficial de CloudFlare que te permite integrar este CDN con WordPress, puedes descargarlo directamente desde el repositorio: https://es.wordpress.org/plugins/cloudflare/ Hay que decir que realmente, el plugin no añade prácticamente ninguna funcionalidad, no obstante, te permite configurar ciertas opciones del CDN directamente desde el panel de WordPress, además de la posibilidad de eliminar la caché del propio CloudFlare o configurarla para que se purgue automáticamente cuando realices cambios en la aplicación. Una vez instalado el plugin, te pedirá que introduzcas el email de tu cuenta de CloudFlare y la API key para poder realizar la integración con WordPress. La API tendrás que crearla en la cuenta de CloudFlare, desde el apartado "Mi perfil > "Tokens de API" > "Crear Token". Aquí podrás observar que ya existen varias plantillas con permisos preconfigurados, entre las cuales se encuentra la de "WordPress", que es la que tienes que escoger. No tienes que realizar ninguna modificación adicional, tan solo pasar al siguiente paso, darle a "Crear token" y copiar el contenido del mismo para poder introducirlo en el campo correspondiente del plugin de WordPress. Una vez realizada la integración, podrás ver 3 apartados:

• Home: desde aquí puedes purgar la caché de CloudFlare manualmente, habilitar el purgado automático de la caché (al realizar cambios en WordPress), o aplicar los "Ajustes recomendados" de CloudFlare, los cuales puedes verificar desde aquí: https://developers.cloudFlare.com/support/third-party-software/content-management-system-cms/what-settings-are-applied-when-i-click-optimize-cloudFlare-for-wordpress-in-cloudFlares-wordpress-plugin/
• Settings: te permite activar/desactivar el modo desarrollador o el de "Always online" que ya comentamos anteriormente en el post y modificar el nivel de seguridad de CloudFlare.
• Analytics: puedes revisar parte de las estadísticas del CDN de CloudFlare desde el propio panel de WordPress.

Como ves, el plugin en si es muy simple y no añade configuraciones imprescindibles, lo más llamativo y útil del plugin son las funcionalidades a nivel caché (purga manual desde el panel de WordPress y purga automática al realizar modificaciones en la instalación).