Flexible SSL para WordPress con Cloudflare Protege tus datos y los de tus visitantes

Wordpress

Los más curiosos se habrán fijado que toda mi web corre bajo el protocolo de seguridad https, lo cuál significa a groso modo que todos los datos que se envían a través de esta web están encriptados. No se me ha ocurrido otra forma mejor de empezar el blog que explicando esto, que puede parecer algo sencillo pero da algún problema que otro con WordPress.

Normalmente este protocolo se suele utilizar en webs e-Commerce u otras que transfieren datos sensibles como tarjetas de crédito, no tiene mucho sentido hacerlo en una como la mía a no ser de que quieras hacerlo “porque sí” y por estos motivos:

  • Seguridad: te aseguras de que nadie está robando tus datos en conexiones Wi-Fi públicas y otros lugares.
  • Velocidad: La carga es más rápida, aquí se puede hacer un test para comprobarlo.
  • Confianza: al mostrar la clásica imagen del candado verde, tus visitantes tienen más confianza en él.
  • Mejora de posicionamiento (SEO): Google clasifica los sitios que tienen SSL más alto en los resultados de búsqueda.
  • Cumplimiento de normas en e-Commerce: las instituciones financieras y tiendas online que funcionan con tarjetas de crédito deben cumplir con las regulaciones y adoptar SSL en sus sitios web.

Sobre Universal SSL

Cloudflare es un servicio de CDN y DNS gratuito con algunas funciones premium, entre todo eso que nos ofrece gratis nos da un certificado de Universal SSL que utiliza una encriptación de certificados Elliptic Curve Digital Signature Algorithm (ECDSA) de Comodo o GlobalSign.

Comparación de los tipos de SSL de Cloudflare
Diferentes tipos de configuración SSL que ofrece Cloudflare
  • Flexible SSL: Hay una conexión cifrada entre los visitantes del sitio y CloudFlare, pero no de CloudFlare en su servidor. No se necesita un certificado SSL en tu servidor, es mi caso.
  • Full SSL: Cifra la conexión entre los visitantes del sitio y CloudFlare, y de CloudFlare en su servidor. Necesitarás un certificado en tu servidor, pero Cloudflare no valorará el mismo.
  • Full SSL (strict): Cifra la conexión entre los visitantes del sitio y CloudFlare, y de CloudFlare en su servidor.Necesitarás un certificado en tu servidor, Cloudflare comprobará que es válido y no está caducado.

Hay que tener en cuenta que Flexible SSL no funciona con Internet Explorer 7 o anteriores, Firefox 2, Opera 8 con TSL 1.1 activado y alguno más, podéis verlo aquí.

cloudflare SSL y WordPress

Todo esto lo voy a explicar de cara a crear una nueva web, pero ya sabéis que si lo que queréis es migrar un blog ya existente a HTTPS tendréis que hacer las redireciones 301 oportunas para no perder vuestro ranking en Google.

Lo primero que hacemos es instalar nuestro WordPress de forma convencional, no lo instaléis desde https://tuweb.com porque puede que os de algún tipo de problema de estilos CSS. Ya cambiaremos luego la dirección.

Llegados a este punto tenemos que saber que Cloudflare añade a nuestra web una cabecera que es HTTP_CF_VISITOR la cuál tendremos que comprobar para que WordPress no haga un loop de redireciones.

Para ello existe un plugin de 3 líneas de código llamado Cloudflare Flexible SSL (las cuales no recomiendo añadir al functions.php) que hará la activación de $_SERVER[‘HTTPS’] cuando detecte que la cabecera HTTP_CF_VISITOR contenga el conjunto de caracteres https.

Ahora ya podemos hacer el cambio a https desde Ajustes > Generales añadiendo el protocolo de esta manera.

Cambio de URL a HTTPS en WordPress

Con esto ya conseguiremos que funcione correctamente, pero ahora vamos a crear una regla en el panel de Cloudflare para indicar que todo nuestro dominio redireccione a https y curarnos en salud, sea cual sea el protocolo utilizado.

En la pantalla principal de selección de dominios, en el panel de Cloudflare pulsamos sobre la rueda dentada y seleccionamos Page Rules y añadimos una regla como esta con la dirección de nuestro dominio.

Regla de Cloudflare para obligar a todo el dominio a usar https

conexion-segura-https-sslDespués de esto ya tendremos un precioso candado en nuestra web que indicará que la conexión está cifrada!

Espero que os sirva de utilidad para hacer vuestros sitios web más seguros y rankeables en Google, si te ha gustado no te olvides de compartirlo con los demás.

40 comentario

  1. Hola que tal, me sirvió mucho tu publicación, sin embargo no se si me pudieras ayudar, quisiera aplicarlo a un sitio hecho a mano, ya esta bajo cloudflare solo por la protección y estadísticas del mismo, si bien entedi estas 4 lineas se pueden agregar a un archivo, obvio no se, quizá el index por ejemplo y ahí tomaría las cabeceras de que actué sobre https con cloudflare para pasar el certificado?, no se si me de a entender ya que también encontré unas opciones en el blog de cloudflare donde a un sitio puedo agregar 2 lineas de código en htaccess y se hace el paso, no lo he probado por que el sitio esta en producción, lo tendría que hacer en fin de semana pero no se si esto funcione, sabrás algo al respecto, sabrás de alguna guía?, gracias.

    • Hola Jose, veo en tu web que ya conseguiste ponerlo tu solo 🙂 Buen trabajo!

      • Asi es muchas gracias por este post, fijate que estoy migrando a otro sitio pero este no es un CMS ni nada, es un sitio del instituto donde apoyo y ya pude incluir el certificado sin embargo por la direccion de las imagenes y una serie de situaciones con el desarrollador anterior no sale el icono en verde, con un movimiento que haga en un archivo global sale pero al hacer reportes de fpdf hay errores con las rutas de las imagenes, sin embargo estoy trabajando para solucionar esto y salga bien el sitio, no soy experto en htaccess ya que desde ahi puse a que cloudflare hiciera ese pase de flexible ssl pero estoy estudiando, si gustas ver la pagina es sii.itsanjuan.edu.mx, es algo complicado de explicar pero si tu sabes mas y si tienes tiempo me darias una mano?, Gracias por el apoyo men.

        • No estoy seguro si te refieres a que no sale el candado verde o a que, pero es porque tienes contenido mixto en la página, contenido con http y https, cuando haces una página con https las políticas tendrían que ser automáticamente poner todo con https y seguro, por eso Chrome quita el candado verde, en la consola de javascript puedes verlo y corregirlo poniendo esos recursos (en tu caso imágenes) con https, aquí te dejo una captura https://gyazo.com/ea7475826f6636194c445061af85b5ac

  2. Hola, configure todo tal cual sale el tutorial, pero al ingresar a mi sitio con https:// me da error 404 y no me permite ingresar al /wp-admin tuve que desinstalar el sitio e instalar WP de nuevo

    • Seguramente sea del htaccess, revisa que instalaste el plugin para meter las cabeceras de Cloudflare

      • Gracias por la respuesta Adrian. El .htaccess esta bien. Instale el plugin ” Cloudflare Flexible SSL”, lo active y todo ok. Desde Cloudflare active las DNS de ellos, se propagaron y todo ok, pero en esta parte no entiendo que quieres decir:

        Llegados a este punto tenemos que saber que Cloudflare añade a nuestra web una cabecera que es HTTP_CF_VISITOR la cuál tendremos que comprobar para que WordPress no haga un loop de redireciones.

        Para ello existe un plugin de 3 líneas de código llamado Cloudflare Flexible SSL (las cuales no recomiendo añadir al functions.php) que hará la activación de $_SERVER[‘HTTPS’] cuando detecte que la cabecera HTTP_CF_VISITOR contenga el conjunto de caracteres https.

        if ( isset( $_SERVER[‘HTTP_CF_VISITOR’] )
        && strpos( $_SERVER[‘HTTP_CF_VISITOR’], ‘https’ ) !== false ) {
        $_SERVER[‘HTTPS’] = ‘on’;
        }

        El HTTP_CF_VISITOR donde lo encuentro? Gracias.

        • Puedes hacer un print_r($_SERVER[‘HTTP_CF_VISITOR’]) y ver si sale algo, que hosting usas?

          • Estimado Adrian, le envie un correo con la consulta mas detallada. Gracias por sus aportes 🙂

  3. Amigo implemente el ssl certificado en mi web pero aun en google los post antiguos aparecen sin el https y ademas tambien en google la pagina de inicio aparece sin el https, pero los nuevos articulos si aparecen con el https, como debo hacer para que mis post antiguos aparescan con el https

    • Espera un tiempo, Google tarda en indexar. Asegúrate de que tienes bien puesto el sitemap.xml y Explorar como Google y dale a indexar datos desde tu Webmaster Tools.

  4. Gracias por la explicación Adrián. Pero no se como implementarlo a un sitio web creado en base a Bootstrap. Ya tengo las DNS de Cloudfare configurada y todo y me gustaría implementar el SSL flexible. Debo agregar esas líneas del código del plugin de WP solamente? Agradezco me pudieras dar una ayudita. Saludos.

    • En principio si no tienes WordPress no te hacen falta estas líneas, prueba a acceder a tu sitio mediante HTTPS y comprueba.

  5. Intento cambiar el URL del sitio y no me deja 🙁

    Sale el siguiente error ya me dejo en Dirección del sitio (URL) pero en Dirección de WordPress (URL) no

    “Sorry, but you have to change your domain name here.”

    • Veo que has conseguido solucionarlo si es la URL de tu comentario, es así?

  6. Conseguí activar el SSL gracias a este post. No obstante se muestra un signo de exclamación en lugar del candado en la barra de direcciones, indicando lo siguiente: “Este sitio web no proporciona información de identidad”, y “La conexión no es totalmente segura porque contiene elementos no cifrados o el cifrado no es suficientemente fuerte”… Ni idea de dónde viene el error o cómo solucionarlo. Se puede comprobar en mi sitio web http://www.eliteseguros.net. Saludos.

  7. hola , una consulta no me deja cambiar la URL en el panel del wordpress, puede ser porque tengo el htacess con permisos en 444 ?. o tendria que ver con mi hosting ?.saludos y muy buena tu información.

  8. Buenas! Buen post. He realizado todos los pasos y funciona el acceso a https pero tengo una duda y es que no se ve el candado verde entrando desde Chrome, en cambio desde Mozillas si. Me he fijado y pasa a muchas webs con certificado de Cloudflare. En esta misma web y este post en concreto, no sale candado verde desde Chrome. ¿A que puede ser debido? Gracias y saludos.

    • Fíjate en todos los recursos (js, css, img) que estás cargando en la página y verifica que todos se están cargando con https. Para verlo puedes abrir la consola y ahí te dirá si alguno no se está cargando mediante https, para que veas el candado en verde TODO debe cargarse mediante https.

    • Es una noticia de Septiembre de 2014, actualmente no hay ningún problema con ello, lo puedes comprobar aquí mismo.

  9. Hola que tal Adrian, primero que todo muy agradecido por compartir esta información tan importante, ahora bien, he activado de manera correcta el certificado SSL en mi sitio, pero cuando trato de crear una redireccion 301 para que todo se vea de esta forma “https://www.dominioejemplo.com” me genera siempre un error 404 y ya no se que hacer. Use esta linea de tu otra entrada para re-direcciones en .htaccess

    RewriteEngine On
    RewriteBase /
    rewritecond %{http_host} ^domain.com [nc]
    rewriterule ^(.*)$ http://www.domain.com/$1 [r=301,nc]

    Comento que desde el panel de WP si uno manipula la estructura de la URL a https genera el mismo error.

  10. hola,

    tengo Cloudflare cacheando el sitio de WordPress, en servidor hostgator tengo instalado certificado SSL Wildcard de godaddy he cambiado, y configurado con forme a la guía en certificado me aparece COMODO ECC con el candado en verde y Tu conexión con está cifrada con un conjunto de cifrado moderno (candado en rojo con x).

    en mi configuración inicial de wordpress tengo http://www.mi-pagina.mx
    en cloudflare lo agregue a page rules como http://*mi-pagina.mx
    esto es correcto.

    saludos!!!

  11. Hola, tengo un problema creo que me salté la parte de activar el plugin y ahora no puedo ingresar al admin de wordpress, habrá manera de solucionarlo?

  12. hola, tengo un problema con cloudflare al poner en modo flexible y configurando el https en los ajustes de wordpress no me deja acceder ni a la web ni se ve no se como solucionar el tema. muchas gracias

  13. ¿Por cuánto tiempo es válido el certificado?
    ¿La opción Full SSL (strict) puedo usarla gratis o tengo que usar un plan de pago?
    Saludos.

  14. hola
    quisiera saber algo acerca de un video que esta en la web y no autorize…al escribirle a la pagina me envia un formulario que es de cloudflare.net quisiera saber si es seguro que envie mis datos a esta pagina y si sirve como intermediario para que esta pagina infractora elimine el contenido o como funcionria en este caso?

Enviar un comentario