We're moving all CleanSlate sites to HTTPS by f
all 2015 (if not earlier) spring 2016. This means
your sites could end up busted when we switch to HTTPS. To ready your sites for
this move, please test and resolve any Mixed Content errors or warnings before
we make the switch permanent.
This post will show you how to test your site for HTTPS and how to fix any errors that may exist.
What is HTTPS?
You've probably heard of HTTPS. Sometimes people refer to it as SSL. HTTPS is a protocol for secure communication over a computer network—in our case, the internet. Recently, there's been a big push to move everything to HTTPS to make the web more secure.
Imagine for a second if the web wasn't a safe place. Maybe you could get a virus after visiting Amazon or Google. You'd stop using the web for fear of security and privacy issues. Online banking? forget it. Luckily, this is not quite the case; but, after reading this list of shady stuff from Chris Coyier, you may realize this might not be too far fetched.
To make the web more secure, HTTPS adoption is becoming more widespread. Google says that they're ranking sites available over HTTPS higher in search results. Last year, Google called for "HTTPS Everywhere." Users also trust HTTPS sites. This helps the user experience and likely increases conversions.
Why should you care?
HTTPS encrypts web traffic, increases security and privacy.
"Hypertext Transfer Protocol Secure (HTTPS) offers the strongest privacy protection available for public web connections with today’s internet technology." - https.cio.gov
As people who make websites for WVU, we are largely responsible for making HTTPS
support a reality. Our goal is to roll out
HTTPS everywhere for CleanSlate sites by
this fall spring 2016. Your site will redirect
https://example.wvu.edu in the near future. You will not be able to access your site over HTTP after this
So what do I need to do?
HTTPS is actually available on your site right now. If you visit any production CleanSlate site (or Slate site, for that matter) and use HTTPS, you can see how the site looks when using HTTPS.
- If you're a boss, everything will look perfect. You'll get that nice green lock in Chrome.
- If you're lucky, you might have a few Mixed Content warnings to fix ( these).
- If you're unlucky, your site could look completely busted!
This is why we're talking about HTTPS now. We want you to test your sites for HTTPS support. Resolve any errors before we make everything load over HTTPS. Get ahead of the curve so you don't have to put out fires later.
How do I test a page to see if it's ready for HTTPS?
- Open up Chrome DevTools, click on "Console" and visit your page at https://example.wvu.edu
- Once your page loads, two things might happen:
NOTE: You can do this in Firefox and Safari too; but, Chrome does a great job of being in your face about Mixed Content and errors you may otherwise overlook in Firefox and Safari.
How to fix "Mixed Content" Warnings
Also known as: "Oh no, my site looks busted when using HTTPS?" If you link to an asset either from WVU or via a CDN, make sure you reference it with HTTPS, not HTTP. For example:
<!-- Incorrect: --> <link rel="stylesheet" href="http://example.wvu.edu/stylesheets/styles.css"> <!-- Correct! --> <link rel="stylesheet" href="https://example.wvu.edu/stylesheets/styles.css">
Note the subtle difference: one uses
https instead of
content (YouTube, Twitter, etc) and images. Basically, any asset you could link
to on your site. https.cio.gov has
a great guide to mixed content if you need more detail.
If you link to any assets with a protocol relative URL, you should change the URL to use HTTPS.
Test your entire site for HTTPS errors:
- For sites with less than 200 pages: run your site through JitBit's SSL Check. This service crawls every page on your site and returns the pages that need HTTPS love.
- If you're site is
bigger than 200 pages, check out Bram Van Damme's
Mixed Content Scan.
- Note: If you don't already have Composer installed globally, you'll need that before installing Mixed Content Scan.
Pro Tip: Install this Extension
Install the HTTPS Everywhere browser extension. This extension forces your browser to use HTTPS when it's available—including WVU pages listed in their ruleset. This puts the errors in your face causing you to fix the errors before D-Day.
It's important to note WVU was recently added as a partial rule by this extension. See if you're site is listed. If it's not, you can get it added to their Atlas when everything on your site is tip-top. That way, all 850,000+ users of this extension will have a great HTTPS experience on WVU sites.
What's the best protocol (
when linking to resources?
https. For more information, see
What about Slate?
HTTPS is available for Slate CMS too! You should follow these steps to test your Slate sites for HTTPS and fix any errors that may exist. You should especially do this if you're site is listed in HTTPS Everywhere's Atlas as users will be redirected to the HTTPS version.
What if my resource isn't available over HTTPS?
If it's not available over HTTPS, consider downloading and hosting it from your theme. If that's not possible, contact the company/owner and see if they can give you HTTPS support. If both of those options don't work, serve the asset via a protocol relative URL and hope HTTPS support comes in the future.
My site is on a sub-sub domain (example.mycollege.wvu.edu) and I get an error when I test HTTPS. What's the deal there?
The HTTPS certificate WVU owns at the time of this post is only allowed to certify
this fall spring 2016, we're planning on having
you should still ready your site for the HTTPS conversion. You can bypass the "Your Connection is not Private" page by clicking Advanced > Proceed to example.xyz.wvu.edu
in Chrome. Afterward, use your DevTools Console to identify Mixed Content warnings
This screencast on Chris Coyier's HTTPS conversion is definitely worth a watch.
Everything on https.cio.gov is gold and worthy of your time.
As usual, if you have any questions or need help with something, please get in touch. We're happy to help.