Cómo corregir el contenido mixto en WordPress

Activas un certificado SSL en tu web pensando que el navegador la va a mostrar como segura, pero… ¡Sorpresa! Se sigue mostrando una advertencia de seguridad, tu WordPress tiene contenido mixto.

Pero, ¿qué es eso del contenido mixto? ¿Por qué se genera este error si mi web ya funciona con HTTPS? ¿Es culpa del certificado?

Es normal que si es la primera vez que te ocurre esto te vengan mil preguntas a la cabeza, pero no te preocupes. En este artículo voy a explicarte con detalle qué es el contenido mixto, cómo identificarlo y, por supuesto, cómo corregirlo para que tu web en WordPress se muestre como SEGURA (sí, con mayúsculas).

¡Vamos a ello!

¿Qué es el contenido mixto?

El contenido mixto se produce cuando una web con HTTPS carga parcialmente contenido con HTTP. Es decir, la página solamente está parcialmente encriptada, por lo que no es del todo segura. De hecho, en función del navegador que utilizas, tus clientes recibirán una advertencia en la que se indica que la conexión no es cifrada.

En otras palabras, es una web que, pese a tener un certificado SSL, no tiene todo el contenido cifrado con HTTPS. Parece una web segura, pero no lo es.

No sé si hace falta recordar la importancia de que una página web tenga todas sus conexiones cifradas con SSL, pero por si acaso lo voy a hacer.

Las páginas que todavía trabajan con HTTP son vulnerables a que cualquier usuario malintencionado pueda interceptar la información que se transmite entre servidor y navegador web. Es decir, los datos no viajan cifrados y la información que se envía no está protegida.

En cambio, cuando activas un SSL y tienes tu web trabajando con HTTPS toda la información que se transmite está a salvo. ¿El resultado? Más seguridad para tu negocio, pero también para tus clientes. Te recomiendo que le eches un ojo a este artículo en el que te explico de forma más exhaustiva la diferencia entre HTTP y HTTPS.

Por tanto, podríamos decir que una web con contenido mixto es una página que se encuentra a medio camino. Aunque la solicitud inicial se hace con HTTPS, una parte del contenido se carga con HTTP.

Eso sí, es importante distinguir dos tipos de contenido mixto: contenido mixto activo y contenido mixto pasivo. Veamos en qué consiste cada uno de ellos.

Contenido mixto activo

El contenido mixto activo se refiere al contenido que interactúa con la página, ya que tiene acceso a todo o parte del modelo de documentos de la página HTTPS. Esto hace posible que cualquier atacante pueda alterar el comportamiento de la web, introducir código malicioso, robar información confidencial (contraseñas, datos de pago, etc.) o tomar el control total del sitio.

Estas son algunas de las solicitudes HTTP que se consideran contenido mixto activo:

• <script> (src attribute)
• <link> (href attribute) (this includes CSS stylesheets)
• <iframe> (src attribute)
• XMLHttpRequest requests
• etch() requests
• Todos los casos en CSS cuando una url() utiliza el valor (@font-face, cursor, background-image, etc.).
• <object> (data attribute)
• Navigator.sendBeacon (url attribute)

Debido a la peligrosidad de la presencia de contenido mixto activo en una web, todos los navegadores suelen bloquearlo para proteger a los usuarios.

Contenido mixto pasivo

El contenido mixto pasivo se refiere al contenido de una web que se carga mediante HTTP en una página web HTTPS. Este tipo de contenido no interactúa con el resto de la página y se considera mucho menos problemático que el contenido mixto activo.

Estos son los tipos de solicitudes HTTP que se consideran contenido pasivo:

• <img> (attribute src)
• <audio> (attribute src)
• <video> (attribute src)
• <objeto> subrecursos (cuando un <objeto> realiza solicitudes HTTP)

En este tipo de casos un atacante podría interceptar las peticiones HTTP como, por ejemplo, un vídeo, y eliminarlo o reemplazarlo con contenido inapropiado o malintencionado, pero no puede alterar otras partes de la página web.

No todos los navegadores se comportan igual ante la presencia de contenido mixto pasivo en una web. Para el mismo dominio, Google Chrome actualiza automáticamente este contenido para que cargue bajo HTTPS y, en caso de no poder hacerlo, no muestra el archivo.

Firefox, en cambio, sí muestra todo el contenido, pero advierte que parte de él no es seguro.

Por otra parte, Microsoft Edge muestra la página como no segura e indica el motivo, pero carga todo el tipo de contenido.

Contenido mixto en WordPress

Aunque no es uno de los errores más comunes de WordPress, en algunos casos, tras activar el SSL en WordPress, la web muestra un mensaje de advertencia indicando que parte del contenido no es seguro.

Pero, ¿por qué ocurre esto? Hay muchas razones por las que se genera el problema de contenido mixto en WordPress, aunque estas son algunas de las causas más habituales que nos solemos encontrar en soporte:

• La redirección 301 de HTTP a HTTPS no está establecida correctamente y algunos elementos no cargan bajo el protocolo seguro.
• Acabas de instalar un plugin en WordPress que utiliza rutas absolutas del tipo http://tudominio.com/style.css en vez de rutas relativas como /style.css.
• Estás utilizando un recurso o herramienta externa que carga con una ruta http://, en lugar de https://.
• Las imágenes que subes a WordPress o las que muestran los widgets cargan a través de una URL del tipo http://tudominio.com/wp-content/uploads/imagen.jpg, en vez de https://tudominio.com/wp-content/uploads/imagen.jpg.

Ahora toca pasar a la parte práctica, así que veamos cómo corregir el contenido mixto en WordPress.

Cómo corregir el contenido mixto en WordPress

Para corregir el contenido mixto de WordPress te recomendamos que utilices el plugin Really Simple SSL, así puedes forzar tu web para que todas las URLs con HTTP carguen con HTTPS.

¿Vemos cómo se hace?

¡Importante! Siempre que vayas a hacer cualquier cambio en tu web, asegúrate de tener una copia de seguridad completa de tu sitio. Recuerda que, si tienes tu Hosting WordPress SSD con nosotros, desde tu área de cliente tienes acceso a Premium Backup. Una herramienta que realiza dos copias de seguridad al día del contenido de tu sitio y te permite realizar cualquier instalación en solo unos clics. ¡Así siempre estás a salvo!

Recuerda también que, a partir de WordPress 5.7, ya es posible realizar el cambio de HTTP a HTTPS en solo un par de clics. Así evitas cualquier problema de contenido mixto u otros errores relacionados con la seguridad SSL de tu web.

1º. Instala el plugin Really Simple SSL en WordPress

Lo primero que tienes que hacer es acceder a WordPress y, en el menú lateral, ve a la sección «Plugins» → «Añadir nuevo».

En el buscador escribe «Really Simple SSL» y pulsa sobre «Instalar» → «Activar».

2º. Habilita la seguridad SSL

En la sección «Ajustes» del backend de tu web pulsa sobre «SSL». Ahí verás un aviso en grande que te permite activar el SSL y corregir los problemas de contenido mixto en WordPress.

3º. Activa la redirección 301 por .htaccess

La redirección de las URLs con http:// a https:// con el plugin Really Simple SSL se hacen a través de PHP, pero te da la opción de activarla por .htaccess para que sea más rápida y eficiente.

¡Listo! Con la activación de Really Simple SSL ya deberías tener corregido el contenido mixto en WordPress. Si no es así, o si ya tenías este plugin instalado en WordPress, es posible que el contenido mixto se deba a URLs externas a tu web.

Mi web todavía muestra contenido mixto, ¿qué hago?

Si ya has activado Really Simple SSL, pero el navegador sigue mostrando tu web con contenido mixto, lo mejor es identificar qué recursos están originando el problema y reemplazarlos.

A continuación te explico paso a paso cómo se hace.

1º. Identifica los recursos que originan el contenido mixto en tu web

Uno de los mejores métodos para identificar el contenido mixto en WordPress es a través del inspector de elementos. Para ello, abre tu web con el navegador y pulsa la tecla F12 (también puedes acceder a través de las herramientas para desarrolladores de tu navegador). Ve a la pestaña «Red» y pulsa sobre el botón «Recargar».

En la fila Estado, Método, Dominio, Archivo, etc., pulsa con el botón derecho del ratón y selecciona la opción «Esquema».

De esta forma se creará una nueva columna llamada «Esquema» que tienes que ordenar de forma ascendente. Así se mostrarán primero los recursos que están cargando con HTTP, tal y como te muestro en este ejemplo:

2º. Reemplaza el recurso por uno con HTTPS

Una vez localizados los elementos que están cargando con http://, tienes que reemplazarlos.

Si se trata de un recurso externo a tu web, asegúrate de sustituirlo con uno que funcione con HTTPS. En cambio, si se trata de una imagen o un vídeo interno, podrás realizar el reemplazo desde el propio escritorio de WordPress, eliminando y subiendo el nuevo archivo.

Alternativa: Modifica el .htaccess de WordPress

Otra opción para corregir los problemas de contenido mixto en WordPress es modificando el .htaccess añadiendo la siguiente línea de código al inicio del fichero (ojo, antes de hacer cualquier cambio, asegúrate de tener una copia de seguridad):

Header always set Content-Security-Policy "upgrade-insecure-requests;"

Esta línea le dirá al navegador que debe hacer las peticiones de todos los recursos a las versiones con https://.

En el caso de que un recurso se esté intentando cargar con http:// y el servidor no tenga un certificado instalado, dicho elemento no se cargará.

Estas líneas funcionan en todos los navegadores (Chrome, Firefox, Safari, Opera, Edge…), pero no en Internet Explorer. Esto no quiere decir que tu web vaya a dar un error o deje de funcionar, solamente que el navegador seguirá indicando a tus visitas que tu web tiene contenido mixto.

Ten en cuenta que a partir del 17 de agosto de 2021 este navegador dejará de dar soporte por lo que su final está muy cerca. Tanto es así que hace unos meses Microsoft ya está forzando a usuarios y empresas a utilizar Microsoft Edge.

Conclusión

¿Después de activar el SSL en tu WordPress el navegador muestra un aviso de contenido mixto? No te preocupes, la solución es muy sencilla.

Normalmente, instalando y activando el plugin Really Simple SSL el problema se corrige de raíz. Si no es así, lo mejor es localizar el recurso que está cargando con http:// a través del inspector de elementos de tu navegador y reemplazarlo por uno con https://, o bien modificando el fichero .htaccess. Eso sí, elijas el método que elijas, asegúrate siempre de tener a mano una copia de seguridad de tu sitio.

Ahora dime, ¿has podido corregir el contenido mixto en WordPress? ¿Qué opción has elegido? Por cierto, cualquier duda, déjame un comentario e intento echarte una mano 🙂 .