Selección automática de protocolo

22 Dic 2010

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“.

Ventana con advertencia de elementos 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.

Para más información:

Más:

{2} Comentarios.

  1. codeman

    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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *