Como indentificar y corregir errores de mixed content

20 de octubre, 2020 @ 11:10 — 0 comentariosDescargar PDF

En esta pequeña guía, te ayudaremos a identificar y corregir mediante el panel de hosting y SSH, el contenido mixto (mixed content) de nuestro sitio web.

1: ¿Qué es el mixed content?

El contenido mixto se refiere a una mezcla de recursos seguros (https) y no seguros (http) que se encuentran en una página web.

Cuando una página web que está usando el SSL correctamente intenta utilizar recursos (imágenes, CSS, etc.) que no son seguros, aparece un aviso en la barra del navegador indicándonos, que existe contenido mixto y que el sitio no es del todo seguro.

2: Consecuencias de usar contenido mixto

Tenemos muchas razones para evitar el contenido mixto (sobretodo en tiendas online) y una de la más obvia es que el contenido mixto significa que tu página web no es segura por lo que los datos del usuario no están seguros, de modo que esto hace que una página parezca poco profesional y hará que la gente se lo piense dos veces antes de confiar en tu sitio.

3: ¿Cómo sé si tengo errores de mixed content?

Los navegadores, por ejemplo Firefox y Chrome intentan proteger a sus usuarios de las páginas inseguras y lo hacen emitiendo advertencias, en el caso de mixed content, tan solo nos tendremos que fijar en el candado que tenemos justo alado de la barra de dirección web.

Las imágenes mostradas en esta guía corresponden al navegador Firefox, pero todos los navegadores usan iconos similares, por lo que no tendréis problemas en identificar los estados de los candados.

Si el candado aparece con una exclamación, significará que existe contenido mixto.

Si el candado aparece sin ninguna advertencia, significará que todo está correcto.

Si en el candado aparece con una raya roja, significara que nuestra web no tiene activado el HTTPS/SSL, de modo que ninguno de los "estados" anteriores será posible.

Para saber como activar el HTTPS/SSL, seguir la siguiente guía.

Como activar SSL en tu dominio

4: Como identificar los errores de mixed content

Si queremos obtener información sobre cuáles son los archivos que están ocasionando el mixed content, tendremos que abrir la Consola del navegador (Firefox) o las Herramientas para desarrolladores (Chrome) y localizar los errores de contenido mixto.

Para abrir la consola en Firefox, podemos usar el acceso rapido del teclado "Ctrl+Mayus+K" y para Chrome "Ctrl+Mayus+I".

En nuestro caso de ejemplo, la consola nos muestra que tenemos una imagen llamada "mixedcontent.jpg" que se está cargando desde "http://web.midominio123.com" vía http, por lo que se está ocasionando una mezcla de recursos seguros en nuestro sitio.

5: Como corregir errores de mixed content

En un principio, el contenido mixto se puede arreglar manualmente cambiando las URL's internas de nuestro sitio, este método es especialmente usado en sitios que están creados a mano, en cambio, con sitios creados con WordPress, podemos usar herramientas automatizadas que nos ayudaran en intentar corregir todas las URL's internas de golpe.

1: Hacer la conversión de URL's desde el panel de hosting

Seguir la siguiente guía en la cual se explica como forzar el HTTPS desde el panel de hosting.

Como pasar WordPress a HTTPS / SSL

Una vez pasada cada conversión de URL's, antes de probar en el navegador que ya no existe contenido mixto, recordar borrar la caché del navegador para que no muestre la versión cacheada

Verificamos que nuestro sitio ya no contenga contenido mixto, si no es el caso, tendremos que corregir los enlaces restantes desde SSH con el comando "wp-cli search-replace"

2: Hacer la conversión de URL's desde SSH

Lo primero que tendremos que hacer es entrar en nuestro hosting vía SSH, si no sabes como hacerlo, sigue el siguiente tutorial.

Como acceder vía SSH a tu cuenta

Una vez en SSH, usamos los siguientes comandos:

Nos situamos en la instalación de WordPress

1:

cd public_html

Nota: Si WordPress está instalado en un subdominio, tendremos que entrar en: sites/subdominio

2: Creamos una copia de la base de datos:

wp-cli db export

3: Mostramos cuál es la Home de nuestro WordPress:

wp-cli option get home

4: Usamos search-replace para hacer la conversión de las URL, y reemplazamos "home.com" por la URL que nos dio el comando "wp-cli option get home" y "nuevo.com" por la misma URL pero con https

wp-cli search-replace --all-tables 'http://home.com'  'https://nuevo.com'

Por ejemplo, si el comando "wp-cli option get home" nos dio la siguiente URL (http://www.midominio123.com) el comando de "wp-cli search-replace" sería el siguiente.

wp-cli search-replace --all-tables 'http://www.midominio123.com'  'https://www.midominio123.com'

5: Borrar la caché para asegurarnos que al acceder a la web no vemos la caché de WordPress.

wp-cli cache flush

Si sigue existiendo mixed content, intentar con los siguientes comandos.

wp-cli search-replace --all-tables 'http:/\/\home.com'  'https:/\/\nuevo.com'
wp-cli search-replace --all-tables --precise 'http://home.com'  'https://nuevo.com'
wp-cli search-replace --all-tables --recurse-objects 'http://home.com'  'https://nuevo.com'

Una vez pasada cada conversión de URL's, antes de probar en el navegador que ya no existe contenido mixto, recordar borrar la caché del navegador para que no muestre la versión cacheada