Jay Caines-Gooby

Back in 5 mins

Avoiding HTTPS mixed content warnings

Tuesday September 07, 2010 @ 11:19 PM (BST)

Skull and cross bones icon

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&amp;gl=GB&amp;q=#{@address}&amp;mrt=loc&amp;t=m&amp;z=15&amp;iwloc=near;&amp;output=embed", 
             :frameborder => "0", 
             :height => "250", 
             :width => "250" }  

and that, currently is doing the job for me.

Comments

New comment

required, won't be displayed

optional

Don't type anything here unless you're an evil robot:


And especially don't type anything here:

Basic XHTML (including links) is allowed, just don't try anything fishy. Your comment will be auto-formatted unless you use your own <p> tags for formatting. You're also welcome to use Textile.

Copyright © 2011 Jay Caines-Gooby. All rights reserved.
Powered by Thoth.