Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Opciones SSL en WordPress

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Con el constante crecimiento la preocupación por la seguridad web, los certificados SSL han comenzado a ser una práctica habitual en la configuración de sitios web.

Este artículo te mostrará cómo implementar SSL en tu web WordPress pero no entraremos en detalles sobre cómo comprar y configurar los certificados en tu alojamiento, ya que esto cambia de proveedor a proveedor.

Dicho esto, la mayoría de alojamientos web venden e instalan certificados SSL para sus clientes por una tasa relativamente pequeña. Para realizar cualquiera de los cambios descritos en este artículo necesitarás disponer de antemano un certificado SSL configurado en tu servidor.

¿Qué es SSL?

SSL.com describe SSL como:

SSL (Secure Sockets Layer) es la tecnología estándar para establecer una conexión encriptada entre un servidor web y un navegador. Esta conexión asegura que toda la información enviada entre el servidor web y el navegador permanece privada e íntegra.

¿Por Qué Usar SSL?

Seguridad

No existe nada parecido a estar "demasiado seguro". La implementación de SSL es ahora más fácil y más asequible que nunca. Si tienes una web de e-commerce o estás procesando datos de usuarios, entonces es esencial. Pero el certificado SSL no es solo para sitios web de e-commerce - cualquier sitio web lo puede usar.

Confianza

Disponer de un certificado SSL válido es una buena señal de confianza que ofrecer a los visitantes de tu web. Muchos usuarios buscan el https en la barra de direcciones de su navegador.

SEO

Esto viene de la mano con la confianza - Google ha dicho ahora que van a empezar a usar el certificado SSL como señal para su ranking.

Un Rápido Aviso Legal

Como siempre, con cualquier cambio en una web deberías hacer primero una copia de seguridad y trabajar en un entorno web de pruebas antes de hacer los cambios efectivos en la web operativa online.

Securizar la Administración de WordPress

Ser capaz de securizar el back-end de WordPress es actualmente una característica integrada en el núcleo mismo de WordPress. Para habilitar la opción, necesitarás editar tu archivo wp-config.php que está ubicado en directorio raíz de tu instalación WordPress. Es siempre importante hacer una copia de seguridad de este archivo antes de editarlo ya que contiene información crucial que permite que WordPress funcione.

Una vez editado este archivo, la constante FORCE_SSL_ADMIN necesitará ser configurada a true. El código completo es este:

Una vez haya sido añadida esta línea (puede añadirse al final del archivo wp-config.php) asegúrate de guardar los cambios. Al refrescar la página, el navegador debería mostrarte ahora que se está cargando vía HTTPS.

SSL Usando el Plugin de WordPress HTTPS

WordPress HTTPS es una elección popular entre los usuarios que desean usar SSL en su sitio WordPress. El plugin ofrece una manera fácil de forzar SSL desde el panel de administración de WordPress. Es muy útil si quieres securizar solo ciertas partes de tu sitio web (entradas o páginas) pero también puede utilizarse para securizar tu sitio completo, además puede eliminar elementos inseguros automáticamente.

Para instalar el plugin, desde el escritorio de WordPress, dirígete a Plugins > Añadir Nuevo - y después busca "WordPress HTTPS" y pulsa "Instalar".

Securizar Determinadas Entradas/Páginas 

Una vez instalado, cada post/página tendrá un metabox personalizado que te da la opción de securizar el post y (opcionalmente) cualquier post hijo. Marca las opciones que desees y guarda el post. Este post (y los posts hijos, si has marcado la opción) serán servidos ahora vía HTTPS.

WordPress HTTPS Metabox

Securizar Tu Sitio Completo

Securizar todo tu sitio puede realizarse desde la página de ajustes de WordPress HTTPS. Pulsando el menú con icono de WordPress HTTPS desde el escritorio de WordPress abrirás la página de ajustes - voy a guiarte por los ajustes más comunes:

  • Force SSL Administration: Esta es una casilla de validación, si has seguido la sección "Securizando el Panel de Administración de WordPress" en este artículo, la casilla se mostrará de forma predeterminada activa.  Si no lo has hecho, marcándola asegurarás el panel de administración de WordPress.
  • Forzar SSL Exclusivamente: Si marcas esta opción, cualquier página en la que no hayas indicado el uso de SSL será redirigida al estándar HTTP.
  • Eliminar Elementos Inseguros: Si marcas esta opción, el plugin eliminará cualquier elemento de la página que sea inaccesible vía HTTPS. El inconveniente de este ajuste es que puede romper plugins que dependen de recursos externos - úsalo con cuidado.
WordPress HTTPS Settings

Finalmente, casi abajo del todo en la página, hay un campo de texto llamado "URL Filters" (Filtros de URL). Esta parte te permite securizar secciones de tu sitio web basándote en las URLs (también acepta expresiones regulares). En el ejemplo que el plugin nos da aquí es si quisieses securizar todas las URL's que empiezan con /store/.

Para hacer esto escribirías /store/ en el cajetín para el texto y pulsarías "Guardar Cambios". Para cada nuevo filtro que crees necesitarás comenzar una nueva línea. Los ajustes de "Filtros Seguros" también pueden usarse para hacer que el plugin securice todo tu sitio web. Simplemente añade un filtro que contenga el símbolo de la barra oblicua (/). Ahora cualquiera que intente acceder mediante HTTP será redirigido a HTTPS. Es una buena idea cambiar también tus ajustes de URL habituales en WordPress si vas a servir tu sitio web a través de HTTPS. Esto lo explicamos en la próxima sección del artículo.

WordPress HTTPS Secure Filters

Actualización: Los usuarios han informado de problemas con este plugin y WordPress 4.0 - es recomendable que no uses esta solución hasta que estos problemas estén resueltos. Por favor ver más abajo para encontrar un plugin alternativo.

SSL Usando el Security Plugin de iThemes

iThemes Security es uno de los plugins de seguridad más populares disponibles para WordPress. Tiene muchas funciones para securizar tu sitio WordPress, incluyendo la opción de usar HTTPS.

Advertencia: Este plugin es muy potente y algunos de los ajustes podrían ser capaces de bloquearte el acceso a tu web. Para realizar los ajustes básicos en el plugin te recomiendo que veas el vídeo oficial de iThemes.

Una vez tengas el plugin instalado y configurado (ver el vídeo de arriba) - dirígete al escritorio de tu WordPress, pulsa la pestaña "Security" y después "Settings".

Desde el menú desplegable "Go to" (ir a), pulsa "Secure Socket Layers(SSL)" para ser enviado a la sección correcta de los ajustes.

Hay tres ajustes en esta sección:

  1. Front End SSL Mode: Este menú desplegable tiene tres opciones:
  • Off - sin SSL en el front-end
  • Per Content (Según Contenido) - puedes elegir posts específicos para securizar con SSL
  • Whole site (todo el sitio) - Todo el front-end securizado
  • Force SSL for Login (forzar SSL para acceder): Marcar esta casilla significa que todos los accesos se envían mediante HTTPS
  • Force SSL for Dashboard (forzar SSL para el escritorio): Marcando esta casilla fuerzas a tu escritorio de WordPress a usar HTTPS
  • La parte más útil del plugin es la habilidad de securizar contenido específico en el front-end; si quieres securizar todo el sitio web, entonces la solución .htaccess es probablemente la apuesta más segura.

    Una vez hayas ajustado tus opciones aquí, asegúrate de pulsar el botón "Save All Changes" (guardar todos los cambios).

    Si has elegido la opción "per content" (por contenido), ahora verás una casilla de verificación dentro del metabox publicar de las entradas. Simplemente márcalo y pulsa "Update" (actualizar) para tener esta página securizada.

    Las limitaciones de usar iThemes security para SSL es que no permite comodines, así que no podrás crear reglas globales.

    SSL Mediante Código

    Este método es adecuado para cualquiera que desee servir todo su sitio vía HTTPS Esencialmente, lo que necesitamos hacer es redirigir cualquier tráfico desde HTTP a HTTPS, usando el código 301 (movido permanentemente). Esto se puede hacer con PHP, pero mi método preferido es usando .htaccess. Para que esta solución funcione, necesitarás un servidor Apache con mod_rewrite habilitado - la mayoría de servidores Linux lo son, pero pregunta a tu alojamiento antes de realizar cualquier cambio.

    Antes de hacer cualquier cambio en .htaccess, hay algunos ajustes en WordPress que necesitas cambiar. Desde el escritorio de WordPress dirígete a Ajustes > Generales. Bajo "Dirección de WordPress (URL)" y "Dirección del Sitio (URL)", puedes necesitar cambiar la dirección web, así que en lugar de http://www.yourdomain.com diga https://www.yourdomain.com (advierte el cambio en https). Una vez hecho esto, desplázate hacia abajo y pulsa el botón "Guardar Cambios". Esto le indica a WordPress que use HTTPS en todas las URLS, aunque no evita que la gente siga accediendo a tu web usando HTTP. Aquí es donde entra en juego el archivo .htaccess.

    Si tienes habilitados los permalinks, entonces ya tendrás un archivo .htaccess ubicado en el directorio raíz de tu instalación WordPress. Si no es así, tendrás que crearlo - para hacerlo, crea un nuevo archivo con el nombre .htaccess - este archivo no debe tener ningún otro nombre o extensión.  Los archivos .htaccess son archivos "dot" o "archivos ocultos", así que necesitarás habilitar su visibilidad en tu sistema operativo para encontrarlos.

    Después, abre tu archivo .htaccess con tu editor de texto preferido. Si no tienes habilitados los permalinks tu archivo .htaccess estará en blanco. Si los tienes, entonces tendrás algo de código que se parecerá a lo siguiente:

    Vamos a añadir algo más de código aquí. Directamente sobre en código estándar de WordPress, pega lo siguiente:

    Recuerda cambiar https://www.yourdomain.com/ por tu nombre de dominio actual. Si tienes un archivo .htaccess en blanco, simplemente coloca directamente el código.

    Las primeras y últimas líneas de este código con el símbolo de la almohadilla (#) son comentarios y están ahí para hacer el código más comprensible a los humanos. El <IfModule mod_rewrite.c> comprueba si el módulo mod_rewrite está habilitado ya que el código depende de mod_rewrite para la redirección. Después nos aseguramos de que RewriteEngine está configurado a On ya que necesitamos reescribir el motor para crear las redirecciones. Ahora, establecemos una condición para nuestro rewrite que implica que la regla que creamos solo se ejecuta si se accede a través del puerto 80 (el puerto 80 es el estándar para HTTP). Finalmente, RewriteRule está redireccionando a los usuarios a la versión HTTPS del dominio.

    Para comprobar que está funcionando correctamente, intenta visitar tu sitio usando una URL con HTTP - si automáticamente cambia a HTTPS, es que lo está haciendo correctamente.

    ¿Qué solución Debería Usar?

    No hay una única respuesta correcta.  Se podría argumentar que depender de un plugin para una parte tan integral de tu sitio web quizá no sea la mejor idea, ya que si el plugin se desactiva, borra o tiene una actualización podría tener consecuencias serias para tu web.

    Dicho esto, el plugin WordPress HTTPS tiene buena reputación con un montón de descargas y naturalmente es de código abierto. La manera más fácil es usar el plugin WordPress HTTPS si solo quieres ajustar ciertas áreas de tu sitio para HTTPS.

    Por otro lado, el método del código es bueno y sencillo si te sientes cómodo realizando algunos pequeñas ediciones en archivos y es un método fiable para convertir todo tu sitio web en HTTPS. 

    Algunos Trucos Para Desarrolladores

    Para que tu sitio web SSL sea válido, también todo tu contenido tiene que enviarse a través de SSL. Esto incluye, pero no está limitado a los scripts, las fuentes, las hojas de estilo, los elementos incrustados y las imágenes. Algunas agencias de publicidad todavía no envían el contenido a través de SSL, así que si ese es el caso no tienen mucha elección, pero es posible tener algunas páginas HTTPS y otras HTTP como ya hemos explicado anteriormente en el artículo.  

    Para evitar este problema, puedes usar un protocolo relativo a la URL. por ejemplo, digamos que estás solicitando la popular fuente de Google 'Open Sans':

    ¿Ves la falta de HTTP o HTTPS al principio de la URL? lo que conseguimos con esto, es solicitar el recurso usando el mismo protocolo que la página. De modo que, si estás usando HTTPS solicitará la versión HTTPS de la fuente web. Si la versión HTTPS no existiese, entonces usaría HTTP. Existen algunas desventajas en esta técnica como nos lo explica Paul Irish en este artículo. La mejor parte es que funciona estupendamente y resuelve muchos problemas - también funciona con CSS.

    Depurar Errores HTTPS

    Los errores HTTPS son causados frecuentemente porque la página sirve contenido no HTTPS. Para localizar el contenido causante, puedes usar Google Chrome.

    Para identificar la página que falla, en Google Chrome, verás un triángulo amarillo sobre el candado cerrado al principio de la barra de direcciones. Si lo pulsas te mostrará el error exacto tal y como ves aquí abajo:

    Broken SSL in Google Chrome

    Ahora, para encontrar el contenido causante del error en esta página y así poder arreglarlo, selecciona Vista >> Desarrollador >> Consola JavaScript. Deberías ver ahora algunos errores como los que te enseño abajo:

    Error Message The page at httpsmakewordpressorgsupportuser-manualwordpress-settingsdiscussion-settings was loaded over HTTPS but displayed insecure content from httpensupportfileswordpresscom200812def-avatarpng this content should also be loaded over HTTPS makewordpressorgsupportuser-manualwordpress-settingsdiscussion-settings316

    Este error te muestra el archivo exacto que provoca el problema (en este caso http://en.support.files.wordpress.com/2008/12/def-avatar.png) y el número de línea en el que el contenido aparece (316) Este contenido simplemente debería cambiarse a HTTPS (suponiendo que el servidor que aloja el contenido soporta HTTPS) o usa un protocolo de URL relativa como te hemos explicado con anterioridad. 

    Conclusión

    Ahora serás capaz de tomar la decisión correcta al elegir el mejor método para usar HTTPS en tu web WordPress e implementar tu solución preferida.

    Advertisement
    Advertisement
    Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.