Working on an HTTPS site today I was getting mixed content warnings from Chrome due to a few external resources still coming over HTTP.

Google analytics already has the HTTP/HTTPS switcher built into it, but jQuery was being pulled in with an explicit http call to:

 <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

I could serve the code directly myself, but it seemed neater to use the Google CDN. It was a relatively quick fix thanks to stackoverflow. I used the simplified version:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
  type="text/javascript"></script>

which uses the // protocol-relative URL to download the external jquery file. Because it’s served over HTTPS, you won’t benefit from using the browser’s cached version, but it is one less file to be served by you.

Don’t forget your favicon

So now I was at the point of being certain that every resource on the page was being served over HTTPS, yet I was still getting the dreaded mixed content warning. Then I realised I hadn’t explicitly put a favicon link in the html. A quick check in the logs seemed to confirm this. The implicit favicon.ico request was being made by Chrome, but using HTTP.

Adding the icon link seemed to do the trick.

  <link href='/images/favicon.ico' rel='shortcut icon' />

Proxying Google maps

Once final problem was that as part of the registration process, I was showing a Google Map iframe.

I didn’t want this page served over HTTP just to avoid the mixed content warning, especially as the map page contains personal details.

As I’m using nginx to serve the site, and it’s relatively easy to proxy content served from local application servers like mongrel and unicorn, I wondered if we could do something similar with the requests to http://maps.google.com.

The nginx config is really easy:

location /maps {
  proxy_pass        http://maps.google.com;
  proxy_set_header  X-Real-IP  $remote_addr;
}

Just make sure this comes ahead of any location rule that matches /, as it needs more priority.

And then in my code, I just invoke the iframe without the http://maps.google.com host, when I know I’m running in production, and hence running the proxy

- host = (RAILS_ENV != "production" ? "http://maps.google.co.uk" : "") 

%iframe#map{ :scrolling => "no", 
             :marginheight => "0", 
             :marginwidth => "0", 
             :src => "#{host}/maps?hl=en&gl=GB&q=#{@address}&mrt=loc&t=m&z=15&iwloc=near;&output=embed", 
             :frameborder => "0", 
             :height => "250", 
             :width => "250" }  

and that, currently is doing the job for me.