Administrar su sitio de WordPress a través de HTTPS ya no es opcional. No sólo es más seguro (todo está encriptado, nada pasa como simple texto), sino también construye confianza, es un factor de posicionamiento de SEO, y provee datos de referencia precisos. Los problemas de desempeño atados a la encriptación han sido arreglados por la mayor parte, gracias a HTTP/2 y Let’s Encrypt ha cambiado a la industria por completo, al proveer una forma fácil de obtener certificados SSL gratuitos.

Pero para algunos negocios, una de las razones más importantes es que los navegadores, tal y como lo son Chrome y Firefox, están hostigando a aquellos que no utilicen HTTP y mostrando advertencias más estrictas. ¡Eso es lo último que querrá mostrarles a sus visitantes!

(Lectura sugerida: si estás usando versiones TLS heredadas, tal vez quieras arreglar las notificaciones ERR_SSL_OBSOLETE_VERSION en Chrome).

Tenemos una guía muy detalla de cómo migrar de HTTP a HTTPS, y un problema muy común que los dueños de páginas web se encuentran después de la migración son las “Advertencias de contenido mezclado.” El día de hoy les mostraremos lagunas formas para arreglar estos problemas en su sitio de WordPress.

¿Qué Es una Advertencia de Contenido Mezclado?

Una advertencia de contenido mezclado aparece en el navegador del usuario cuando el sitio de WordPress se encuentra cargando scripts o contenido de HTTPS y HTTP al mismo tiempo. No puede cargar ambos ya que son protocolos completamente separados. Cuando usted migra de HTTP, todo debe estar funcionando con HTTPS.

Hablando de eso, Wired documentó su transición de HTTP a HTTPS y de las advertencias de contenido mezclado con las que se encontraron:

“[…] uno de nuestros mayores retos de pasarnos a HTTPS es preparar todo para ser entregado a través de conexiones seguras. Si una página se carga en HTTPS, todos los demás artículos (como imágenes y archivos de JavaScript) también deberán ser cargados en HTTPS. Estamos viendo un alto volumen de reportes de “contenido mezclado”, o eventos en donde un activo inseguro de HTTP se carga en el contexto de una página HTTPS segura. Para hacer esta transición de forma correcta, tuvimos que asegurarnos de que tuviéramos menos problemas de contenido mezclado – para que sigamos brindando gran cantidad de contenido en WIRED.com de la forma más segura posible.”

A continuación, les dejamos unos ejemplos de lo que pasa en los navegadores si usted no arregla estas advertencias.

Ejemplo de Contenido Mezclado en Chrome

Aquí tenemos un ejemplo de lo que pasa en Chrome cuando aparece una advertencia de contenido mezclado en su sitio de WordPress. De acuerdo a NetMarketShare, Chrome actualmente está en primera posición cuando se trata del mercado de los navegadores, siendo usado por más del 60% de la web. Así que la siguiente advertencia es la que verá la mayoría de los visitantes.

Advertencia de contenido mezclado de Chrome

Advertencia de contenido mezclado de Chrome

Ejemplo de Advertencia de Contenido Mezclado en Firefox

Aquí hay un ejemplo de lo que pasa en Firefox cuando aparece una advertencia de contenido mezclado en un sitio de WordPress.

Advertencia de contenido mezclado de Firefox

Advertencia de contenido mezclado de Firefox

Ejemplo de Advertencia de Contenido Mezclado en Microsoft Edge

Aquí tenemos un ejemplo de lo que pasa en el navegador de Microsoft Edge cuando aparece una advertencia de contenido mezclado en un sitio de WordPress.

Advertencia de contenido mezclado de Edge

Advertencia de contenido mezclado de Edge

Ejemplo de Advertencia de Contenido Mezclado en Internet Explorer

Aquí hay un ejemplo de lo que pasa en Internet Explorer cuando aparece una advertencia de contenido mezclado. Como puede observar, IE es probablemente uno de los peores porque de plano evita que la página se forme hasta que le de uno clic al popup. Afortunadamente, Internet Explorer no ocupa mucho espacio en el mercado de navegadores hoy en día.

Advertencia de contenido mezclado de Internet Explorer

Advertencia de contenido mezclado de Internet Explorer

¿Qué Es Lo que Causa las Advertencias de Contenido Mezclado?

Hemos descubierto que la mayoría de las advertencias de contenido mezclado más comunes aparecen justo después de que alguien migre su sitio de WordPress de HTTP a HTTPS. Los enlaces HTTP son simplemente trasladados y esto causa que surjan las advertencias de contenido mezclado. Otra razón puede ser que haya añadido recientemente un nuevo servicio o plugin.

Aquí tenemos unos ejemplos adicionales de lo que podría causar la advertencia.

  • Los desarrolladores de plugins en algunas ocasiones utilizan trayectorias absolutas (http://yourdomain.com/style.css) en sus plugins o temas para enlazarse a CSS y JavaScript, en lugar de usar trayectorias relativas (/style.css).
  • Las imágenes tienen URLs codificadas (http://yourdomain.com/image.png) que apuntan a HTTP. Esto podría ser dentro de una publicación, página o incluso widget.
  • Usted está enlazando a versiones de HTTP de scripts externos. (Hosted jQuery, Font Awesome, etc.)
  • YUsted ha incrustado scripts de video usando HTTP en lugar de HTTPS.

¿Cómo Arreglar estas Advertencias de Contenido Mezclado?

Siga estos simples pasos para arreglar las advertencias de contenido mezclado. Esto, asumiendo, que ya haya hecho lo siguiente:

Usaremos nuestro sitio para desarrollar (wpdev.ink) en los ejemplos.

Paso 1

El primer paso que tiene que dar es encontrar qué recursos aún se están cargando por HTTP. Llegue a la página dónde está pasando y abra Chrome DevTools. Recuerde, puede que sólo esté pasando en ciertas áreas de su sitio, no global.

  • Windows: F12 o CTRL + Shift + I
  • MAC: Cmd + Opt + I)

También puede abrir Chrome DevTools del menú de herramientas.

Abriendo los DevTools de Chrome

Abriendo los DevTools de Chrome

Paso 2

Hay un par de lugares que puede checar qué recursos no se están cargando a través de HTTPS. El primero es la pestaña de “Consola”. Nota: Probablemente necesite refrescar la página después de que haya abierto los DevTools de Chrome para que pueda cargar todo de forma apropiada.

Abajo fácilmente podemos ver que hay una imagen insegura siendo enlazada a la versión HTTP del sitio y un enlace apuntando a la versión alojada de jQuery.

El contenido mezclado en la consola de DevTools de Chrome

El contenido mezclado en la consola de DevTools de Chrome

También puede buscar en la pestaña de “Seguridad”. Le mostrará los origines no seguros y podrá dar clic en “Ver petición en el panel de la red.” Nota: Probablemente necesite refrescar la página después de que haya abierto los DevTools de Chrome para que pueda cargar todo de forma apropiada.

Seguridad de DevTools de Chrome

Seguridad de DevTools de Chrome

Y, por último, pero no por eso menos importante, usted puede ver las peticiones en la pestaña de “Red«. Nota: Probablemente necesite refrescar la página después de que haya abierto los DevTools de Chrome para que pueda cargar todo de forma apropiada.

Red de DevTools de Chrome

Red de DevTools de Chrome

Si no está utilizando Chrome, o simplemente quiere un resumen rápido de los errores, también puede utilizar una herramienta gratuita como Why No Padlock. Esta escanea una página individual y le muestra todos los recursos inseguros.

Why No Padlock?

Why No Padlock?

Verificando Advertencias de HTTPS en Lote

Si a usted le preocupa el resto de su sitio, le recomendamos que lo verifique en lote. Aquí le dejamos algunas opciones recomendadas.

  • Hay una pequeña herramienta llamada SSL Check de JitBit, la cual usted puede usar para ver cada rincón de su sitio HTTPS de WordPress y buscar imágenes inseguras y scripts que activen esta advertencia en los navegadores. El número de revisiones de páginas está limitado a 200 por sitio.
  • La herramienta de Ahrefs audit ahora tiene la habilidad de poder detectar contenido mezclado HTTPS/HTTP. Si ya tiene acceso a esto, o alguien en su equipo de mercadotecnia lo tiene, puede ser u a buena forma de terminar con esto.
  • HTTPS Checker es un software para computadora que puede instalar que escaneará su sitio. Puede ayudarle a checar por advertencias de “no seguro” y contenido después de grandes cambios. Está disponible para Windows, Mac y Ubuntu. El plan gratuito le permite verificar hasta 100 páginas.

Paso 3

El siguiente paso es confirmar que estos recursos que se cargan en HTTP sean accesibles a través de HTTPS. Lo más probable es que así sea, usted sólo tiene que actualizar los enlaces. Para nuestro ejemplo de arriba usaremos la imagen insegura y un jQuery hosted.

¿Luchando con el tiempo de inactividad y los problemas de WordPress? Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Vea nuestras características
  • http://wpdev.ink/wp-content/uploads/2018/06/website-never-done.jpg
  • http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Si tomamos estas dos URLs, las agregamos en la barra de direcciones de nuestro navegador, y ponemos el HTTPS al principio, podremos ver que cargarán bien. Así que, simplemente tendremos que proceder y hacer una búsqueda y reemplazarlas en nuestro sitio.

Paso 4

Hay muchas formas distintas en las que uno puede hacer una búsqueda y reemplazo de WordPress. En este articulo, les guiaremos a través de dos opciones recomendables distintas.

Si tiene curiosidad, no recomendamos usar el plugin Really Simple SSL. A pesar de ser un buen plugin, no debería depender de un plugin a largo plazo. No regresará a HTTP más tarde, así que hágalo de la forma correcta y actualice sus URLs de HTTPS en su base de datos (como le mostraremos abajo).

Si usted es un cliente de Kinsta, puede utilizar nuestra herramienta de búsqueda y reemplazo que está disponible dentro del dashboard de MyKinsta. Bajo Sitios en “Administrar”, a un lado del sitio en donde quiere realizar la búsqueda y reemplazo. Luego de clic en “Herramientas” y encontrará la herramienta de Búsqueda y Reemplazo en la parte de abajo

La herramienta de búsqueda y reemplazo de Kinsta

La herramienta de búsqueda y reemplazo de Kinsta

  1. Ingrese en el campo de búsqueda el valor que desea buscar en la base de datos, la cual en este caso es nuestro dominio HTTP: http://wpdev.ink.
  2. Ingrese en el campo de reemplazo el nuevo valor que deberá ser usado para reemplazar el valor que ha buscado. En este caso, es nuestro dominio de HTTPS: https://wpdev.ink.
  3. Asegúrese de que la opción de “Dry Run» este seleccionada primero, ya que esto contará cuantos reemplazos se han hecho sin que en realidad haya habido reemplazos. Luego, haga clic en “Reemplazar.”

Importante: Asegúrese de no incluir ni un espacio en blanco en ninguno de los campos ya que esto podría producir resultados indeseables.

Búsqueda y reemplazo de HTTP a HTTPS

Búsqueda y reemplazo de HTTP a HTTPS

Usted verá una advertencia confirmando que quiere usar el comando para calcular cuantos reemplazos se harán. De clic en “Reemplazar” para confirmar. Nota. En modo de “Dry Run” no se harán cambios a la base de datos.

Calculo de reemplazos de búsqueda y reemplazo

Calculo de reemplazos de búsqueda y reemplazo

Luego verá el número total de reemplazos que se harán.

Número de reemplazos

Número de reemplazos

Luego puede deseleccionar “Dry Run” y dar clic en “Reemplazar” de nuevo para llevar a cabo una búsqueda y reemplazo, haciendo cambios en su base de datos. Nota: Se hace un backup automático cuando esta opción es activada (Identificador de Backups: beforesearchandreplace). S Para que siempre pueda  revertirlo si es necesario.

Búsqueda y reemplazo en vivo

Búsqueda y reemplazo en vivo

Luego verá una última confirmación del número de reemplazos hechos.

Confirmación de búsqueda y reemplazo en vivo

Confirmación de búsqueda y reemplazo en vivo

Si usted no es cliente de Kinsta, puede hace resto mismo con el plugin gratuito de Better Search Replace y simplemente borrar el plugin cuando haya terminado.

El plugin Better Search Replace

El plugin Better Search Replace

Puede descargarlo del repositorio de WordPress o buscándolo dentro del dashboard de WordPress bajo “Agregar nuevos” plugins. Después de activarlo, sólo busque su dominio HTTP (http://sudominio.com) y reemplácelo con su nuevo dominio HTTPS (https://sudominio.com).

Opciones de Better Search Result

Opciones de Better Search Result

Alternativamente, también puede hacer la búsqueda y reemplazo con el Script de interconnect/it Search Replace DB PHP o WP_CLI

Paso 5

Después de terminar la búsqueda y reemplazo, usted querrá checar de nuevo su sitio, para confirmar que las advertencias de contenido mezclado han desparecido. Nosotros recomendamos simplemente visitar su sitio y dar algunos clics sobre las páginas, mientras observa el indicador de estado del navegador en la barra de direcciones.

En nuestro sitio, podemos ver que las imágenes inseguras ahora han sido arregladas, pero la advertencia de hosted jQuery sigue en pie. La razón es que hicimos una acción de búsqueda y reemplazo en las cargas de recursos de nuestro propio dominio. Este es un script externo que puede ser actualizado manualmente.

Advertencia de contenido mezclado

Advertencia de contenido mezclado

En este caso, el script ha sido agregado manualmente en nuestro header de WordPress (header.php). El script debería usar una URL relativa, así que la actualizamos a: //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Script externo de HTTP

Script externo de HTTP

Es muy probable que para la mayoría de ustedes, con tan solo hacer el proceso de búsqueda y reemplazo termine resolviendo todos los problemas. Pero para las personas que agregaron código a su sitio de WordPress, es probable que se encuentre con problemas adicionales. Si piensa que hay un script externo codificado en uno de sus plugins o tema, y tiene problemas en su intento de rastreo, siéntase libre de ponerse en contacto con el desarrollador para que le ayude.

Ejemplo de Advertencias de Falta de Contenido Mezclado en Chrome

Aquí le tenemos un ejemplo de lo que sucede cuando todo se carga de forma correcta a través de HTTPS en Chrome, y cuando ya no hay advertencias de contenido mezclado.

Advertencia de falta de contenido mezclado en Chrome

Advertencia de falta de contenido mezclado en Chrome

Ejemplo de Advertencias de Falta de Contenido Mezclado en Firefox

Aquí le tenemos un ejemplo de lo que sucede cuando todo se carga de forma correcta a través de HTTPS en Firefox, y cuando ya no hay advertencias de contenido mezclado.

Advertencia de falta de contenido mezclado en Firefox

Advertencia de falta de contenido mezclado en Firefox

Ejemplo de Advertencias de Falta de Contenido Mezclado en Edge

Aquí le tenemos un ejemplo de lo que sucede cuando todo se carga de forma correcta a través de HTTPS en Edge, y cuando ya no hay advertencias de contenido mezclado.

Advertencia de falta de contenido mezclado en Edge

Advertencia de falta de contenido mezclado en Edge

¿Y HSTS?

Algunos de ustedes se estarán preguntando por qué no simplemente utilizar HSTS (HTTPS Strict Transport Security) para arreglar esto. HSTS fue creado como una forma para forzar que el navegador utilice conexiones seguras cuando un sitio funciona con HTTPS. Es un header de seguridad en el cual uno puede agregar su servidor web y es reflejado en el encabezado de respuesta como un Strict-Transport-Security.

HSTS no es una solución rápida para todas las advertencias de contenido mezclado.HSTS simplemente lidia con las redirecciones, mientras que las advertencias de contenido mezclado es una característica del mismo navegador. Usted tampoco tendrá control sobre sitios externos habilitando HSTS. Así que siempre tendrá que estar actualizando con URLs http://.

Esa Jokinen explica mucho mejor las razones en su discusión de Server Fault.

Recomendaciones Adicionales (Casos Especiales)

  • Si está utilizando el generador de páginas de Elementor, también debe ingresar a la configuración de Elementor y actualizar la URL de su sitio allí para que los archivos CSS se regeneren con la nueva URL. Una vez que haya hecho esto, borre la cache debería eliminar cualquier advertencia insegura debida a Elementor.
  • Si está utilizando Kinsta CDN, se recomienda purgar la Zona CDN también.

Resumen

Para la mayoría de ustedes una simple acción de búsqueda y reemplazo será suficiente para rápidamente resolver las advertencias de contenido mezclado y tener de vuelta a la normalidad su sitio web en tan solo unos minutos. Si esto no arregla todos los problemas, es muy probable que haya uno o dos scripts que han sido codificados. Para estos, usted necesitará encontrarlos manualmente y actualizarlos.

Si tiene algún comentario o se ha encontrado con problemas, háganos saber en la sección de comentarios.


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes