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.
¿Prefieres ver la versión en vídeo?
¿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:
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:
El siguiente es un ejemplo de cómo se ve esta advertencia en Microsoft Edge:
Y así es como aparece en 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.
¿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:
- Acabas de añadir un nuevo servicio o plugin a tu sitio. En particular, los desarrolladores a veces usan rutas absolutas (http://yourdomain.com/style.css) en sus plugins o temas para enlazar con CSS y JavaScript, en lugar de usar rutas relativas (/style.css).
- Tus imágenes tienen URLs codificadas (como http://yourdomain.com/image.png) que se ejecutan sobre HTTP. Estas pueden estar dentro de posts, páginas o incluso widgets.
- Estás enlazando a versiones HTTP de scripts externos (alojados en jQuery, Font Awesome, etc.).
- Tienes incrustados scripts de vídeo que usan HTTP en lugar de HTTPS.
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:
- Has Instalado un certificado SSL
- Has redireccionado HTTP a HTTPS (en todo el sitio)
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:
- Windows: F12 o CTRL + Shift + I
- macOS : Cmd + Opt + I
También puedes abrir Chrome DevTools desde el menú de herramientas de tu 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:
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:
En la pestaña Red, también puedes encontrar una lista de solicitudes bloqueadas:
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:
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:
- Hay una pequeña herramienta gratuita llamada SSL Check de JitBit, que puedes usar para rastrear tu sitio HTTPS y buscar imágenes y scripts inseguros que desencadenarán un mensaje de advertencia en los navegadores. El número de páginas rastreadas está limitado a 400 por sitio web.
- La herramienta de auditoría del sitio de Ahrefs tiene la capacidad de detectar contenido mixto HTTPS/HTTP. Si ya tienes acceso a esta solución, o alguien de tu equipo de marketing lo tiene, puede ser una gran manera de ser minucioso.
- HTTPS Checker es un software de escritorio que puedes instalar para escanear tu sitio. Puede ayudarte a comprobar si hay advertencias y contenidos «no seguros» después de grandes cambios. Está disponible en Windows, Mac y Ubuntu. El plan gratuito te permite comprobar hasta 500 páginas por escaneo.
- SSL Insecure Content Fixer es un plugin de WordPress que puedes instalar en tu sitio para descubrir errores que lleven a advertencias de contenido mixto. Su uso es gratuito, e incluso realizará correcciones automáticamente para resolver los errores.
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:
- http://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.js
- http://example-site.com/wp-content/50d00acf6e4%2Fpuppy-thumb.jpg?v=1600261043278
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:
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:
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:
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):
Como alternativa, también podrías hacer una búsqueda y reemplazarla con la interconnect/it Search Replace DB PHP Script o WP-CLI.
Comprueba nuestro vídeo para saber más sobre el uso de buscar y reemplazar en WordPress:
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:
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:
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:
Firefox mostrará un mensaje similar:
Y esto es lo que verás en Microsoft Edge:
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.
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!
Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.
Deja una respuesta