Securing your site has never been easier. SSLs are easy to purchase and are now more affordable than ever. Sometimes, though, when you set up an SSL certificate for your site and migrate your site to the HTTPS protocol, things don’t go as planned.
In this post we’ll look at common SSL configuration errors for WordPress websites and how you can make sure your site is up and running in no time.
Configuring your SSL Certificates
SSL certificates (technically, Transport Layer Security protocols, but we’ll use SSL for short) provide a layer of encryption for your website. As we explain in another post, SSLs provide a layer of trust about the content on your site and the transactions that occur.
The first step is to purchase an SSL certificate from a trusted provider (such as Namecheap), and install it on your site.
To configure the certificate, you then need change your site’s URL to use the HTTPS protocol.
What are Mixed Content Warnings?
Just because you’ve configured your website to use HTTPS links instead of HTTP, there may still be links within your site that are hard-coded to display links as HTTP.
If there are still internal HTTP links, browsers will block active mixed content on your site, and your site will suffer from potential slowdowns, lowered Google rankings, and data could still be compromised.
In other words, it’s important to fix all HTTP links. These can occur within theme files, as part of a custom field, or in a plugin file. They can also appear as links to images.
Mozilla offers a test page you can view to see what a mixed content warning looks like. You’ll note that in addition to the SSL green bar, in many browsers there will be an additional notification of the issue in the browser bar.
For example, in Chrome it might look like this:
And in Firefox it might look like this:
Notice the shield with the red X on the first one, the green padlock with the warning sign in the second? Both indicate that the SSL is compromised by the existence of mixed content on the site.
Why Are These Warnings a Big Deal?
SSL certificates protect transmitted data. They reassure your customers that the data coming from your site to their browser is legit, and that everything they submit (passwords, credit cards, addresses, etc.) is encrypted and secured.
Security holes pop up when your website says you serve secure content, but you have non-secure links. When a secure page is forced to obtain content from an insecure source, it creates an opportunity for hackers to inject malicious code that could expose everything that the secure site is trying to protect.
Because of this risk, web browsers often block mixed content. Not blocking that content violates the trust that an SSL establishes, makes a website vulnerable to malicious action, and exposes personal data to outsiders. People want to know that what they see on a web page is what’s intended to be there.
How Do You Find These Errors?
These are the culprits which will cause your site to generate mixed-content warnings.
Here are some quick checks that can help you figure out where the mixed content originates.
- Did you copy & paste a script into your theme’s header.php file or functions.php?
- Does the script have a URL in it that has http?
- What about a css background image?
- Does the value for the background use http?
- Did you paste an iframe into a page? Is that using http?
- Are your image files being referenced with HTTPS or HTTP?
For example, when you examine the HTML code for your website, you might find code directing to insecure links that look like this:
Rather than the secure version, that looks like this:
You can also find issues by using your browser’s inspector console. In the console it should list out each item that was requested over http. This will help you zero-in on what’s causing the problem. Find the culprits (and change these to https.
You might also download your theme and search through the codebase using an editor like Atom, which allows you to search through many files at once. Look for “http://” anywhere inside img links, css files, and so on.
How to Fix Mixed Content Errors
If the problem is relatively minor, you might be able to resolve it by changing the URL in one or two locations.
Using relative links to resources on a site is a good practice. These links will follow the same protocol as the site itself:
If it looks like you have a lot of links to change, a database search and replace tool might come in handy. One you can try is the free and open source tool Search Replace DB. A note of caution: ALWAYS back up your website content and database (which may be a two-step process depending on your backup procedure) before running a database cleanup tool.
How to Learn More
Namecheap offers a variety of Comodo SSL certificates. You can learn more about your options and how to set them up on your site through our website. If you need further assistance with configurations, you might take a look at our SSL Frequently Asked Questions. And for help understanding Mixed Content Warnings, check out Mozilla’s helpful guide.
Building relationships is key to any successful partnership, be it in business or life in general. At Crowd Favorite, Pat Ramsey gets to do that every day as Director of Ongoing Client Support. When he’s not building websites, Pat can be found organizing the Austin WordPress Meetup or helping with the tech networking community, Refresh Austin. He’s been a trainer and advisor for Knowbility’s Accessible Internet Rallies and AccessU, and a founder the WordPress conference “after-after” party, CigarCamp. Pat is a former Navy Reserve sailor, a native Texan, and enjoys cooking large quantities of crawfish.