www, redirecciones y contenido mixto

Módulo 3: Dirección, https y usuarios · Tiempo de lectura: 9 minutos

Objetivo de aprendizaje: Después de esta lección podrá elegir una dirección principal, redirigir todas las variantes hacia ella con una sola redirección, y detectar y resolver el contenido mixto.

Conceptos clave: dirección canónica, 301 y 308, cadena de redirecciones, contenido mixto (mixed content), búsqueda y reemplazo en la base de datos, datos serializados

Cuatro direcciones, un solo sitio

Su sitio se puede visitar mediante cuatro direcciones:

http://example.com
http://www.example.com
https://example.com
https://www.example.com

Para un visitante esto no supone ninguna diferencia, pero para los buscadores son cuatro direcciones distintas con el mismo contenido. Además, las cookies (como la cookie de inicio de sesión) son válidas por nombre: quien inicia sesión en www no está conectado en el dominio sin www. Por eso debe elegir una dirección canónica (la dirección principal) y redirigir las otras tres hacia ella.

Cuál elija es una cuestión de preferencia (lección 2.1). Lo importante es que la dirección principal sea la misma en todas partes: en el DNS, en el certificado, en Ajustes > Generales (lección 3.1) y en las redirecciones.

Redirigir con un 301, en un solo paso

Una redirección es una respuesta del servidor: "esta página está en otro lugar". El navegador va entonces automáticamente a la nueva dirección. El código indica qué tipo de redirección es:

Una redirección permanente indica a los buscadores que la nueva dirección es la definitiva. Con una redirección temporal, seguirán recordando la dirección antigua.

Preste también atención a la cadena. Supongamos que su dirección principal es https://example.com. Entonces lo que quiere es:

http://www.example.com   301  https://example.com/
http://example.com       301  https://example.com/
https://www.example.com  301  https://example.com/
https://example.com      200

Cada variante llega a la dirección principal en un solo paso. Lo que ocurre con frecuencia es esto:

http://www.example.com   301  https://www.example.com/
https://www.example.com  301  https://example.com/

Eso funciona, pero cuesta un paso adicional (más tiempo de espera, sobre todo en móvil) y un apretón de manos TLS extra. Peor aún es un bucle: el servidor web redirige a https, WordPress redirige de vuelta a http porque las direcciones en los ajustes siguen en http, y el navegador muestra "demasiadas redirecciones". En ese caso, dos ajustes se contradicen entre sí. Asegúrese de que solo una parte redirija a https (el servidor web o el panel), y de que las direcciones en WordPress ya estén en la dirección principal.

WordPress también redirige por sí mismo: si alguien solicita https://www.example.com/contact/ mientras la dirección del sitio es https://example.com, WordPress redirige a https://example.com/contact/. Esto solo funciona si la solicitud llega a WordPress, es decir, si el servidor web también hace que el nombre www apunte a este sitio.

Contenido mixto

El contenido mixto (mixed content) es una página https que carga elementos mediante http://: una imagen, una hoja de estilos, un script, una fuente o un vídeo incrustado. El navegador considera esto inseguro, porque esos elementos pueden modificarse durante el trayecto.

• Scripts, hojas de estilos e iframes cargados mediante http son bloqueados por los navegadores. Su sitio puede entonces verse mal o una función puede dejar de funcionar.
• Imágenes, audio y vídeo cargados mediante http son recuperados automáticamente mediante https por los navegadores modernos si es posible; si no lo consiguen, se bloquean. El candado puede entonces mostrar una advertencia.

De dónde viene:

1. Enlaces antiguos en su contenido: un sitio que antes funcionaba en http tiene en miles de entradas algo como <img src="http://example.com/wp-content/uploads/...">. WordPress guarda esos enlaces de forma literal en la base de datos.
2. Ajustes del tema o de un plugin con una dirección completa, por ejemplo un logotipo o un fondo con http://.
3. Elementos externos de otro sitio que solo son accesibles mediante http. Esos hay que sustituirlos o eliminarlos.
4. Direcciones en Ajustes > Generales que todavía están en http (lección 3.1).

Cómo encontrarlo

Abra la página, pulse F12 y mire en la pestaña Consola. El navegador le indicará cada contenido mixto junto con la dirección del elemento. O busque en el código fuente de la página (Ctrl+U) src="http:// y href="http://. Los enlaces hacia otros sitios en texto normal (<a href="http://...">) no generan contenido mixto; se trata de elementos que la página carga.

Buscar y reemplazar, pero bien

La solución para los enlaces antiguos en su contenido es sustituir todos los http://example.com de la base de datos por https://example.com. La tentación es usar una instrucción SQL como:

UPDATE wp_options SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com');

No lo haga. Muchos ajustes de temas, plugins y widgets se guardan serializados. Esto tiene el siguiente aspecto:

s:27:"http://example.com/logo.png";

El s:27 significa: a continuación viene un texto de 27 caracteres. Después de un reemplazo simple, el texto pasa a tener 28 caracteres (se añadió una s), pero sigue indicando 27. PHP ya no puede leer entonces el valor y el ajuste desaparece silenciosamente: un menú vacío, un logotipo desaparecido, widgets que se esfuman.

Utilice una herramienta que actualice esas longitudes:

• WP-CLI: primero compruebe, luego aplique.

wp search-replace 'http://example.com' 'https://example.com' --all-tables --dry-run
wp search-replace 'http://example.com' 'https://example.com' --all-tables

Con --dry-run verá cuántos reemplazos habría por tabla, sin modificar nada.

• Un plugin de búsqueda y reemplazo que admita datos serializados (hay varios en el directorio de plugins de wordpress.org). Elimine el plugin después.

Haga siempre primero una copia de seguridad (lección 8.1). Nunca reemplace tampoco algo como example.com sin el http:// delante: así afectaría también a direcciones de correo electrónico y otros textos.

En la práctica: así se ve en un panel

Como ejemplo usamos DirectAdmin. Otros paneles tienen un interruptor similar para "siempre https".

1. Active Forzar SSL con redirección https en los ajustes del dominio (lección 3.1).
2. Elija en el dominio si www debe ir al dominio sin www o al revés (en DirectAdmin en los ajustes del dominio; en otros casos con una redirección mediante Redirecciones de sitios o .htaccess).
3. Compruebe la cadena con el ejercicio a continuación o con las herramientas de desarrollo de su navegador (pestaña Red, casilla "Conservar registro").

Resumen

• Elija una dirección canónica y haga que las otras tres variantes vayan hacia ella con un 301 (o 308), en un solo paso.
• Haga que solo una parte redirija a https; de lo contrario obtendrá un bucle.
• El contenido mixto es una página https que carga elementos mediante http; la consola del navegador muestra cuáles.
• Los enlaces antiguos en la base de datos se sustituyen con wp search-replace o un plugin que entienda los datos serializados, nunca con un REPLACE de SQL sin más.
• Siempre primero una copia de seguridad, y primero una ronda de prueba.

Cuestionario

Ejercicio

Ejercicio A3.2: Una única dirección principal y sin contenido mixto. Introduzca su dominio. El programa abre las cuatro variantes (http y https, con y sin www) y sigue las redirecciones. Lo correcto es: las cuatro terminan en la misma dirección con https, con como máximo una redirección por variante y solo códigos permanentes (301 o 308). A continuación, el programa lee el HTML de la página de inicio y busca scripts, hojas de estilos, imágenes, iframes y fuentes que se carguen mediante http://.

Para saber más

Estos artículos describen los pasos en los paneles de WebOké; en otros paneles funcionan de forma similar.

• Manual de DirectAdmin 6.4: Enviar siempre a los visitantes a https
• Manual de DirectAdmin 4.7: Redirecciones de sitios: redirigir un dominio o una página
• Redirigir obligatoriamente a los visitantes a https
• Curso gratuito de DNS 3.4: www, redirecciones y lo que el DNS no hace
• Contenido mixto (MDN, en inglés): https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
• wp search-replace (developer.wordpress.org, en inglés): https://developer.wordpress.org/cli/commands/search-replace/