Ejecutar tu sitio de WordPress sobre HTTPS ya no es opcional. No solo es más seguro (todo está encriptado, sin pasar nada en texto plano), sino que también crea confianza, es un factor de clasificación en los motores de búsqueda, y proporciona datos de referencia más precisos. Desafortunadamente, al migrar de HTTP a HTTPS, los propietarios de los sitios web pueden encontrarse con varios problemas. Uno de ellos es el de las «advertencias de contenido mixto».

Los problemas de rendimiento relacionados con el cifrado se han solucionado en su mayor parte gracias a HTTP/2, y Let’s Encrypt ha cambiado toda la industria al proporcionarte una forma fácil de obtener certificados SSL gratuitos.

Lo más importante para los negocios online es que los navegadores web como Google Chrome y Mozilla Firefox están tomando medidas estrictas contra los sitios que no funcionan con HTTPS, y están mostrando advertencias más estrictas a los visitantes potenciales. Por ejemplo, si estás usando versiones TLS heredadas, puedes encontrar notificaciones ERR_SSL_OBSOLETE_VERSION en Chrome. Las advertencias son la última cosa que quieres que tus visitantes vean.

Para ayudarte a evitar estos problemas, tenemos una guía detallada sobre cómo migrar de HTTP a HTTPS. Sin embargo, después de seguir ese proceso, es posible que sigas viendo advertencias de contenido mixto.

Hoy te mostraremos algunas formas diferentes de arreglar este problema en tu sitio de WordPress.

¿Qué Es una Advertencia de Contenido Mixto?

Una advertencia de contenido mixto aparece en el navegador de un usuario cuando el sitio de WordPress que está tratando de visitar carga scripts o contenido HTTPS y HTTP al mismo tiempo. Esto puede causar problemas, ya que HTTP y HTTPS son protocolos completamente separados.

Cuando migras a HTTPS, todo tiene que pasar por ese protocolo, incluyendo tus imágenes, archivos JavaScript, etc. A continuación mostraré algunos ejemplos de lo que puede suceder si parte de tu contenido sigue cargándose a través de HTTP.

Ejemplos de Advertencia de Contenido Mixto

Chrome es el navegador más usado actualmente, utilizado por más del 77% de la web. Así que la siguiente advertencia es lo que la mayoría de tus visitantes verían:

Una advertencia de contenido mixto en Google Chrome

Una advertencia de contenido mixto en Google Chrome

Por supuesto, no todo el mundo utiliza Chrome.

Este es un ejemplo de lo que sucede en Firefox cuando se muestra una advertencia de contenido mixto en un sitio de WordPress:

Una advertencia de contenido mixto en Firefox

Una advertencia de contenido mixto en Firefox

El siguiente es un ejemplo de cómo se ve esta advertencia en Microsoft Edge:

Una advertencia de contenido mixto en Microsoft Edge

Una advertencia de contenido mixto en Microsoft Edge

Y así es como aparece en Internet Explorer:

Advertencia de contenido mixto de Internet Explorer

Advertencia de contenido mixto de Internet Explorer

Como puedes ver, Internet Explorer es probablemente uno de los peores lugares para que aparezca esta advertencia, porque en realidad rompe la representación de la página hasta que se haga clic en la ventana emergente.

Este no es un error que quieras que los visitantes de cualquier navegador vean. Se puede arreglar, pero primero, necesitarás entender por qué ocurre.

Ejecutar tu sitio de WordPress sobre HTTPS ya no es opcional. ✅ Pero pasar de HTTP ➡️ HTTPS puede venir con advertencias de contenido mixto. Aprende a resolverlos rápidamente con esta guía 💥Click to Tweet

¿Qué Causa las Advertencias de Contenido Mixto?

Hemos encontrado que las advertencias de contenido mixto más comunes aparecen justo después de que alguien migra su sitio de WordPress de HTTP a HTTPS. Algunos enlaces HTTP simplemente se transfieren, y esto hace que las advertencias de contenido mixto empiecen a activarse.

Aquí tienes algunas causas adicionales de esta advertencia:

Desafortunadamente, puede que no descubras la verdadera fuente del problema hasta que no empieces a solucionarlo.

Con esto en mente, echemos un vistazo a algunos métodos que puedes usar para arreglar advertencias de contenido mixto.

Cómo Arreglar las Advertencias de Contenido Mixto (4 Pasos)

Puedes seguir los cuatro sencillos pasos siguientes para arreglar tus advertencias de contenido mixto de WordPress. Este proceso asume que ya has hecho lo siguiente:

Utilizaremos un sitio de desarrollo de ejemplo en los siguientes ejemplos.

Paso 1: Averiguar Qué Recursos Se Están Cargando A Través de HTTP

Lo primero que tendrás que hacer es averiguar qué recursos siguen cargándose por HTTP.

Recuerda que estas advertencias podrían estar sucediendo solo en ciertas áreas de tu sitio, no a nivel mundial. Navega a la página que está indicando la advertencia y lanza Chrome DevTools pulsando:

También puedes abrir Chrome DevTools desde el menú de herramientas de tu navegador:

Herramientas de desarrollo de Chrome en el menú de herramientas del navegador

Herramientas de desarrollo de Chrome en el menú de herramientas del navegador

Hay un par de lugares que puedes revisar para averiguar qué recursos no se están cargando por HTTPS.

La primera es la pestaña de la Consola. Ten en cuenta que es posible que tengas que actualizar la página después de abrir Chrome DevTools para que cargue todo correctamente.

Si hay errores de contenido mezclado, se resaltarán en rojo o amarillo. Típicamente, van acompañados de información que explica que «Esta petición ha sido bloqueada; el contenido debe ser servido a través de HTTPS». Esto significa que los ajustes del navegador están configurados para bloquear automáticamente cualquier contenido HTTP.

En un esfuerzo por asegurar que las páginas solo se carguen a través de HTTPS, Chrome comenzó a bloquear el contenido mixto por defecto con Chrome 79. Más recientemente, desarrollaron características para iniciar la auto-actualización de imágenes y medios mixtos.

Por lo tanto, al usar Chrome DevTools, puedes ver mensajes de contenido mixto que indican que algunos elementos solicitados se actualizaron automáticamente:

Chrome DevTools contenido mixto en la consola

Chrome DevTools contenido mixto en la consola

Aquí podemos ver claramente que hay una variedad de elementos inseguros que causan las advertencias de contenido mixto, incluyendo una hoja de estilo y un script.

También notarás que se hizo una solicitud para una imagen .jpg insegura, que se actualizó automáticamente a HTTPS. (Nota: Si esto ocurriese con otro navegador que no fuera Chrome, no se actualizaría automáticamente).

También puedes mirar en la pestaña de Seguridad de Chrome DevTools. Esto te mostrará cualquier origen no seguro:

Seguridad de Chrome DevTools

Seguridad de Chrome DevTools

En la pestaña Red, también puedes encontrar una lista de solicitudes bloqueadas:

Chrome DevTools Network

Chrome DevTools Network

Si no usas Chrome o solo quieres un resumen rápido de los errores, también puedes usar una herramienta gratuita como Why No Padlock.

Escanea una página individual y te muestra todos los recursos inseguros:

Por qué no hay un resumen de candado de errores de contenido mixto

Resumen de candado de errores de contenido mixto de  Why No Padlock

Esta herramienta es fácil de usar. Puedes simplemente introducir tu URL y hacer clic en Página de prueba, y te mostrará cualquier error que esté presente. Además, ¡es gratuito!

Comprobar las Advertencias HTTPS en Bloque

Si te preocupa el resto de tu sitio, tal vez quieras revisarlo en bloque. Aquí hay algunas opciones recomendadas para hacerlo:

El uso de cualquiera de las herramientas anteriores puede ayudarte a ahorrar el tiempo de tener que revisar manualmente cada página de tu sitio para detectar advertencias y errores de contenido mixto. Para una evaluación completa de los posibles errores en tu sitio, podrías considerar el uso de una combinación de estas soluciones.

Paso 2: Verificar Si los Recursos HTTP Son Accesibles A Través de HTTPS

El siguiente paso es confirmar que los recursos que se cargan a través de HTTP son accesibles a través de HTTPS. Lo más probable es que lo sean, solo tienes que actualizar los enlaces.

Como ejemplo, digamos que nuestros errores de contenido mixto apuntaban a la siguiente secuencia de comandos jQuery insegura e imagen .jpg:

Si tomamos ambos URLs, los introducimos en la barra de direcciones de nuestro navegador, y reemplazamos «http» por «https» al principio, podemos ver que se cargan bien. Por lo tanto, solo tenemos que hacer una búsqueda y reemplazarlo en nuestro sitio.

Paso 3: Efectuar una Búsqueda y Reemplazo de WordPress

Hay muchas maneras de efectuar una búsqueda y reemplazo de WordPress. En esta sección, te guiaremos a través de dos opciones diferentes recomendadas.

Si tienes curiosidad, no recomendamos usar una herramienta como Really Simple SSL. Aunque es un gran plugin, es mejor no confiar en una solución como esta a largo plazo. No volverás a migrar a HTTP más tarde, así que es mejor hacerlo de la manera correcta y actualizar las URLs HTTP en tu base de datos (como te mostraremos a continuación).

Si eres cliente de Kinsta, puedes usar nuestra herramienta de búsqueda y sustitución, que está disponible en el panel de control MyKinsta.

Ve a la página de Herramientas de tu sitio y haz clic en Buscar y Reemplazar:

La herramienta de Búsqueda y Reemplazo en MyKinsta

La herramienta de Búsqueda y Reemplazo en MyKinsta

A continuación, en el campo de búsqueda, introduce el valor que deseas buscar en la base de datos.

En este caso, usaremos nuestro dominio HTTP: http://kinstalife.com. Luego haz clic en el botón de búsqueda. La herramienta de búsqueda y reemplazo mostrará el número de ocurrencias para la cadena dada.

Selecciona la casilla Reemplazar para continuar con el proceso de reemplazo. En el campo Reemplazar con, introduce lo que debe reemplazar el valor que estás buscando. En este caso, usaremos nuestro dominio HTTPS: https://kinstalife.com.

También recomendamos dejar marcada la casilla Borrar caché cuando esté listo, para purgar automáticamente el caché de Kinsta después de que se complete el proceso de búsqueda y sustitución. Finalmente, haz clic en el botón Reemplazar:

HTTP a HTTPS buscar y reemplazar en MyKinsta

HTTP a HTTPS buscar y reemplazar en MyKinsta

Importante: Asegúrate de no incluir ningún espacio en blanco en ninguno de estos campos, ya que esto podría producir resultados indeseables.

Alternativas a Buscar y Reemplazar

Si no usas Kinsta, puedes realizar esta misma tarea con el plugin gratuito Better Search Replace, y luego simplemente eliminarlo cuando hayas terminado:

¿Cansado del soporte de hosting WordPress de un nivel inferior a 1 sin respuestas? Prueba nuestro equipo de soporte de primera clase! Consulta nuestros planes

La mejor búsqueda reemplaza al plugin de WordPress

Better Search Replace plugin de WordPress

Puedes descargar esta herramienta desde el directorio de plugins de WordPress, o buscándola en tu panel de control de WordPress.

Después de activarlo, solo tienes que buscar tu dominio HTTP (http://yourdomain.com) y reemplazarlo por tu dominio HTTPS (https://yourdomain.com):

Las mejores opciones de búsqueda reemplazan a los plugins de WordPress

Las mejores opciones de búsqueda reemplazan a los plugins de WordPress

Ten en cuenta que este plugin no ha sido probado con la última versión de WordPress.

Como alternativa, también podrías hacer una búsqueda y reemplazarla con la interconnect/it Search Replace DB PHP Script o WP-CLI.

Paso 4: Confirmar Que las Advertencias de Contenido Mixto Han Desaparecido

Cuando termines de hacer la búsqueda y el reemplazo, querrás volver a revisar tu sitio para confirmar que las advertencias de contenido mixto han desaparecido. Te recomendamos que visite tu sitio en el frontend y que hagas clic en algunas páginas mientras miras el indicador de estado del navegador en la barra de direcciones.

En nuestro sitio, podemos ver que la imagen . jpg está ahora arreglada, pero una advertencia de escritura insegura permanece.

Esto pasa porque hicimos una búsqueda y reemplazo de recursos cargados desde nuestro propio dominio. La advertencia de jQuery es causada por un script externo que tiene que ser actualizado manualmente:

Advertencia de contenido mixto en la consola

Advertencia de contenido mixto en la consola

En este caso, el script tuve que ser añadido manualmente a nuestro encabezado de WordPress (header.php). Debería estar usando una URL relativa, así que lo actualizamos a //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:

Script externo HTTP agregado al encabezado de WordPress en el Editor de Temas

Script externo HTTP agregado al encabezado de WordPress en el Editor de Temas

La búsqueda y el reemplazo probablemente arreglarán todos tus problemas.

En general, solo tendrás problemas adicionales si tienes algo codificado en tu sitio de WordPress.

Si crees que hay un script externo codificado en uno de tus plugins o temas, y tienes problemas para localizarlo, no dudes en contactar con el desarrollador correspondiente para que te ayude.

No Hay Ejemplos de Advertencias de Contenido Mixto

Así que ya sabes qué tienes que buscar para arreglar estos errores de contenido mixto.

Aquí tienes un ejemplo de lo que sucede en Chrome cuando todo se carga correctamente a través de HTTPS, sin advertencias de contenido mixto:

Advertencias sobre el contenido de cromo no mezclado

Advertencias sobre el contenido de Chrome no mezclado

Firefox mostrará un mensaje similar:

Firefox no tiene advertencias de contenido mixto

Firefox no tiene advertencias de contenido mixto

Y esto es lo que verás en Microsoft Edge:

Microsoft Edge no tiene advertencias de contenido mixto

Microsoft Edge no tiene advertencias de contenido mixto

Aunque la redacción del mensaje puede variar ligeramente según el navegador que utilices, deberías ver una notificación que indique una conexión segura. Si lo haces, sabrás que ya no se trata de errores de contenido mixto en tu sitio de WordPress.

¿Qué Pasa Con el HSTS?

Algunos de vosotros os preguntaréis por qué no podéis simplemente usar HSTS (HTTP Strict Transport Security) para arreglar este problema. HSTS fue creado como una forma de forzar al navegador a usar conexiones seguras cuando un sitio se ejecuta sobre HTTPS.

Es un encabezado de seguridad que puedes añadir a tu servidor web y se refleja en el encabezado de respuesta como «Seguridad de transporte estricto».

Sin embargo, el HSTS no es una solución rápida para todas las advertencias de contenido mixto. HSTS simplemente maneja redirecciones, mientras que la advertencia de contenido mixto es una característica del propio navegador. Tampoco tiene control sobre si los sitios de terceros habilitan el HSTS.

Por lo tanto, siempre tendrás que actualizar tus URLs de http://. Esa Jokinen se sumerge más profundamente en las razones por las que en esta discusión de Falla del Servidor.

Recomendaciones Adicionales (Casos Especiales)

Si estás usando el constructor de páginas de Elementor, también debes ir a la configuración de Elementor y actualizar la URL de tu sitio allí, para que los archivos CSS se regeneren con la nueva URL.

Una vez que lo hayas hecho, limpiar el caché debería resolver cualquier advertencia insegura debida a Elementor. Además, si estás usando el CDN de Kinsta, se recomienda purgar también la zona del CDN.

¿Listo para hacer el cambio a HTTPS, pero te frustran las advertencias de contenido mixto? 🥴 Aprende a resolver este problema con la ayuda de esta guía!Click to Tweet

Resumen

Las advertencias de contenido mixto pueden ser frustrantes de tratar, especialmente cuando hay un puñado de causas a las que se pueden atribuir. Afortunadamente, hay algunos pasos simples que se pueden tomar para solucionar estos problemas.

En la mayoría de los casos, una simple búsqueda y sustitución debería resolver rápidamente tus advertencias de contenido mixto y hacer que tu sitio vuelva a la normalidad en solo unos minutos. Si eso no lo arregla todo, es probable que queden uno o dos scripts codificados. Tendrás que encontrarlos y actualizarlos manualmente para eliminar este error o contratar a un desarrollador que pueda hacerlo por ti.

Si tienes algún comentario o te encuentras con algún problema, ¡háznoslo saber más abajo 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