Accidental Technologist

Musings about Entrepreneurship, Technology and Software Development

  • Home
  • About
  • Still River Software
  • Privacy Policy

Powered by Genesis

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

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

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 (ruby.social/@rbazinet)
@rbazinet

  • Working to wrap up my current consulting gig by mid-April. I will be looking for the next thing soon. If anyone has… https://t.co/sg3cSV9yqM
    about 13 hours ago
  • I’ve been spending some time using Notion AI lately and it surprisingly good. Since all the rage lately is ChatGPT,… https://t.co/cUXFWIRCVV
    about 3 days ago
  • I think these steps are true for any target audience. https://t.co/0ht6rIzOW3
    about 3 days ago
  • I’ve been enjoying a show from the Magnolia network called The Craftsman. It’s mainly about woodworking but his phi… https://t.co/sWTUBbSsl6
    about 4 days ago
  • I found the resource I was looking for last night that is similar to https://t.co/Pyn0IIjRdP, it is… https://t.co/U7TMe77FMF
    about 4 days ago
  • RSS - Posts
  • RSS - Comments
Find me on Mastodon