The life of the web developer never seems to be easy, always a new problem cropping up.
One such issue surfaced when a client wanted to begin accepting credit cards. As most Internet users assume, they land on a web page asking for credit card information and it’s secure, I wouldn’t enter my credit card information without seeing the friendly little lock. Another telltale sign is seeing the https: in the browser address bar.
This application happens to be a Ruby on Rails application but that fact is irrelevant. The scenario is likely common today; we have a secure checkout page but our site contains menus and links to pages which are not sure but just plain http. When the users visit the site with their browser of choice they are presented with various messages or maybe none.
- Firefox 6/7, no message..just no indication the page is using SSL.
- Chrome, no message but a red line through the “https:” in the browser address bar. This does not give confidence to the user, I would not put my credit card information in this page.
- Safari, no messages and everything looks good with the exception of the missing tiny lock icon indicating a secure page.
- Internet Explorer, well this is the least friendly of the browsers telling the user there is mixed content and prompted with how to proceed.
I decided to do what every self-respected web developer does when facing a problem, Google for someone else who had the same problem and successfully solved it. I ran into one very insightful post from Dan over at CollectiveIdea. The post lays out a very similar problem with some good ideas for the solution.
Dan points out a URL like this:
Will cause Mixed Content warnings when included from a secure page. Some of the suggested solutions include downloading all of the assets locally and the problem goes away. Although this is true, we lose the benefits of using a CDN.
What works is both elegant and simple; two qualities that make my day. Referencing your CDN-based assets this way is only a slight change:
Notice how we are referencing the GoogleAPI URL, we leave off the http: and the https:. By using two forward slashes only the request will resolve itself and work brilliantly.
Maybe I am the last web developer to find out this tidbit of information but I wanted to document it so the next one faced with this could find the answer here.