Ya sabemos que Cloudfare ofrece el certificado gratuito Flexible SSL, y vamos a ver cómo instalarlo en un sitio WordPress.


 
Importante recordar lo que comentamos siempre: Realiza una backup de tu sitio web antes de realizar cambios.

 

 

 

Primero hemos de instalar en nuestro sitio WordPress, el plugin  CloudFlare Flexible SSL :

cloudfare-flexible-ssl-plugin

   

 
 

 

PASOS A REALIZAR PARA CONSEGUIR ACTIVAR CLOUDFARE FLEXIBLE SSL EN WORDPRESS

Hemos de realizar estos pasos en orden:

  • no cambiar la url del sitio en WordPress en ningún momento (opción disponible en el menú / Ajustes / Generales)

cambiar-url-sitio-wordpress

 

 

  • Entramos en Cloudfare y añadimos una regla de página al estilo: *midominio.com* .
    Con la configuración: Usar HTTPS  Siempre   ON (Always use HTTPS y Enforce HTTPS for this URL)

regla-de-pagina-cloudfare-page-rule-https-on

 

 

  • Posteriormente activamos Flexible SSL en Cloudfare (Disponible en la sección “Crypto“)

 

activar-flexible-ssl-cloudfare

 

 

COMPROBACIÓN DE LA ACTIVACIÓN DE CLOUDFARE FLEXIBLE SSL WORDPRESS

 

  • Ahora hemos de comprobar primero que la web WordPress sigue funcionando de forma correcta, y que se ha activado el protocolo https (antes accedíamos por http, y ahora debe ser https).

 

  • Accedemos entonces a nuestro sitio web y comprobamos si aparece el candado verde que indica que la página utiliza un certificado de seguridad y está correctamente instalado. Pero puede ser que ocurra lo siguiente, y es que la navegación funcione por https pero no aparezca el candado (eso quiere decir que el certificado no está correctamente instalado):

 

flexible-ssl-cloudfare-candado-verde-certificado-https-mixed-content

 

 

¿POR QUÉ NO APARECE EL CANDADO VERDE QUE INDICA QUE LA WEB TIENE INSTALADO CERTIFICADO SSL?


 
** Si no aparece el candado verde es porque tenemos mixed content (contenido mixto), es decir, algunos elementos de la página son HTTP, y otros HTTPS, y TODOS los elementos deberían mostrarse a través de HTTPS ahora que hemos activado el certificado Flexible SSL de Cloudfare.
 

 

SOLUCIÓN AL ERROR: NO SE MUESTRA CANDADO VERDE CERTIFICADO SSL

 

Utilizaremos el inspector de código de Google Chrome o Firefox, y podremos comprobar si tenemos Mixed Content (algunos contenidos son servidos por http y otros contenidos son servidos por https). En el Inspector de código de Chrome , en la pestaña Security, veremos si tenemos todavía contenido mixto:
 

el-sitio-incluye-recursos-http-mixed-content
 

 
Como vemos en la anterior captura de pantalla, veremos el error:

Mixed Content

The site includes HTTP resources

View requests in Network Panel

 

Y si investigamos más a fondo en la pestaña “Console“, veremos todos los errores referentes a contenido mixto.

error-certificado-ssl-mixed-content-inspector-google-chrome

 

 

SOLUCIÓN AL PROBLEMA DE CONTENIDO MIXTO O MIXED CONTENT (Contenidos HTTP y HTTPS)

–> La solución a los contenidos servidos por HTTP es, simplemente, corregirlos.
–> Han de servirse todos a través de HTTPS.

Algunos de esos contenidos servidos por HTTP los corregiremos de forma manual:

  • Algunos elementos de Mixed content podemos modificarlos en bruto desde la base de datos.
    • Realizamos una búsqueda en la base de datos buscando http:// y cambiamos los resultados obtenidos por https.

     

  • O desde /wp-admin/options.php.
    • Lo mismo, buscamos referencias a HTTP:// y las cambiamos por HTTPS://

 

 

CASOS ESPECIALES Y PROBLEMAS CONOCIDOS AL INSTALAR FLEXIBLE SSL EN WORDPRESS


 
**** CUIDADO CON el plugin SHAREAHOLIC para wordpress: En la SECCIÓN ANALYTICS, hemos de DESACTIVAR COOKIES DE TERCEROS (Shareaholic):

(SI NO LAS DESACTIVAMOS, SE INYECTA UN IFRAME HTTP QUE GENERA CONTENIDO MIXTO).

Podemos desactivar las Cookies de terceros en Shareaholic en la sección: My Sites/ Site Tools /Analytics /

flexible-ssl-shareaholics-analytics-third-party-data-services

 

 

AYUDA EXTRA Y TRUCOS PARA RETOCAR .HTACCESS Y WP-CONFIG.PHP (si fuera necesario) PARA ADAPTAR EL SITIO A FLEXIBLE SSL DE CLOUDFARE

También puede ser necesario añadir reglas en el archivo .htaccess y en el archivo wp-config.php:
 

RETOQUES EN .HTACCESS PARA EL USO DE SSL:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://misitio.com/$1 [R,L]
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

 

 

RETOQUES EN WP-CONFIG.PHP PARA EL USO DE SSL:

define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

define('WP_HOME', 'https://misitio.com/');
define('WP_SITEURL', 'https://misitio.com/');

 

 

Y si has realizado todos los pasos correctamente, ya podrás disfrutar de tu certificado Cloudfare Flexible SSL en WordPress


 
cloudfare-flexible-ssl-wordpress-certificado-activado

 


Etiquetas del articulo: , , , ,


Suscríbete para acceder a la zona privada

Suscribiéndote a la lista de correo de El Taller del Bit conseguirás entrar a la zona privada de descargas con materiales exclusivos (ebooks, artículos privados, plugins, descargas de exámenes resueltos ...)

Gracias. Te has suscrito con éxito!