Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Free SSL For Any WordPress Website

If you have an e-commerce website, then SSL is mandatory for safely processing credit cards. But even if you aren’t processing payments, you should still seriously consider secure HTTP (or HTTPS), especially now that I’m going to show you how to set it up quickly, for free. Let’s get started.

What Is SSL And Why Should I Care?

In short, SSL is the “S” in HTTPS. It adds a layer of encryption to HTTP that ensures that the recipient is actually who they claim to be and that only authorized recipients can decrypt the message to see its contents.

Further Reading on SmashingMag: Link

Sensitive information such as credit-card numbers — basically, anything private — should always be served via HTTPS. However, there is an increasing trend towards serving all content via HTTPS, as we’re seeing on news website, blogs, search engines and the websites of most mainstream brands. So, even if your website isn’t processing payments, there are good reasons to consider HTTPS, a few of which are listed here:

  • Credibility
    Even non-technical audiences associate the little green padlock in the browser’s address bar with trust and reliability.
  • Password protection
    Perhaps your website only hosts kitten videos. But if users are logging into your website via Wi-Fi with a password that they also use for online banking, then you are potentially facilitating a serious security breach by broadcasting those credentials publicly.
  • Future-proofing
    Many websites are still served via HTTP, but there is an undeniable trend towards HTTPS, and this will only increase as users become increasingly educated about web security. Be on the right side of history.
  • SEO
    Google officially announced that HTTPS is used as a ranking signal4. In other words, Google is rewarding HTTPS websites by boosting their rankings in search results.

A common argument against HTTPS is that it reduces performance. True, the process of encrypting and decrypting does cost additional milliseconds, but in most situations it is negligible, as evidenced by the fact that performance-conscious companies such as Google and Facebook serve all of their content via HTTPS. And, true, HTTPS can exacerbate existing performance problems, like many CSS files being served individually, but this is mitigated by following basic best practices for performance. And with the adoption of HTTP/2, the performance cost of HTTPS is even lower. The bottom line is that the reduction in performance is a meaningful deterrent only if your website is either hyperoptimized or so underperforming that every millisecond matters.

How To Set Up HTTPS For Free

The first step to setting up HTTPS for free is to sign up for a cloud DNS service. If you have no idea what DNS is, I recommend that you take a minute to learn before proceeding. The delightful How DNS Works5 does a great job of breaking it down into a quippy cartoon. Otherwise, simply know that DNS is the system whereby domain names like example.com (which humans understand) get linked to IP addresses like 104.28.2.167 (which computers understand). You have many options, but I’m a fan of CloudFlare because it’s really fast to set up, the dashboard is intuitive, and a free plan is available with many powerful features.

Setting Up CloudFlare

After registering for a CloudFlare account, you’ll be walked through an easy wizard to configure your first website, which will conclude with instructions on how to log into your domain registrar and point the nameservers to CloudFlare. The change will take some time to propagate, but when it’s complete, CloudFlare will be hosting your website’s DNS records. Next, turn on CloudFlare’s “flexible SSL” feature.

CloudFlare dashboard6

CloudFlare dashboard with SSL setting (View large version7)

Choosing the “flexible SSL” setting is important because it doesn’t require you to buy and install your own SSL certificate on your website’s server. Here’s a diagram of what’s happening.

CloudFlare flexible SSL diagram8

CloudFlare flexible SSL diagram (View large version9)

As you can see, CloudFlare is acting as the middleman to secure traffic between your website and the client. If this were a static HTML website, you would now be able to connect to it via HTTPS (https://yourdomain.com). WordPress, however, requires additional configuration in order to work with the modified protocol.

Reconfiguring WordPress From HTTP To HTTPS

You will first need to update the “WordPress Address” and “Site Address” settings in the dashboard, under “Settings” → “General.” When you do this, you will have to log into the dashboard again.

WordPress dashboard10

WordPress dashboard with URL settings (View large version11)

Proceed cautiously. If you update these settings prematurely, you risk locking yourself out. For example, if the website isn’t yet properly configured for HTTPS and the settings are updated, you could cause a redirect loop that breaks the website and prevents you from accessing the dashboard.

At this point, you should be able to visit the home page of the website via HTTPS. However, page links will still point to the HTTP URLs. WordPress stores links to pages and images as absoute URLs, meaning that the full URL, including the protocol, is saved in the database. To ensure that the entire website is consistently served via HTTPS (without spitting up warnings about mixed content), you will need to update your legacy content.

Updating Legacy Content

On a small website with only a few pages, the quickest option might be simply to manually update the URLs by editing existing pages in the admin interface. If the website is large or has a highly active blog, then manual editing likely isn’t practical. If your host provides phpMyAdmin or some other interface to run MySQL queries, you could do this pretty easily with a few MySQL queries in the SQL tab. Alternatively, you could follow The Customize Windows’ instructions12 to do it from the command line.

At the risk of stating the obvious, replace yourdomain.com in the following queries with your actual domain. Also, if you’ve customized WordPress’ table prefix, replace wp_ with the relevant prefix.

First, update the URLs of the posts and pages.

UPDATE wp_posts SET guid = replace(guid, 'http://yourdomain.com','https://yourdomain.com');

 

[UPDATE: As discussed in the comments, the guid field should not be edited13.]

Update the wp_postmeta table, too.

UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://yourdomain.com','https://yourdomain.com');

Finally, update the actual contents of posts or pages. This will update any backlinks to HTTPS.

UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://yourdomain.com', 'https://yourdomain.com');

After running these queries, you will want to refresh your permalinks by going to “Settings” → “Permalinks.” Simply change the setting back to the default, and then set it back to whatever setting you were originally using.

Now, you should be able to click the menus and links throughout the website, and the protocol should remain HTTPS.

Troubleshooting Mixed-Content Warnings

Depending on the theme and plugins in use, you might get a warning in the address bar stating that certain resources are not being served securely. If the errors are associated with assets added by your own custom theme or plugin, make sure to properly enqueue JavaScript14 and CSS files15 and not to hardcode URLs that begin with HTTP. Most browsers will let you expand the warning to show the specific requests that are causing the error. You could also try a free plugin such as SSL Insecure Content Fixer16, which will attempt to correct third-party plugins that have failed to do this.

By this point, you should see the green padlock in the URL bar when visiting your website. If you aren’t using an e-commerce plugin such as WooCommerce or WP eCommerce, you’re done! If you are, there is an important last step.

Getting Flexible SSL To Work With E-Commerce Plugins

WordPress has a core function named is_SSL()17 that plugins rely on to determine whether traffic is encrypted with SSL. With the method above alone, this function will return false because the encryption is only between CloudFlare and the client. The traffic that PHP interacts with is unencrypted, so the super global that that function checks (i.e. $_SERVER['HTTPS']) would not be useful. For our purpose, the relevant variable is $_SERVER['HTTP_X_FORWARDED_PROTO'], which, at the time of writing, WordPress does not recognize. The request to change this18 is long-standing, but it is yet to be resolved.

Fortunately, a free plugin will fix this for you immediately, CloudFlare Flexible SSL19. Simply install the plugin and activate it. Remember that this technique does not add any more security. Traffic between CloudFlare and your website’s server is still unencrypted and, therefore, still vulnerable to sniffing.

Flexible SSL Is Not Full SSL

CloudFlare’s “Universal SSL” initiative is an interesting attempt to make the Internet more secure, but it is not without controversy. The primary concern is that flexible SSL does not encrypt the second half of the traffic’s journey (to your server), yet the browser currently still shows the same green padlock that we have come to associate with complete SSL. CloudFlare offers the following justification20 on its blog:

Having cutting-edge encryption may not seem important to a small blog, but it is critical to advancing the encrypted-by-default future of the Internet. Every byte, however seemingly mundane, that flows encrypted across the Internet makes it more difficult for those who wish to intercept, throttle, or censor the web. In other words, ensuring your personal blog is available over HTTPS makes it more likely that a human rights organization or social media service or independent journalist will be accessible around the world. Together we can do great things.

For better or worse, flexible SSL is here, and the Internet will have to adapt. In the meantime, the burden is on website owners to be educated and to make responsible decisions.

Redirecting HTTP Requests To HTTPS

Enabling a website to run on HTTPS does not ensure that requests will actually use the protocol. If your website has been around for a while, users might have already bookmarked it with HTTP. You can redirect all HTTP requests to the new protocol by adding the following snippet to the top of the .htaccess file in the root of your website. If the file does not exist, you can safely add it.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP:X-Forwarded-Proto} !https
    RewriteRule (.*) https://yourdomain.com/$1 [R=301,L]
</IfModule>

If an .htaccess file already exists, be careful not to change anything between the # BEGIN WordPress and # END WordPress lines in that file. Those lines are managed by WordPress, and whenever the permalinks get refreshed, the contents in that section get overwritten.

Congratulations

By upgrading your website to HTTPS, you have improved your website, protected users and participated in the advancement of the Internet. And it didn’t cost you anything!

(dp, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2015/09/https-everywhere-with-nginx-varnish-apache/
  2. 2 https://www.smashingmagazine.com/how-to-issue-a-new-ssl-certificate-with-an-old-ssl-key/
  3. 3 https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/
  4. 4 https://googlewebmastercentral.blogspot.co.id/2014/08/https-as-ranking-signal.html
  5. 5 https://howdns.works/
  6. 6 /wp-content/uploads/2016/01/01-flex-ssl-opt.png
  7. 7 /wp-content/uploads/2016/01/01-flex-ssl-opt.png
  8. 8 /wp-content/uploads/2016/01/02-security-illustration-ssl-opt.png
  9. 9 /wp-content/uploads/2016/01/02-security-illustration-ssl-opt.png
  10. 10 /wp-content/uploads/2016/01/03-dashboard-opt.png
  11. 11 /wp-content/uploads/2016/01/03-dashboard-opt.png
  12. 12 https://thecustomizewindows.com/2014/09/mysql-queries-change-wordpress-http-https/
  13. 13 https://codex.wordpress.org/Changing_The_Site_URL#Important_GUID_Note
  14. 14 https://codex.wordpress.org/Function_Reference/wp_enqueue_script
  15. 15 https://codex.wordpress.org/Function_Reference/wp_enqueue_style
  16. 16 https://wordpress.org/plugins/ssl-insecure-content-fixer/
  17. 17 https://codex.wordpress.org/Function_Reference/is_ssl
  18. 18 https://wordpress.org/support/topic/request-modify-is_ssl-function-to-check-for-http_x_forwarded_proto
  19. 19 https://wordpress.org/plugins/cloudflare-flexible-ssl/
  20. 20 https://blog.cloudflare.com/introducing-universal-ssl/

↑ Back to top Tweet itShare on Facebook

Emerson is a designer, developer, and problem solver. He has been working on the web since 2006. He is currently the CTO of TransitScreen.

  1. 1

    Very well written guide, but for the HTTP redirection I thing It would be easier to use the “Page Rules” provided from CF. It’s much easier to setup and maintain.

    Example rule would be to have:
    If the URL matches:
    http://sitename.com/*
    Then the settings are:
    Always use HTTPS

    0
  2. 2

    Luke Alford

    June 21, 2016 9:32 am

    Why CloudFlare when https://letsencrypt.org/ is just as easier and is a far better certificate…. This article would of made sense in 2012, not 2016 when there are far better free options.

    17
    • 3

      Most people have a virtual server where only one cert can be active per IP. And server-wild cards are not possible with letsencrypt, as I know? :-/

      -4
      • 4

        For this exact reason, you need to use the “Flexible” SSL setting because encryption terminates at CloudFlare.

        0
      • 5

        If you have your own server, use SNI; if you’re using someone else’s get them to enable SNI. Very little still fails to work with it, and you can have multiple SSL sites on the same IP.

        3
    • 6

      Some hosts (like site5) don’t offer let’s encrypt as an option yet. Because of this, for anyone using a Web host like them, the flexible ssl option is the best route (aside from buying an SSL)

      3
    • 7

      Let’s Encrypt looks cool but I think calling it “easier” is a bit misleading considering it requires installing things and actual understanding of certificates etc.

      6
  3. 10

    Nice and comprehensive post.. You can also use self signed certificate to secure just the WordPress admin or dashboard. Here’s the step by step tutorial http://viralpatel.net/blogs/secure-wordpress-admin-https-self-signed-certificate/

    -3
  4. 11

    Jesse Ryles

    June 21, 2016 9:54 am

    Hey Guys,
    Great article, however it is much simpler to install the “Really Simply SSL” plugin found on the WordPress plugin repository to update your site to SSL.
    You can also encrypt from your webserver to Cloudflare by installing the origin certificate provided by Cloudflare on your server. This ensures that there is full encryption between your website and Cloudflare and not just Cloudflare and the visitor.

    7
  5. 12

    Frane Cvitanic

    June 21, 2016 10:10 am

    Thank you, Emerson. Very useful article. A lot of small tips & tricks which can easily improve WordPress sites we’re working on.

    2
  6. 13

    One big snag is that people mostly wanting this will be those running their WordPress sites as ecommerce sites (WooCommerce).

    Unfortunately WooCommerce is not compatible with Free SSL from CloudFlare, unless I am mistaken. Neither are some other ecommerce systems.

    I happened to read an article yesterday about the subject but struggling to find the link..

    0
    • 14

      The issue is less that Flexible SSL from CloudFlare is “incompatible” but rather it’s inappropriate, because it doesn’t fully encrypt the traffic for it’s entire journey. So credit cards, etc could theoretically get intercepted between CloudFlare and your server.

      1
  7. 15

    I don’t think that the best way you describe to change all values in DB from URL with `http` to `https` is replacing by simple update query. Many websites based on CFT using serialized data, so only one good way is to use tools called `search and replace` from Interconnect IT website

    3
    • 16

      Additionally, some sites use base64-encoded values stored in the post_content field which isn’t addressed by any “search and replace” plugin, including the one mentioned (as far as I can tell.)

      0
  8. 17

    Please, please don’t advocate URL replacement with SQL queries – use an established plugin like Search & Replace that will handle serialized data too.

    And “Flexible SSL Is Not Full SSL” should be a precursor to the article, not buried down near the bottom – you open with “If you have an e-commerce website, then SSL is mandatory “, yet the process (as described in this article) will not address this issue – it’s just feels a bit misleading.

    9
  9. 18

    The guid field should never be changed. It only serves as a unique identifier for content, and isn’t used in any visible way for end users. Changing it might have unexpected consequences, such as causing all content to appear as unread to any RSS clients.

    0
  10. 19

    I think the GUID should’nt be changed.
    See this link: https://codex.wordpress.org/Changing_The_Site_URL#Important_GUID_Note

    1
  11. 20

    Awesome post on migrating to HTTPS, we actually built a tool to help some site owners migrate and find mixed content: https://www.ecommerce.co.uk/httpschecker.html Hope it’s of use.

    3
  12. 21

    Nice guide!
    I had some issues with the “too many redirect” error and with the css still loading from http. Had to look elsewhere to fix it but now it’s working properly.

    Thanks!

    0
  13. 25

    Michael Watts

    June 21, 2016 4:04 pm

    An easier option is to choose a host that offers free Let’s Encrypt SSL. I believe SiteGround and StackPress already do.

    4
  14. 26

    Marco Almeida

    June 21, 2016 5:56 pm

    I do not agree, at all, with the “UPDATING LEGACY CONTENT” section.

    This should be done globally on the database using one of several available tools to perform a “Serialized Search and Replace”.

    Also, if this is not done correctly, when you redirect http to https you are hiding the fact that you may still have non-https URLs on your database and a unecessary redirect is made (possibly on each and every page request).

    2
  15. 27

    Nice guide, but its still not safe MITM/sniffing attacks are still possible so the only thing you do is show an illussion to your client that your site is save. After that do you want to trust cloudflare that much.

    3
  16. 28

    Thanks for the articel, Emerson!

    I’ve followed the steps described and updated “WordPress Address” and “Site Address” urls to have https prefix. However, it broke my site completely, i. e. the site got trapped into a redirect loop, as you described. Any idea what has to be done to revert all things back?

    1
    • 29

      I’m sad to hear that you got trapped my friend. Maybe Emerson or other users can share his thoughts how to fix this issue? Just would like to know if I’ll stuck with the same problem. Thank you in advance!

      0
  17. 30

    Good article, but: I would stay away from CloudFlare, because they’ve been reported to use a rather aggressive “protection” mechanism, effectively excluding most folks using anonymization or pseudonymization services.
    This would exclude eg. Chinese users, who sit behind the Big Wall and have to rely on Tor for anonymity, journalists, and just about anyone who does not want to be tracked, processed and so on because of privacy (or spam) concerns.

    Thus, turning your efforts into a nasty, paradoxical twist: You want secure sites, to protect privacy and your data, but exclude those you want actually protected .. :(

    cu, w0lf.

    ps: also see The Trouble with CloudFlare and Cloudflare vs Tor: Is IP Blocking Causing More Harm than Good? (but a quick look up on your preferred search engine will reveal quite a bit more ..)

    0
  18. 31

    Honestly, I prefer the project Let’s Encrypt as it has the objective to provide free encryption to all websites (and more secure browsing for everyone) without much registration. The only factor being that you have to host your own server presently to do this. But it’s amazing and worth noting!

    0
    • 32

      RoseHosting

      June 24, 2016 4:47 pm

      Another factor is that Let’s Encrypt certificates are only valid for 90 days and the automatic renewal procedure is a little bit tricky to implement.

      1
  19. 33

    David MacLaren

    June 22, 2016 10:41 am

    Good article. Anything that helps improve peoples awareness of security should be applauded.

    You can buy domain validated SSL certificates for less than $10 per year.. why would this pose a problem and make people want to wait for LetsEncrypt.. ? which is certainly not ‘easy’ and may also not proliferate quite as fast as everyone first expected. Great for the future with increasing M2M communications, but not prime time just yet.

    At this point all traffic should be under https to deter the bulk of the people who understand enough to sniff your traffic.. a determined, skilled malcontent can usually get past all but the most heavily secured traffic/sites.

    The reality is that nothing is truly secure these days but you can protect your sites and traffic enough to make it much harder to breach, for a trivial cost.

    Google rarely has the interests of anyone other than Google in mind, but I think that encouraging everyone to use https is a fine idea, and they are one of the few companies in a position to enlighten the vast number of people who are otherwise unaware of the need for improved security.

    2
  20. 35

    I guess this step is never going to work actually, because I have tried all sorts of option and this is not working. First would be to install a certificate on your host and then next would be to use lets encrypt. Do not even think about cloudflare.

    -1
  21. 36

    While this is an easy fix, one thing you don’t have control over is what other domain names are associated with the certificate your site uses. So when a user hovers over the green lock icon, they will see all the domains that are validated with this certificate.

    Since it’s free, there’s a strong possibility you will see some domain names in there you may not want to be associated with. Unless you decide to pay for a SSL through Cloudflare, there’s no way around this.

    That’s why we dropped the Cloudflare SSL and use LetsEncrypt. Yes, it’s slightly more difficult to setup, but it’s worth it to us to have a cert dedicated to our site and not associated with other “free” sites.

    0
  22. 37

    Michal Bluma

    June 24, 2016 2:45 pm

    As Marco mentioned, be very careful with the SQL commands in the article. They aren’t safe / don’t cover serialized data.
    Always use a tool like https://interconnectit.com/products/search-and-replace-for-wordpress-databases/ that deserializes, replaces and serializes back the data.

    1
  23. 38

    Max Kostinevich

    June 24, 2016 4:17 pm

    I’ll try to be honest, but if you have an e-commerce website and you REALLY CARE about your customers (and their safe & security), you shouldn’t ever use flexible SSL from Cloudflare.

    PositiveSSL costs just ~$10/year, I think it’s more than affordable price for an e-commerce website. And Let’s Encrypt will be supported by almost all hosting providers very soon (official cPanel plugin is on the way).

    The second point is that you probably don’t need to update database, after installing an SSL you just add a few lines into your htaccess file and it works fine.

    And the last point I’d like to mention is that just make sure that your hosting is PCI-Compliant before putting e-commerce website there.

    1
  24. 39

    > UPDATE wp_posts SET guid = replace(guid, ‘http://yourdomain.com’,’https://yourdomain.com’);
    UPDATE wp_postmeta SET meta_value = replace(meta_value,’http://yourdomain.com’,’https://yourdomain.com’);

    > 2016

    I hate WordPress, for this is…

    0
  25. 40

    Just, no.

    This is such a sketchy article, who’s checking these over?

    1
  26. 41

    Um, thanks so much. I needed this for my site and had no idea CloudFlare was capable of this

    0
  27. 42

    Gaurav Verna

    July 5, 2016 7:14 pm

    Cloudfare is best free CDN for WordPress blog. It has many featured feature. Https is consider as a ranking signal but I have one doubt, https is useful for blog or not . You can read more about WordPress at

    http://techshiny.com/category/wordpress/

    0
  28. 43

    While this is all fine and dandy, most DIY users I find that are struggling with SSL are the users who are not as comfortable diving into the code… We tend to steer towards cloudflare with a few supporting plugins to integrate an SSL into woocommerce with no coding necessary. It may not be as secure as some people would like, but I’ve found with Stripe’s SSL and Cloudflare, we have been running for a year with no problems. My team and I recently published an article on how to add a free SSL via cloudflare , that is compatible with woocommerce and stripe. Feel free to check it out or share your thoughts on our site! Feel free to share our research with your readers!

    Free SSL And Stripe Payment Gateway For Woocommerce

    1
  29. 44

    Bhagwad Jal Park

    September 23, 2016 4:31 pm

    You don’t really need to change your site’s address to https in Settings -> General, if you rely entirely on CloudFlare. You can also skip the .htaccess part by using CloudFlare Page Rules. This way, you leave your site (mostly) intact. It’s easier to revert that way.

    Here’s an example: https://www.wp-tweaks.com/convert-wordpress-to-https-ssl-free/

    0

↑ Back to top