138: Walking Through an HTTPS Conversion on WordPress

We just recently moved to "HTTPS everywhere" right here on CSS-Tricks. I wrote up a blog post detailing the steps to get there. This video is a companion to that, talking through the steps, as I know some folks prefer that style and the type of detail it affords.

I should note that I'm not an expert about this stuff. I'm sure there are different types of SSL certificates that can be installed in different ways and that offer different levels of security. I can't tell you about Heartbleed. I don't even know how you get the kind of certificate where it says your sites name by the green lock like some sites have (e.g. Stripe). If you're interested in advanced stuff like that, this isn't the video for that.

Some things talked about in the video:

  • Firesheep shows just how easy it can be to snoop public website traffic. Can't do that over HTTPS.
  • ISPs (and other internet middlemen) can mess with network traffic, don't things like inserting their own ads. Even Google itself. Can't do that over HTTPS.
  • HTTP/2 stuff will be awesome for web performance, and it's likely some browsers will require HTTPS to use it.
  • Just getting your host to install your SSL certificate for you is probably slightly more expensive but it will (probably) be done right and be less work on your part.
  • If your site facilities any secure information being transmitted whatsoever, even if it never hits your servers or you never store it, your site should be HTTPS. At the very least, those pages that have the secure stuff, like login pages or signup pages.
  • WordPress has a simple setting for turning on HTTPS for the admin area, which will be easier to get working than user-facing part of your site.
  • If you can't yet go HTTPS everywhere on the user facing part of your WordPress site, there is a plugin that helps makes individual pages HTTPS as needed.
  • Once you can force HTTPS everywhere, you can ditch the plugin and use this HTAccess snippet.
  • Make sure you change all the settings you possibly can to let them know your site is now http:// - to avoid redirects. For example, your CDN, and the settings right in WordPress itself.
  • Google says HTTPS factors into search rankings.
  • On an existing site with lots of content, perhaps the most work involved will be cleaning up "mixed content warnings". You don't get the secure green lock of HTTPS if you, for example, link to an image over HTTP. Worse, a script linked to insecurely won't run at all.

Comments

  1. User Avatar
    Mike McMullan
    Permalink to comment#

    Having your name beside the lock in the url bar means it’s an Extended Validation certificate also known as an EV cert. These certs are much more expensive and take more time/effort to get.

  2. User Avatar
    Ivan
    Permalink to comment#

    Talking about HTTPS, when I access css-tricks I receive a console.log message (on Firefox nightly win64):

    This site makes use of a SHA-1 Certificate; it’s recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.[Learn More].

    https://developer.mozilla.org/en-US/docs/Security/Weak_Signature_Algorithm

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag