Cargando style.css y jQuery usando HTTPS

2 jul 2013, 03:55:18
Vistas: 25K
Votos: 4

Tenemos varios entornos y acabamos de empezar a usar WordPress (Dev, QA, Pre-prod, prod, etc...). No tenemos HTTPS habilitado en los entornos inferiores y todo funciona sin problemas. En nuestros entornos de producción, el sitio redirige todo el tráfico a HTTPS.

El primer problema parece ser solo con Chrome. Chrome se niega a cargar cualquier elemento en la página que no sea HTTPS. No estoy seguro de cómo hacer que WordPress cargue jQuery o styles.css (desde mi tema) a través de HTTPS (más información a continuación).

El segundo problema, también con HTTPS, es que no podemos iniciar sesión en WordPress en los entornos que usan HTTPS. Cuando se carga la pantalla de inicio de sesión (sitename.com/wp-admin), te redirige a wp-login como se espera, pero al ingresar tu nombre de usuario/contraseña, la página simplemente se actualiza. No hay errores (revisé la consola/firebug y httpfox y no pude encontrar ningún error).

Sé que estamos haciendo algo mal con HTTPS en general porque estamos teniendo muchos problemas en los entornos que lo soportan. He estado buscando mucho en Google y sorprendentemente no he encontrado mucho sobre el uso de HTTPS y WordPress. Además de las respuestas a las preguntas sobre cómo cargar jQuery a través de HTTPS y cómo podemos iniciar sesión en las instancias de WordPress con HTTPS, ¿hay buenos enlaces sobre cómo trabajar con HTTPS en WordPress? Casi todo lo que he encontrado apunta a usar el plugin WordPress HTTPS y vamos a probarlo, pero no estoy seguro si resolverá todos nuestros problemas.

Nota* En mi functions.php estoy usando Enqueue para cargar archivos JS y CSS de la manera correcta, y estoy usando rutas relativas en esas cargas //sitename.com/bla/bla que funcionan bien. Estoy cargando jQuery en mi header.php y styles.css se carga automáticamente como parte de la carga de mi tema, así que no sé cómo configurar ninguno para cargar a través de HTTPS o si ese es incluso el enfoque correcto para solucionar estos problemas. (jQuery se está cargando desde nuestro sistema de archivos local, no desde un CDN). Cualquier ayuda sería muy apreciada. Gracias de antemano.

3
Comentarios

¿Tu sitio de producción está detrás de un proxy inverso/balanceador de carga? Eso impedirá que WordPress detecte SSL, y ningún script se cargará mediante SSL. Si no estás seguro, instala el SSL Insecure Content Fixer y ejecuta la prueba is_ssl() desde la página de plugins.

webaware webaware
3 jul 2013 03:24:26

Nuestro sitio definitivamente está detrás de un balanceador de carga. He trabajado antes en un sitio WP detrás de un balanceador de carga con HTTPS habilitado y no tuve estos problemas (pero contaba con algunos expertos en redes que probablemente resolvieron estos problemas por mí). Entonces, ¿qué podemos hacer para que WordPress detecte SSL detrás del balanceador de carga?

RAC RAC
3 jul 2013 20:56:08

Tampoco puedo cargar plugins en estos entornos problemáticos porque NO PUEDO INICIAR SESIÓN EN WORDPRESS. Así que, lamentablemente, todas las soluciones que implican cargar un plugin no van a ayudar.

RAC RAC
3 jul 2013 21:03:13
Todas las respuestas a la pregunta 4
2

Dado que estás detrás de un balanceador de carga (confirmado en tus comentarios anteriores), tu instalación de WordPress no podrá detectar SSL usando la función is_ssl(), y no servirá ningún script o hoja de estilos encolados con URIs de protocolo https:.

Si estás detrás de un balanceador de carga que soporte la variable del servidor HTTP_X_FORWARDED_PROTO, puedes solucionar tu problema añadiendo este fragmento a tu archivo wp-config.php:

// Amazon AWS Elastic Load Balancer, CloudFlare, y algunos otros
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
    $_SERVER['HTTPS']='on';

Si tienes la mala suerte de estar alojado en Network Solutions, primero golpea tu cabeza contra el escritorio, luego intenta incorporar este gist en un plugin ya activado (ya que no puedes activar nuevos plugins porque no puedes iniciar sesión en el admin): https://gist.github.com/webaware/4688802

En realidad, deberías poder forzar tu admin para no usar SSL, iniciar sesión, instalar los plugins que necesites, y luego probar tu instalación sobre SSL para ver si todo funciona, antes de forzarla a usar SSL. Añade esto a tu archivo wp-config.php, cambiando WP_SITEURL y WP_HOME para que coincidan con tu servidor real.

define('FORCE_SSL_LOGIN', false);
define('FORCE_SSL_ADMIN', false);
define('WP_SITEURL', 'http://example.com/');
define('WP_HOME', 'http://example.com/');
4 jul 2013 02:20:29
Comentarios

¡Gracias por esto! Me sorprende un poco que esto no venga incorporado por defecto.

Noz Noz
23 nov 2015 20:41:31

¡Gracias por esta respuesta! La actualización de wp-config.php funciona bien cuando configuro HTTPS usando AWS ELB.

Leon Leon
10 ago 2018 08:09:02
5

La mayoría de los problemas de SSL se deben a plugins/temas que utilizan código incorrecto para cargar CSS/JS.

  • En los Ajustes Generales de WordPress, cambia la Dirección de WordPress (URL) y la Dirección del sitio (URL) de HTTP a HTTPS. Si no tienes acceso a tu administrador, puedes cambiar esto a través de tu archivo wp-config.php http://codex.wordpress.org/Editing_wp-config.php

  • Utiliza las rutas URL correctas para tus temas y plugins: http://codex.wordpress.org/Determining_Plugin_and_Content_Directories Por ejemplo, codificar manualmente WP_PLUGIN_URL no funcionará, a diferencia de plugin_dir_url. Las funciones generalmente son compatibles con SSL porque tienen tiempo para verificar si el sitio tiene SSL habilitado, mientras que las constantes no.

  • Para el administrador/inicio de sesión, puedes forzar SSL a través del archivo wp-config.php:

    Inicio de sesión: define('FORCE_SSL_LOGIN', true);

    Administrador: define('FORCE_SSL_ADMIN', true);

Por supuesto, cualquier recurso codificado manualmente será un problema, al igual que los plugins/temas que cargan recursos incorrectamente.

También puedes actualizar tus temas y plugins a través de SSL si tu servidor tiene libssh2, además puedes definir el puerto# y las claves de autenticación. Si esto está habilitado, no necesitas definir nada, simplemente aparecerá mágicamente en los ajustes del administrador.

2 jul 2013 04:15:16
Comentarios

Gracias por la respuesta. Yo construí los plugins que usamos y todos cargan css y js de la manera correcta. Sin embargo, mi primera pregunta sigue sin respuesta. WordPress está cargando jquery y styles.css en mi página de inicio y lo está haciendo a través de HTTP. Chrome está bloqueando ambas cargas esenciales. ¿Hay alguna manera de forzar a WordPress a cargar los recursos en https?

RAC RAC
2 jul 2013 19:39:57

También mencionaste libssh2. ¿Dónde está configurado esto? Busqué en httpd.conf de Apache sin resultados. ¿Es un módulo de PHP?

RAC RAC
2 jul 2013 19:58:44

libssh2 es una biblioteca SSH para tu sistema operativo, por lo que la instalarías a nivel del sistema operativo, luego PHP puede usarla con algo como http://pecl.php.net/package/ssh2 que es una extensión de PHP. ¿Hiciste el paso #1? Si es así, entonces ningún recurso debería cargarse vía HTTP a menos que sea por un tema o plugin que lo esté haciendo mal.

Wyck Wyck
2 jul 2013 21:14:20

No puedo hacer el primer paso porque no puedo iniciar sesión en WordPress.

RAC RAC
3 jul 2013 00:52:21

Puedes definir esta configuración en tu archivo wp-config.php, http://codex.wordpress.org/Editing_wp-config.php#WordPress_address_.28URL.29

Wyck Wyck
3 jul 2013 03:00:59
1

¡Vale! A mí también me ha pasado antes. Asegúrate de cargar correctamente tu archivo de jQuery y luego verifica dos veces el archivo JavaScript del plugin del que depende. WordPress tiene varias formas de cargar archivos JS. Vuelve a comprobar que no se cargue el archivo jQuery predeterminado de WordPress junto con tu versión personalizada de jQuery. Para tu problema de HTTP, por favor lee html5boilerplate.com, ellos usan métodos más inteligentes para HTTP. No modifiques demasiado los archivos del núcleo :)

2 jul 2013 21:27:18
Comentarios

Ya intenté desactivar todos los plugins a través de la base de datos (como no puedo iniciar sesión en el panel de administración de WordPress, no puedo editar nada excepto cosas del sistema de archivos o de la base de datos, nada en la interfaz de usuario de WordPress).

RAC RAC
3 jul 2013 00:54:36
1

Encontramos una solución y parece ser puramente ambiental, un problema en cómo estaban configurados nuestros entornos. Resulta que nuestro servidor MySQL y nuestro servidor real no estaban en la misma máquina y WordPress necesita saber explícitamente la diferencia entre las solicitudes dirigidas al servidor MySQL y las dirigidas al servidor que contiene el código real. Así que la solución consistió en determinar qué entradas de la base de datos apuntar al servidor SQL y cuáles al servidor web.

Una vez que descubrimos cómo configurar los entornos para poder iniciar sesión, habilité el plugin HTTPS y pudimos cargar el sitio normalmente, solucionando el problema de Chrome con las solicitudes no HTTP bloqueadas.

9 jul 2013 03:36:06
Comentarios

Los hilos no se cierran por aquí, simplemente deberías elegir una respuesta.

Wyck Wyck
9 jul 2013 03:47:05