www, redirección 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 única dirección principal, enviar todas las variantes a 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), buscar y reemplazar en la base de datos, datos serializados

Cuatro direcciones, un sitio web

Su sitio web es accesible a través de cuatro direcciones:

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

Para un visitante esto no importa, pero para los buscadores son cuatro direcciones distintas con el mismo contenido. Las cookies (como su cookie de inicio de sesión) también valen por nombre: quien inicia sesión en www no ha iniciado sesión en el dominio sin www. Por eso se elige una única dirección canónica (la dirección principal) y se redirigen las otras tres a ella.

Cuál elija es cuestión de gustos (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.

Redirección 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 verdadera. Con una temporal, siguen recordando la dirección antigua.

Fíjese también en 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 a menudo:

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

Funciona, pero cuesta un paso adicional (más tiempo de espera, sobre todo en el móvil) y un intercambio TLS adicional. Peor aún es un bucle: el servidor web redirige a https, WordPress redirige de vuelta a http porque las direcciones de los ajustes siguen en http, y el navegador muestra "demasiadas redirecciones". En ese caso, dos ajustes se contradicen. 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 petición llega a WordPress, es decir, si el servidor web también dirige el nombre www a este sitio web.

Contenido mixto

El contenido mixto (mixed content) es una página https que carga elementos a través de http://: una imagen, una hoja de estilos, un script, una fuente o un vídeo incrustado. El navegador lo considera inseguro, porque esos elementos pueden modificarse por el camino.

• Los scripts, hojas de estilos e iframes por http son bloqueados por los navegadores. Su sitio web parecerá roto o alguna función no funcionará.
• Las imágenes, el audio y el vídeo por http los navegadores modernos intentan cargarlos automáticamente por https; si no lo consiguen, se bloquean. El candado puede entonces mostrar una advertencia.

De dónde procede:

1. Enlaces antiguos en su contenido: un sitio web que antes estaba en http tiene en miles de entradas <img src="http://example.com/wp-content/uploads/...">. WordPress guarda esos enlaces literalmente en la base de datos.
2. Ajustes del tema o de plugins con una dirección completa, por ejemplo un logotipo o un fondo con http://.
3. Elementos externos de otro sitio web que solo son accesibles por http. Debe sustituirlos o eliminarlos.
4. Direcciones en Ajustes > Generales que siguen en http (lección 3.1).

Cómo encontrarlo

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

Buscar y reemplazar, pero bien hecho

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. Su aspecto es este:

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

El s:27 significa: aquí sigue un texto de 27 caracteres. Tras un reemplazo sin más, el texto tiene 28 caracteres (se ha añadido una s), pero sigue poniendo 27. PHP ya no puede leer el valor y el ajuste desaparece sin avisar: un menú vacío, un logotipo que ya no está, widgets que se han esfumado.

Utilice una herramienta que actualice esas longitudes y haga siempre antes una copia de seguridad (lección 8.1): buscar y reemplazar no tiene papelera.

• WP-CLI: primero mirar, después actuar. En el terminal, vaya a la carpeta de su WordPress y ejecute primero la prueba (primera línea) y solo después la real (segunda línea).

wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid --dry-run
wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid

Con --dry-run ve cuántos reemplazos habría por tabla, sin modificar nada. --skip-columns=guid deja intactos los identificadores fijos de las entradas (columna guid); WordPress recomienda no cambiarlos nunca. Sin opciones adicionales, WP-CLI solo actúa sobre las tablas de WordPress. Si un plugin tiene tablas propias con el mismo prefijo, añada --all-tables-with-prefix. Use --all-tables solo si sabe por qué: afecta a todas las tablas de la base de datos, también a las de otro sitio web o aplicación.

• Un plugin de búsqueda y reemplazo que admita datos serializados (hay varios en el directorio de plugins de wordpress.org). Utilice también ahí primero el modo de prueba y elimine el plugin después.

No reemplace nunca algo como example.com sin http:// o https:// delante: afectaría también a direcciones de correo electrónico y otros textos. El procedimiento completo, también para quien no tiene terminal, está en el artículo de la base de conocimientos sobre buscar y reemplazar en la base de datos de WordPress (consulte Más información).

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

Como ejemplo utilizamos 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; si no, con una redirección mediante Redirecciones de sitios o .htaccess).
3. Compruebe la cadena con el ejercicio de abajo o con las herramientas para desarrolladores de su navegador (pestaña Red, casilla "Conservar registro").

Resumen

• Elija una única dirección canónica y haga que las otras tres variantes vayan a ella con un 301 (o 308), en un solo paso.
• Deje que solo una parte redirija a https; de lo contrario, se produce un bucle.
• El contenido mixto es una página https que carga elementos por http; la consola del navegador muestra cuáles.
• Los enlaces antiguos de la base de datos se reemplazan con wp search-replace o con un plugin que entienda los datos serializados, nunca con un simple REPLACE de SQL.
• Siempre primero una copia de seguridad y primero una prueba (--dry-run); deje intacta la columna guid y limítese a las tablas de WordPress.

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. Es correcto si las cuatro llegan a 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 por http://.

Más información

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
• Buscar y reemplazar en la base de datos de WordPress
• 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/