Accidental Technologist

Musings about Entrepreneurship, Technology and Software Development

  • Home
  • About
  • Still River Software
  • Privacy Policy

Powered by Genesis

You are here: Home / Ruby on Rails / Mixing Secure and Non-Secure Assets in Your Web Application

Mixing Secure and Non-Secure Assets in Your Web Application

December 15, 2011 by Rob Bazinet 1 Comment

Tweet

The life of the web developer never seems to be easy, always a new problem cropping up.

The Problem

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.

Many sites today make use of outside CSS and JavaScript files host on a content delivery network (CDN) somewhere on the interwebs. ?This has tremendous benefit for web developers and users alike, giving applications better performance. ?The problem arises when we have a secure page (https) which pulls in assets from non-secure CDNs, where requesting assets securely will fail to return successfully and ruins the user’s experience.

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.

  1. Firefox 6/7, no message..just no indication the page is using SSL.
  2. 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.
  3. Safari, no messages and everything looks good with the exception of the missing tiny lock icon indicating a secure page.
  4. Internet Explorer, well this is the least friendly of the browsers telling the user there is mixed content and prompted with how to proceed.

The problem was mainly centered-around the Yahoo YUI JavaScript and CSS assets and how they were included. ?This application uses the Yahoo content delivery network (CDN) to serve the assets, which is a great way to serve the assets.

The Solution

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:

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

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:

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

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.

Share this:

  • LinkedIn
  • Twitter
  • Facebook
  • Email
  • More
  • Pinterest
  • Tumblr
  • Pocket
  • Reddit

Related

Filed Under: Ruby on Rails Tagged With: rails, ssl

Care about your privacy? I do and use Fathom Analytics on this site.

Fathom Analytics

Recent Posts

  • How to Fix Rails Flash Rendering When Using Hotwire
  • Hotwire Fix for CORS Error when using Omniauth
  • Fix Installation of Ruby using rbenv on macOS Big Sur
  • RailsConf 2021 and the Future of Conferences
  • Fixing Out of Diskspace Errors on Amazon EC2

Categories

Services I Love

HatchBox - Easy Rails Deploys Fathom Analytics
Follow @rbazinet

Rob Bazinet
@rbazinet

  • Just for the record and anyone who might consider it...Godaddy is a complete mess and scammy. I don't think I would… https://t.co/755jpkLbnE
    about 3 days ago
  • This is so true and has been my personal take on people complaining they are busy - https://t.co/YW8NTQLXtl
    about 1 week ago
  • Wow…https://t.co/h94ia053sL
    about 1 week ago
  • My Bills lost today but more importantly so did the Dallas Cowboys. Nice seeing the ‘boys done for the season.
    about 2 weeks ago
  • It looks like the Apple Xcode command line tools is a bit bloated for it to take this long… https://t.co/U0HObTvzXf
    about 2 months ago
  • RSS - Posts
  • RSS - Comments