http o https?

Quando ci troviamo a navigare pagine web con connessione protetta - e per connessione protetta intendo tramite il protocollo https - ed alcune delle sue risorse (immagini, javascript, css, etc) non puntano ad un indirizzo sicuro, rischiamo di avere una fastidiosa notifica da parte del browser che ci obbliga a dare il consenso per mostrare i contenuti non sicuri.

Diamo un occhio all’html seguente per capire meglio di cosa stiamo parlando:

<meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="stylesheet" href="http://mysite.com/css/mystyle.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://mysite.com/js/libs/modernizr-1.7.min.js?v=1.5.0.21"></script>

Finché navighiamo la pagina sopra in http non c’è nessun problema ma, se proviamo ad aprire la stessa pagina in https, un buon browser dovrebbe notificarci il rischio a cui andiamo incontro (sia il css, sia jquery puntano ad una connessione http e non https).
Per evitare il problema ci basta cambiare le url da http://.... ad https://..... nel caso la connessione corrente sia in https, e viceversa.
Ovviamente questo cambio deve essere automatico e, riempire il codice di html di if che cambiano il protocollo, non è la soluzione corretta!

Fortunatamente esiste un rimedio più semplice e pulito che consiste nella rimozione dall’url della parte relativa al tipo di protocollo; quindi dobbiamo rimuovere http: o https: e lasciare semplicemente il // come mostrato di seguito.

[xml] <meta name="description" content="" /> <meta name="author" content="" /> <link rel="stylesheet" href="//mysite.com/css/mystyle.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="//mysite.com/js/libs/modernizr-1.7.min.js?v=1.5.0.21"></script> [/xml]

A questo punto sarà il browser a “switchare” in automatico dalla connessione http/https in base a quella corrente.

Questa tecnica prende il nome di “network-path reference” (maggiori info qui) e funziona anche per i css, come potete vedere sotto:

[css].mycssclass { background: url(//mysite.com/myimage.jpg); }[/css]

Inoltre questo approccio funziona egregiamente con tutti i browser, tranne che con Internet Explorer 7 e 8 dove, solo per i tag o @import, il download della risorsa avviene due volte (maggiori info qui).

Figo no?


Comments