SSL ALL THE THINGS with WordPress and AWS CloudFront

SEO

SSL ALL THE THINGS with WordPress and AWS CloudFront

Before I begin, let’s be honest about you, SEO and SSL.

Now that SSL is a supposed ranking factor, you are going to implement it. You can deny it all you want, but you’re going to do it. Everyone knows you’re old school and that you refuse to give into Google’s manipulation of SEOs, but it’s really just a matter of time until you do it.

How do I know this? Because one day you’re going to wake up and find that your site’s rankings have dipped. The next thing you’re going to do is look at the SERPs to see which sites rank above yours. When you do, you’re going to see that most websites are using SSL.

The funny thing is that your loss in ranking may have nothing to do with SSL, but you won’t know that. All you’ll know is that all or most sites that rank better than yours are using SSL. That’s because everyone else added SSL while you were making fun of them. And now, well now you’re going to add SSL, because you can no longer take a chance on it not being a ranking factor.

So, I’m going to take you through, step-by-step, on exactly how to do this. You can thank me later ;-)

How To Add SSL to WordPress

If you’re new to SSL, then you will soon find out that adding it to WordPress (or any site in general) is a pain in the butt. The certificates aren’t easy to create, and if you have any insecure page assets, browsers will throw a security error. And it gets even more complicated when you want to use a content delivery network (CDN) for your media files. But don’t worry about that, because I’m going to walk you through every step of securing WordPress with SSL.

What makes up the perfect secure WordPress site? Three things:

  1. The domain is secure, along with its themes assets
  2. The site uses CloudFront (or an equivalent CDN to serve its assets
  3. When media is added, it defaults to using https (bonus points for it using your own domain or subdomain)

Step 1: Create the Private Key and Certificate Signing Request (CSR)

The private key is used to create the CSR and is also used when installing the certificate on the server. The CSR is used for requesting a certificate. To create a Private Key, you will need OpenSSL. OpenSSL usually comes preinstalled on Mac OS X, Linux and UNIX, but not Windows. OpenSSL for Windows is available as a free download from OpenSSL’s site.

Open the Terminal app and then change the directory to the location you want to save the Private Key and CSR. I usually create them in my Downloads folder.

$ cd ~/Downloads/

The next step involves using OpenSSL to create the Private Key and CSR. Type in the following, changing yourdomain.com to the domain or subdomain you plan to use with the certificate.

$ openssl req -nodes -newkey rsa:2048 -keyout yourdomain.com.key -out yourdomain.com.csr

OpenSSL will then ask you to answer a series of questions, one at a time. You will need to answer all of them, except Organizational Unit, which is optional. When it asks for the Common Name, enter the domain or subdomain you want to make secure. Also, you can skip the last two questions that ask for a Challenge Password and optional company name. Here’s an example of what it should look like:

Create SSL Certificate with OpenSSL

Step 2: Order the certificate

There are numerous places that sell certificates, but my favorite is Comodo. And chances are, your favorite hosting provider and/or registar actually resells Comodo certificates. For me it’s Pair Networks and Gandi. If you register or transfer your domain to Gandi, they will actually give you an SSL certificate for free for the first year, and then it’s super cheap afterwards. That’s what I’ve done with my sites.

Find and open the CSR you created and open it using a text editor like TextMate. Copy and paste all of the text into the CSR input field of the certificate provider. Make sure you select Apache/ModSSL for the software used to create the CSR. This is what it looks like on Gandi using the yourdomain.com example:

Paste SSL Certificate

Step 3: Verify ownership and identity

This step depends on the certificate authority and the type of certificate you ordered. Since Google seems only to be concerned about sites encrypting their data using 2048 bit digital signatures, you can usually buy the cheapest option which only requires you to verify ownership of the domain. The process is usually similar to verifying a site with Google Webmaster Tools (GWT).

Step 4: Install the certificate

Once the certificate is ready, the certificate authority will provide the certificate and will also usually provide an intermediate certificate. You will need both of these because, if you don’t include the intermediate certificate, you’ll get a certificate error on your site after it’s been installed. This is what it looks like when I get my certificates from Gandi:

Download SSL Certificate

In most cases, you’ll want to submit a support request with your hosting provider and request that they install the certificate for you. Every hosting provider has a different procedure, and some companies may charge you to have them install it for you. I use Pair Networks, and they had me upload the files to a private folder on my account. They installed it for free and did it within a few hours after I submitted the request.

Step 5: Change the WordPress Settings

Once you’ve verified that the certificate is installed correctly, login to your WordPress Admin. Go to Settings > General and add an ‘s’ to the WordPress Address and Site Address; then save the changes.

WordPress HTTPS Settings

Step 6: Update .htaccess to redirect all non-secure traffic to https

Open the .htaccess file for your site and add the following code (replacing yourdomain.com with your own domain). This code will redirect all non-secure traffic to the SSL version.

# HTTPS Redirect
RewriteEngine on
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://yourdomain.com/$1 [R=301,L]

Step 7: Clean up non-secure links in Pages, Posts and Themes

Since WordPress doesn’t use relative links when it adds uploaded media to posts and pages, you’ll need to update all of the media links to use https. You’ll need to either add the ‘s’ or alternatively leave off the protocol and just use the slashes like this: //wp-content/uploads…

But wait, there’s more! While most WordPress themes use relative internal links, some do not. You need to check and see if your theme – especially if it’s a custom built theme – has any hard-coded non-secure asset links.

Step 8: Change Google Analytics

This is quite possibly the easiest step. You need to change the settings on Google Analytics to use https. Go to Google Analytics, find your site, and then go to the Admin settings. In the Properties section, change http to https.

Google Analytics HTTPS Settings

Step 9: Add site to GWT

It ends up that GWT isn’t as smart as Google Analytics. GWT requires you to add your site again, but as a secure site this time. It’s important that include https when entering the URL.

Add HTTPS to Google Webmaster Tools

Congratulations! You did it! Unfortunately, it’s not good enough. What happens if your site gets a ton of traffic and/or becomes globally popular? Without a Content Delivery Network (CDN) your site could be screwed.

I’m going to show you how to add CloudFront – my CDN of choice – to WordPress with a secure connection.

How To Add CloudFront with SSL to WordPress

In order to use CloudFront, you’ll need an Amazon Web Services (AWS) account.

Step 1: Create an S3 Bucket

Login to AWS and then go to the Management Console. Then go to the S3 management page. Click the Create Bucket button and name your bucket. The bucket name must be a unique to all of S3. I usually name my buckets media.yourdomain.com or cdn.yourdomain.com regardless of whether or not I plan on actually using those subdomains.

Create S3 Bucket

Step 2: Create a CloudFront Distribution

S3 only serves files from the datacenter it’s stored at, whereas CloudFront takes those files and distributes and serves them worldwide. For example, if your S3 bucket and its associated files are stored in a datacenter that’s located in Virginia, and you get a user visiting your site from Australia, CloudFront will deliver your files from a data center located in the Asia Pacific region instead of Virginia.

From the Management Console, go to the CloudFront management page. Click on the Create Distribution button. For the Origin Domain Name, choose the S3 bucket you created. For the Origin ID, name it whatever you want, like MyOrigin. Your Default Cache Behavior Settings should look like the following:

CloudFront Cache Settings

For the Distribution Settings, if you plan to use your own subdomain or domain, enter it in the Alternate Domain Names (CNAMEs) textarea. I’ll explain how to use your own secure domain for CloudFront later in this post. However, for now, choose Default CloudFront Certificate (*.cloudfront.net) for the SSL Certificate option. Your Distribution Settings should look like the following:

CloudFront Distribution Settings

Click on the Create Distribution button and your CloudFront distribution will be created. The Domain Name is your new CloudFront distribution URL.

Step 3: Create a User with Access to S3 & CloudFront in the Identity and Access Manager (IAM)

Go to the IAM located in the Deployment & Management section. Click on Users in the side navigation and then click on the Create New Users button. Enter a username of your choice and then click the Create button. Then download your Access Key ID and Secret Access Key. Make sure you save this in a safe place.

From the IAM Dashboard, click on Groups in the side navigation. Click on the Create New Group button. Name the group CloudFrontAccess or whatever you’d like. From the Select Policy Template list, select CloudFront Full Access, click on the Next Step button, and then click on the Edit Permissions link. That will take you back to the Select Policy Template list. Select Amazon S3 Full Access, click on the Next Step button, and then click on the Create Group button.

From the IAM Dashboard, click on Users in the side navigation. Click on the user you created and then click on the Add Users to Groups button. Click on the Group you just created and then click on the Add to Groups button.

Step 4: Install and Activate AWS WordPress Plugins

You will need two plugins to make CloudFront work with WordPress. Go download and activate the following plugins:

For the Amazon Web Services plugin, save your Access Key ID and Secret Access Key. Then go to the S3 and CloudFront plugin settings page and choose the bucket you created in Step 1. Enter the CloudFront domain name that was created during Step 2 (e.g. d2bf4xhbh68omg.cloudfront.net). Your settings should look like the following:

AWS WordPress Plugin Settings

Now when you add new media to WordPress, it will save them on CloudFront and will insert a secure link to your media into your pages and posts.

How To Use Your Own Secure Domain with CloudFront

This is the bonus round and also the most difficult because part of the process requires you to use AWSCommand Line Tools. However, if you want to use your own subdomain or domain securely with CloudFront, you’ll have to do the following steps.

Step 1: Create and order the certificate

Go back to the beginning of this post and follow steps 1-3 in the How to add SSL to WordPress section.

Step 2: Create an Admin user in IAM

SSL certificates are managed by the IAM, which means you have to create a user account that will be associated with the certificate.

Go to the IAM. Click on Users in the side navigation and then click on the Create New Users button. Enter a username of your choice and then click the Create button. I usually name mine something like yourdomain.com.ssl. Then download your Access Key ID and Secret Access Key. Make sure you put this in a safe place.

Click on the user you just created and then click on the Attach User Policy button. From the Select Policy Templates list, select Administrator Access and then save the new settings.

Step 3: Install AWS Command Line Interface (CLI)

There currently isn’t an option to install the SSL certificate via AWS’ Web interface. Instead you have to use their CLI to add it.

I attempted several methods to install the CLI on my Mac, and this is the method that finally worked for me.

  1. Download and install Python 2.x (Don’t install version 3.x, because it doesn’t work with the CLI.)
  2. Open the Terminal app and install pip using these instructions.
  3. After you install pip, use it to install the CLI with this terminal command $ pip install awscli.

Step 4: Configure CLI

In order to use CLI to upload your SSL certificate, you will need to configure it to use the user account you created in Step 2.

In the Terminal app, enter $ aws configure. Then enter the credentials it asks for (i.e. Access Key ID, Secret Access Key).

Step 5: Upload the SSL certificate using CLI

This is the most precarious step because the command is very long and complex. The command includes the following attributes:

  • aws – This runs the CLI tool.
  • iam – This tells AWS that you’re submitting a command to the IAM.
  • upload-server-certificate – This specifies that you’re uploading an SSLcertificate.
  • server-certificate-name – This is an arbitrary label. It can be named whatever you want.
  • certificate-body – This is the certificate you received from the certificate provider (e.g. Comodo).
  • private-key – This is the private key file that was made when you created the certificate on your computer.
  • certificate-chain – This is the intermediate certificate file.
  • path – This specifies it’s for CloudFront and requires that you start the path with /cloudfront/ and append it with a label of your choosing (with no spaces).

The first thing you need to do is move all of the files into one folder. That includes the certificate, intermediate certificate (if you have one) and the private key. Then open the Terminal app and use the change directory command to go to that folder (e.g. $ cd /path/to/certificate/files/).

Enter the following command, replacing the marked text with your own labels and file names.

$ aws iam upload-server-certificate --server-certificate-name cdnyourdomain.com --certificate-body file://cdn.yourdomain.com.crt --private-key file://cdn.yourdomain.com.key --certificate-chain file://intermediate.certificate.pem --path /cloudfront/cdn-yourdomain-com/

Step 6: Configure your CloudFront Distribution to use your SSL Certificate

Congratulations if you’re still with me and you’ve gotten this far :)

From the AWS Management Console, go to the CloudFront management page. Click on the CloudFront distribution you created in Step 2 of the How to add CloudFront with SSL to WordPress section above. Click on the Edit button on the General tab. Enter the domain name your certificate uses in the Alternate Domain Names (CNAMEs) setting. Then choose Custom SSL Certificate (stored in AWS’ IAM) for the SSL Certificate setting and select the certificate you uploaded in the previous step. Next, click on the Only Clients that Support Server Name Indication (SNI) for the Custom SSL Client Support. If you choose All Clients, AWS will charge you $600/mo, and nobody wants that! Finally, click on the Yes, Edit button to save the changes.

It should look similar to this:

Custom SSL Domain for CloudFront

On the CloudFront Distributions table, the Status will say In Progress. This can take some time – sometimes hours. Once it says Enabled, your custom secure subdomain or domain with CloudFront will be live.

Step 7: Create CNAME for your secure subdomain or domain

The last step, which can be done immediately after completing the previous step (no need to wait until it’s Enabled) is to create a CNAME that points your secure subdomain or domain to your CloudFront address in your DNS. If you’re unfamiliar about how to do this, AWS provides detailed instructions.

Step 8: Configure the AWS WordPress plugin

Once your DNS change propagates and your custom subdomain or domain with CloudFront is enabled, you will need to go to the S3 and CloudFront plugin settings page and change the CloudFront address to your subdomain or domain. It should look like this:

Custom SSL Domain AWS WordPress Plugin Settings

If you were brave enough to follow and complete all of the steps in this post, then you officially have a kick ass SSL ALL THE THINGS WordPress site and you deserve a drink!

References

I could not have figured this out without these informative posts.

Related Posts Plugin for WordPress, Blogger...

Filed under:
SEO

Jon is the co-founder and Chief Product Officer (CPO) for Raven Internet Marketing Tools.

More about Jon Henshaw | @RavenJon

Tell us what you think

  • Husnain

    SSL security will also help you to ge beter rank in SERPs as Matt Cutts declared that Google will give privilege to https blog more on http websites.

  • http://raventools.com Jon Henshaw

    While getting an SSL certificate for your CloudFront domain should have some SEO benefit, it’s really more about aesthetics and branding. It’s not absolutely necessary, I just prefer it.

  • Ashish

    Thanks,
    Seems like a lot of work just to have the own domain. Are there any real SEO advantages this piece when compared to using CF domain name through SSL? Or is it purely aesthetics and branding? Sorry I am a newbie in SEO world.

  • http://raventools.com Jon Henshaw

    You have to buy a separate certificate for CloudFront if you want to use your own domain or subdomain. And that domain or subdomain cannot match your WordPress site, because a domain or subdomain can only point to one server.

  • Ashish

    What a great article! Just one question, do I have to buy a separate SSL certificate just for cloudfront or my current domain certificate should do?

  • http://raventools.com Jon Henshaw

    Thanks! We’ll do it eventually, we just haven’t made time to do it yet. Too many other projects we’re working on right now :)

  • BrunooArruda

    thanks for the amazing compilation.. but I am curious, why raven haven´t done it yet @jonhenshaw:disqus ?

  • http://raventools.com Jon Henshaw

    Nice plugin suggestion. Thanks!

  • http://raventools.com Jon Henshaw
  • http://infolific.com/technology/ Marios Alexandrou

    Awesome guide! But those of us that use Adsense actually will (or at least probably should consider) hold out since Adsense earnings take a hit under SSL.