Tips for adding optional SSL support

I am excited by the growing popularity of the HTTPS Everywhere plugin. I became aware of it recently when users wrote me to complain that some part of did not work over SSL. It turns out that our store
software redirects visitors to the official hostname, so going to would redirect to, which HTTPS Everywhere would redirect back to, and so on. I decided to fix this and also to fix the “this page includes other resources which are not secure” warning.

How I implemented automatic SSL switching:

  • SSL proxy: We use CloudFlare as an SSL proxy. Even though we already had SSL configured on our Windows server, CloudFlare makes it easy to share SSL certificates between Windows and Linux servers, which is otherwise quite tricky. But it’s also great if your web server does not have SSL support.
  • Relative (scheme-less) Urls: I removed the scheme from all our resources, so they look like <img src=”//” alt=”” />  We are transitioning to scheme-less URLs for everything.  It allows users to choose HTTPS even if your site is served over HTTP by default.
  • Request.Url.Scheme: I used to append the URL scheme used by the request when I was not sure if the client (rss reader, email, templates etc) would support scheme-less URL’s. But this has the disadvantage of not working with cached pages. So far, it seems that scheme-less URL’s are safe for all popular web clients.

I don’t think there was ever much sense in having the http://www. prefix in URI’s, so getting it down to just // is very nice.

How to find non-SSL resources on a page:

One frustrating debugging step for me used to be finding the http resources within a page. I would have to search for http resources in the source code. If the page references scripts that load other resources, this could get complicated. Fortunately, Google Chrome offers a simple solution – the network inspector can export information to a searchable JSON file:

  1. Open a new private browsing session in chrome (to disable your extensions, which may inject non-SSL links within the page)
  2. Alt-click and “Inspect element”
  3. Go to the Network tab
  4. Open the URL to inspect
  5. Right click inside the Network tab and “Copy all as HAR”
  6. Paste the JSON into notepad, and search for http:// resources

One last note: If you use third-party widgets or services which do not fully support SSL, please take the time to contact the vendor and request that they add full support for SSL.

Leave a Reply