How to Move Your Website to SSL

Checklist of things to do when changing a site from HTTP to HTTPS


How to Move Your Website to SSL (ie, Convert from HTTP to HTTPS)

by Christopher Heng, thesitewizard.com

One of my visitors recently told me that he wanted to convert his website from HTTP to HTTPS and wondered if I could write an article on the things he needed to watch out for. This article weighs the pros and cons of moving a site to SSL and provides a checklist of some things you need to remember to do.

Benefits of Using SSL for Your Website

To make sure we are all on the same page here, "SSL" refers to the Secure Socket Layer certificate (or SSL certificate) installed on websites that lets visitors access them with a URL (web address) that starts with "https://" instead of the usual "http://". They are obtained from a Certificate Authority ("CA" for short), which may be a commercial entity like GoDaddy (or probably any of the other domain registrars and even some web hosts), or one of the free certificate authorities like Let's Encrypt.

SSL certificates are not only useful for sites with order forms where users have to enter their credit card numbers. While it's true that the latter must have SSL, the cert also has benefits for a normal website.

Disadvantages of Moving to SSL

Converting the Whole Site in One Go Versus Moving to SSL in Stages

If you have a big site that is mission critical, you may be worried about moving the whole site to SSL in one go. Moving in stages allows you to test the conversion process, and learn from the mistakes made before it affects the rest of the site. This is especially so if it is the first time you are converting a site to HTTPS.

It was also what I did with thesitewizard.com, which was the first major site I moved to SSL. While it did help me iron out some small oversights here and there, such as allowing me to spot places where I forgot that I needed to update (such as my internal site search form), in hindsight, I don't think the staggered conversion was really necessary here. In the end, after a few stages which only covered about half the site, I got tired of the process and just moved the rest in one fell swoop.

For thefreecountry.com and howtohaven.com, having learnt from my experience with thesitewizard.com, I did everything in one go.

For the kind of sites that I'm talking about (information resource and tutorial sites), I found that converting the entire site to SSL in one step was less work, allowing me get everything working smoothly together instead of having to coordinate between the HTTP and HTTPS sections.

Where the search engines are concerned, I didn't really notice any difference in effect between the two methods.

How to Convert from HTTP to HTTPS

Note that if you don't have a website yet, and are planning to have one, it is probably a good idea to use HTTPS from the very start. It's what the whole of the Internet is moving towards, so chances are that you will end up doing it sooner or later. Using SSL for your site from the very start will save you the hassle of having to convert things later on. If you are in this boat, you only need to follow my first point below while carrying out the other steps given in How to Create a Website.

  1. Get an SSL certificate and install it

    As mentioned earlier, an SSL certificate can be obtained from many places, such as from one of the domain registrars that sell it, or from a free certificate authority.

    You may not even need to get a certificate from an external source. Some web hosts (like 1&1 and DreamHost) provide it free of charge, while others (like FutureQuest) supply it for a small one-time setup charge. Note that I'm not going to list out all the web hosts that provide this service, since you can just check them out for yourself. (I don't want to have to keep updating this paragraph, since I'm sure more and more web hosts will include it in their package over time, if only to remain competitive.)

    Incidentally, if you are considering getting the free Let's Encrypt certificate like I did for thesitewizard.com, you should probably only go for it if you have a web host that supports its automatic renewal. Unlike the commercial SSL certificates, which are valid for 1 to 3 years and so only needs to be renewed once in a long while, the Let's Encrypt certificate is high maintenance. It expires every 3 months, and requires you to run special software to get it updated and installed. It's not only a hassle, but the manual process also requires some technical knowledge and access to the web server configuration files. Web hosts that support it run a script on their end that does everything automatically, including renewing the certificate when it's near the expiry date and installing it, which is why I said that you should only use it on such hosts. In the latter case, once you enable the certificate, you don't have to worry about its renewal again.

    For those who bought a commercial cert, you will have to ask your web host to install it. An SSL cert is not something you can install yourself, unless your site is on a dedicated server or the like. You will probably have to send it to their support email address. Or they may have a special form that you need to use in their control panel.

  2. Update all internal absolute links on your site

    Search for all instances of "http://www.example.com" and replace them with "https://www.example.com" (where www.example.com refers to your domain) on the pages of your site (including your 404 and other error files, if you have them). Remember to do the same if you have scripts that embed your URL (such as your contact form script, including the one generated by the Feedback Form Wizard) and any other types of files (such as XML files) that you may have.

    If your web editor lacks the capability to a search and replace across multiple files in one go, use a specialized search and replace tool. I personally use a commercial program called PowerGrep but there are numerous free ones listed on Free Text Search and Replace Utilities page which will also do the job.

    If you have the habit of sometimes referring to your site as "http://www.example.com" and other times as "http://www.example.com/" (with a "/" at the end), remember to search for "http://www.example.com" and not "http://www.example.com/". The former will catch all instances of your URLs, while the latter will miss those addresses that don't have the final slash. And if you also sometimes link to your site as "http://example.com", without the "www", remember to replace those instances too. Incidentally, you should ideally standardize on using either the "www" form or the plain domain name form.

    You should still perform the above search even if you normally use relative links (ie, links like "some-page.html" instead of "http://www.example.com/some-page.html") to refer to your internal pages, in case there was an occasion in the past where you absent-mindedly used the full URL.

    If your site is not a static site, created with a web editor, but is instead managed by a content management system (or CMS) or a blogging program, you may have to update your URLs from within that script's interface. You may also need to manually modify its configuration file to get the software to realize that you have changed web addresses.

  3. Update "src" links in embedded images hosted on other sites

    Now search for all instances of <img src="http://. In fact, you may even need to search for their equivalent, like <img src='http:// or <img src=http:// and cases where the src attribute does not immediately follow the img tag.

    This is to catch embedded images with external sources, that is, pictures which you embed on your site but are hosted elsewhere. You will have to change those URLs to their https equivalent. For example, if you have linked to thesitewizard.com (or any of my sites) using a button or banner from my Link to Us page, you should update the code to use the "https" equivalent.

    (Note that the above paragraph is not a subtle hint for you to use the buttons or banners. I actually prefer if you link to the specific articles on this site that you found useful than to use those old buttons and banners that I created decades ago, and which I now find slightly embarrassing. They are a product of a different era, back when everybody created such things.)

    What happens if the site hosting the images does not have an HTTPS version of the URL? One way is to ask the original site if they will allow you to host the image yourself. Alternatively, instead of embedding the image on your site, you can just use a normal text link to point your visitors to the external site where they can view the image themselves.

    Leaving an embedded image linked to without HTTPS will lead to your page having a broken padlock icon (or its equivalent) in your visitor's browser or perhaps not even having a padlock icon altogether. (How it is depicted depends on the browser, and in fact, even varies from version to version of the same browser.)

  4. Update all embedded form action attributes

    Similarly, if you have a form where the action attribute points to a "http://" resource, you will also have to replace those with their HTTPS equivalent, if available. Obviously if all your scripts are hosted on your own site, you will not need to take this step since those URLs will already have been updated in your first step. It only applies to forms invoking remotely hosted scripts.

  5. Update all externally hosted JavaScripts

    Another thing to look out for are the externally hosted JavaScripts that your site may use. You may not think of them as JavaScripts, but some facilities provided by other websites for use on yours are delivered via JavaScript. This includes advertisements (including Google AdSense), embedded videos, web statistics, some CAPTCHA tests, and many more. There is even at least one web font service that delivers its fonts via JavaScript.

  6. Update any other externally hosted resources, eg CSS

    Besides JavaScripts, you should check for any other resources loading on your web page that is hosted elsewhere. This includes Cascading Style Sheets (such as those used by some web font services).

    So that you don't get confused. I'm not referring to normal links to other sites here. Those can be either "http://" or "https://". It doesn't matter, since they do not load things from those sites on your page. Only things that actually get loaded need to be changed. They need to be delivered using HTTPS like your page.

  7. Final search

    Do a final sweep through your pages by searching for "src="http://" and manually examine each instance to see if they are things you need to update.

  8. Update your search engine sitemaps and robots.txt

    If you have a search engine sitemap using the Sitemap protocol (note that I'm not talking about a Site Map that is designed for humans, but the XML one meant for search engines), update all the URLs there (unless it has already been updated in your first step).

    Remember also to change the link in your robots.txt file so that it refers to your sitemap file using HTTPS.

  9. Update the hotlinking prevention lines in your .htaccess file

    If you have lines in your .htaccess file to prevent others hotlinking your images and other files, you will need to update them to include your SSL URLs. Otherwise the pictures will no longer load on your site.

    For example, if your code is based on the sample I gave in my anti-hotlinking article, you will have to modify it as follows:

    SetEnvIfNoCase Referer "^http://www.example.com/" locally_linked=1
    SetEnvIfNoCase Referer "^http://www.example.com$" locally_linked=1
    SetEnvIfNoCase Referer "^http://example.com/" locally_linked=1
    SetEnvIfNoCase Referer "^http://example.com$" locally_linked=1
    SetEnvIfNoCase Referer "^https://www.example.com/" locally_linked=1
    SetEnvIfNoCase Referer "^https://www.example.com$" locally_linked=1
    SetEnvIfNoCase Referer "^https://example.com/" locally_linked=1
    SetEnvIfNoCase Referer "^https://example.com$" locally_linked=1
    SetEnvIfNoCase Referer "^$" locally_linked=1
    <FilesMatch "\.(gif|png|jpe?g)$">
      Order Allow,Deny
      Allow from env=locally_linked
    </FilesMatch>

    Remember to change all instances of www.example.com and example.com to your domain. If you are not sure what the above code does, please read the original hotlinking guide (which has been updated to include the SSL versions of the URLs).

  10. Upload and test the site

    When you are done, upload your site and test it in one or more of the major browsers (Chrome or its derivatives, Firefox, Internet Explorer and Edge).

    If you don't see the padlock icon, or it's a broken padlock or some such thing, it means that your web page has loaded some element with "http://" instead of "https://". Go through the HTML source of the page and make sure all forms, images, embedded videos, CSS, JavaScripts, etc, are loaded with "https://".

    Note that you should not just test one page and assume that everything is fine with the rest of your site. If different pages on your site have different elements, you probably should at least check a representative of each type of page.

  11. Modify your .htaccess file to redirect your visitors to the SSL version of the site

    Once you are sure your site works fine under SSL, you can redirect people who go to the HTTP version of the site to its equivalent HTTPS page.

    This is optional, and there are pros and cons associated with doing it.

    Not automatically directing people to the HTTPS version has the advantage that people who cannot load the SSL version (eg, those who use obsolete browsers) can still use your site.

    Automatically redirecting has even more advantages: it tells search engines that the URLs on your site has moved in a way that tranfers the rank of the old page to the new. People accessing your site will also discover the availability of the SSL version and will automatically use it. In addition, Internet service providers cannot force their customers to use your HTTP version and then modify the content on your page to add their advertisements (or whatever).

    To automatically redirect, you will have to modify your server configuration. If your site is hosted on an Apache server, add the following lines to the .htaccess file in the root (ie, topmost) web directory.

    RewriteCond %{HTTPS} !on
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

    If you don't have a .htaccess file there, create one using a plain text editor (also known as an ASCII editor). Windows users can use Notepad found on their system, although if you do, remember to save your file as ".htaccess" (including the quotes) otherwise Notepad will change the filename to ".htaccess.txt" behind your back.

    The .htaccess given above causes the server to check if there is a variable called "HTTPS" with the value "on". This variable is automatically set to "on" if the visitor connects with HTTPS, and to "off" otherwise. If the test fails (ie, the value is not "on", implying that HTTP was used), it changes the URL so that it begins with "https://" and redirects the visitor there.

    Don't worry if your web host gives you a different set of directives to use in your .htaccess. There are many ways to do this, including checking if the HTTPS variable has the value of "off", looking to see if "http://" occur in the URL, checking the port the browser connects to and probably others. They all have the same end result. If in doubt, just use the code your web host gives you.

    If your site is hosted on a different web server (that is, not Apache), you will need to ask your web host for how you can implement this. The above code only works on an Apache server with the mod_rewrite module enabled.

    In addition, if your .htaccess file has lines redirecting users from your plain domain name to its www version (or vice versa) (eg, from example.com to www.example.com), remember to change the redirected form to "https://". This is optional, but if you don't, and your visitor goes to (say) "example.com", he/she will first be redirected to "http://www.example.com" and then, immediately after, to "https://www.example.com". It's not really a big deal, but it will save one step of redirection.

  12. Update your account in Google and Bing

    If you have a webmaster console account at Google and its equivalent in Bing, it won't hurt to update it with your new URLs. For Google, you will first have to submit the HTTPS version of your site as though it's another site and do the verification for it (to prove you are the webmaster).

That's it. You can now sit back and enjoy looking at the padlock icon on your web pages.

Copyright © 2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Move Your Website to SSL (ie, Convert from HTTP to HTTPS)





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.