Cómo Solucionar Alerta de Contenido Mixto desde .htaccess

Cómo Solucionar Alerta Contenido Mixto desde .htaccess

Los certificados de seguridad SSL ya son algo muy común en cualquier sitio web que visites.

Los certificados SSL sirven para cifrar las comunicaciones entre el cliente y el servidor, de esta forma, si hay un tercero que intercepta la comunicación, no será capaz de verla ya que todo lo que vea estará cifrado.

Por ejemplo, si pones tu nombre de usuario y contraseña en un sitio web que carga con http://… y esta comunicación es interceptada, se podrán ver las credenciales sin mayores problemas.

En cambio, si se hace a través de una conexión https://…,solo verán código cifrado, ya que los sistema de cifrado son muy buenos y se necesitaría un ordenador muy potente, usándolo durante mucho tiempo, incluso años, antes de poder descifrar los datos.

Además, los navegadores web ya indican que un sitio es «No Seguro» si se entra a una web por http://…

contenido mixto sitio no seguro - SSL

Para poder cargar el contenido por https://… se necesita tener emitido un certificado de seguridad, ya que si se intenta cargar una web sin certificado SSL emitido, los navegadores web nos mostrarán una alerta bastante llamativa avisándote.

contenido mixto alerta navegador - Alerta SSL

Emitir un certificado SSL gratuito en Hostinet es muy sencillo, gracias a la herramienta que puedes encontrar en cPanel, puedes emitir certificados de Let’s Encrypt gratis a dominios y subdominios. sin mayores problemas.

Una vez emitido el certificado SSL, faltaría hacer algunos cambios en el sitio web para que el tráfico que nos entre por http://…, sea redirigido a https://… y los navegadores indiquen al visitante que está en un sitio seguro.

Ahora bien, a veces los navegadores nos dicen que el sitio no es completamente seguro y normalmente, estas alertas hacen referencia a las imágenes.

Así lo muestra Firefox:

contenido mixto alerta firefox

Y así lo muestra Chrome:

contenido mixto alerta chrome

Esto no significa que el certificado no esté emitido o no esté cargando por https://…, de hecho, si nos fijamos veremos que el navegador nos indica que el certificado es válido y todo está correcto.

contenido mixto certificado valido

Estas alertas vienen dadas por el temido «Contenido Mixto», que nos son otra cosa que elementos de la web, como las imágenes, que están cargando por http://…, en lugar de por https://…..

De esto ya hemos hablado y usando el navegador Chrome, es relativamente fácil identificar estos elementos de contenido mixto.

Y aunque el certificado SSL esté funcionando y la conexión esté cifrada, estos mensajes no dejan de ser preocupantes para el visitante y es normal que queramos solucionarlo.

¡Vamos a ver cómo hacerlo!


Tenemos diferentes tipos de hosting, selecciona uno:


Eliminar el Contenido Mixto desde el Archivo .htaccess

Identificar y corregir el contenido mixto es más o menos sencillo.

Si estás usando un gestor de contenidos como WordPress, puedes hacerlo usando un plugin cómo Really Simple SSL, pero si es una web «creada a medida», puede ser un trabajo muy tedioso.

Es decir, puedes añadir un código en el archivo .htaccess para hacer que todo el tráfico vaya a https://… y escribimos un articulo de cómo hacer esto hace tiempo.

Pero es posible que alguna imagen rebelde no haga caso a esta redirección, por ejemplo, porque esté alojada en otra parte del hosting o al desarrollar la web se realizó de esta forma.

Si tienes pocos elementos y ya los has localizado, puedes acceder al archivo y modificarlo a mano, simplemente añadiendo una «s» a cualquier http://… que veamos o hayamos localizado.

El problema es que podemos tener cientos de estos elementos de contenido mixto y hacerlo a mano puede ser más que tedioso.

Para solucionar esto, podemos añadir un pequeño código al archivo .htaccess que solucionará la mayoría de los avisos de código mixto que tengamos.

Caso Práctico Solución Contenido Mixto desde .htaccess

Para que veas cómo funciona esto, hemos creado un index.html con una imagen que está cargando como contenido mixto en una web con certificado SSL instalado y funcionando.

Si cargamos la URL en Chrome y vamos a Más Herramientas > Herramientas para desarrolladores.

chrome herramientas desarrolladores

Podrás ver que nos indica cuál es contenido mixto, en este caso una imagen llamada logo.png.

ejemplo imagen contenido mixto

Como hemos dicho antes, podemos editar el archivo HTML y modificar la URL de la imagen a mano, pero vamos a ver cómo hacerlo desde el archivo .htaccess.

Para esto acederemos desde el Administrador de Archivos de cPanel o por FTP, pero es más que recomendable que hagas una copia de seguridad de archivo .htaccess antes de tocar nada.

ADVERTENCIA: Es muy recomendable hacer una copia de seguridad del archivo .htaccess antes de modificar nada.

En el archivo .htaccess de la web de prueba, podemos ver el código para redirigir el tráfico hacia https://…, el cuál funciona correctamente.

contenido mixto codigo htaccess

A continuación, vamos a poner el siguiente código:

<ifModule mod_headers.c>
Header always set Content-Security-Policy "upgrade-insecure-requests;"
</IfModule> 

Por lo que el archivo .htaccess quedaría algo así:

contenido mixto codigo htaccess mejorado

Y por último, no tenemos que olvidarnos de guardar los cambios.

Una vez cambiados, sólo tenemos que ir a la web y recargar la página para comprobar que todo ha salido bien.

Es posible que vuestro navegador haya guardado en su caché la web anterior, así que es posible que tengas que vaciar la caché del navegador o quizás probar con otro navegador antes de volverte loco pensando que no ha funcionado.

contenido mixto solucionado

Hosting SSD con SSL Gratis

En Hostinet, podemos ofrecerte el hosting web que se adapte a tus necesidades.

Cada hosting puede variar en los recursos que tengan disponibles, pero todos los alojamientos web que ofrecemos en Hostinet, disponen de Certificados SSL Gratuitos para que puedas emitirlos en tus dominios y subdominios sin problemas.