Converting a Website to SSL (https://)


With changes to web browsers (Chrome in particular) coming soon that will mark non-SSL (http://) websites as Not secure, now is the time to consider upgrading your site to SSL encryption.  The first part is getting an SSL certificate and adding it to your hosting account.  However, you also have to check through and adjust your site for optimal results.

In most cases, switching to SSL will not outright break a site, but its not impossible in some cases:

  • Chrome and possibly some other browsers will not show a non-SSL page in an IFRAME of an SSL page.  Unlike other types of security issues, Chrome will not let the user bypass or ignore the issue on non-SSL page in an IFRAME, so the user will be completely blocked from getting to the IFRAMEd content.

  • Custom code might break if it dissects page URLs and doesn't treat "http://" and "https://" as the same site, or has been coded to only work with http:// URLs.

The more common issue is a page being flagged as having mixed content, which means that something included on an SSL encrypted page (an image, a video embed, a CSS file, a JavaScript file, etc.) is being loaded from a non-encrypted site.  A lot of times, this is due to a local resource having been added to the page with a fully qualified URL (e.g. instead of using a relative URL (e.g. /styles.css).  Updating those URLs will fix the problem, though finding them can be a challenge.  Getting comfortable with your favorite browser's development inspector can help a lot, as many have a Network feature to let you see all of the files being loaded by the page and which ones were SSL encrypted and which ones were not.

There are other places you should check to optimize your site:

  • Menu bars often have fully qualified links added to them, so check for ones that can either be shortened to a relative link or updated from "http://" to "https://"

  • Redirects in .htaccess files are sometimes entered as fully qualified links.  Once again, they should be made relative or updated from "http://" to "https://".  If your content management system has its own redirection system (e.g. the Drupal 7/8 Redirect module), you may need to check its tables for URLs that need to be updated in the same way.

Certain applications may need a little assistance:

  • WordPress has two settings on the General settings page:  WordPress Address (URL) and Site Address (URL).  Both need to be updated to begin with "https://"

In most cases, you'll not only want to clean up the links and settings of your site, but also redirect all of your non-SSL traffic to your SSL site, and content systems don't typically handle this for you.  To cover all of your bases, it's good to add the following to your site's .htaccess file, ahead of any other Rewrite Engine rules:

RewriteEngine on
# This forces the visitor to the non-www.* address *before* forcing them to SSL
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [L,R=301]
# This checks to make sure the connection is not already HTTPS
RewriteCond %{HTTPS} !=on
# This rule will redirect users from their original location, to the same location but using HTTPS.
RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L]

One final tip: if you control any other websites that link to the site you're upgrading, you should go into them and update those links from "http://" to "https://", and also make sure they're using the version of your site's domain name that matches your SSL certificate (in most cases, this will be a version without "www." at the beginning.)