Paul Irish nos recuerda en una entrada de su blog, cómo trabajar con las URLs en nuestras aplicaciones web dependiendo del protocolo que estemos usando:
<img src="//domain.com/img/logo.png"> |
Como se puede observar, delante del dominio colocamos dos barras en lugar de una: es lo que llamamos una referencia relativa. De este modo, si el navegador detecta que estamos en zona segura (HTTPS), la imagen la cargará utilizando ese mismo protocolo. En caso contrario, la carga se hará de forma normal.
Con esto, prevenimos la aparición de los molestos mensaje de advertencia que nos informan de que «la página que está abriendo contiene tanto elementos seguros como no seguros«.
Este truco también funciona con archivos CSS:
.foo { background: url( //domain.com/img/sample.gif ); } |
Como curiosidad, Internet Explorer tenía que comportarse de un modo extraño. En este caso, cuando añadimos la referencia relativa delante del dominio, provocamos que el navegador descargue el archivo dos veces, un detalle que no llega a ser crítico pero que incrementa ligeramente los tiempos de carga.
En definitiva, un truco recomendable si trabajamos con páginas que cambian con frecuencia de zona como podría ser una tienda online y su pasarela de pago, o una página de login de usuario.
Yo hasta ahora, en PHP, utilizaba el siguiente snippet:
if($_SERVER['SERVER_PORT']=="443"){ $url = str_replace('http:', 'https:', $url); }De momento me ha funcionado muy bien, pero probaré el truco este.