The Promise and Peril of Cloudflare‘s Free SSL
Cloudflare is used on over 20 million internet properties, making it one of the world’s largest content delivery networks. The service offers a popular free plan including SSL certificates, caching, security and more. This widespread adoption is driven by needs for performance, protection, and SSL encryption.
SSL usage itself has climbed rapidly, accelerated by free certs from Cloudflare and others. Around 90% of all traffic is now encrypted web-wide. By default, Google also boosts rankings for HTTPS sites.
However, transitioning sites like WordPress and Joomla to SSL can break things. These platforms power over 40% of all websites online today. Yet they were built in earlier eras without encryption in mind.
The result when activating Cloudflare SSL are often immediate “mixed content” errors. While SSL encrypts traffic from point to point, unsecured resources fail to load on pages. The site then breaks.
The good news? These Cloudflare SSL issues can usually be easily fixed. This in-depth guide covers step-by-step troubleshooting instructions and best practices for both WordPress and Joomla site owners…
Pinpointing Problems – Types of Mixed Content Errors
Let‘s first understand the common mixed content issues that cause sites to break when Cloudflare SSL is enabled:
Blocked Active Mixed Content
This is the most noticeable and severe mixed content error. It happens when a page loads over HTTPS but references scripts, stylesheets, or plugins over unencrypted HTTP. Browsers actively block this for security reasons causing site breakage.
Displayed Passive Mixed Content
Unlike blocked content, most browsers will still show images, videos and other assets loaded insecurely on a HTTPS page. However performance impacts remain. Visitors may also get security warnings depending on their browser.
Insecure Form Target Links
Web forms that submit data to HTTP URLs rather than HTTPS endpoints present another common Cloudflare SSL issue. Visitors get warned of unsecure data transmission, undermining credibility.
Identifying the specific mixed content triggers causing problems is the first troubleshooting step. You can use browser developer tools to pinpoint. Now let’s go through resolutions…
Fixing WordPress Sites Broken by Cloudflare SSL
Most WordPress sites with Cloudflare issues can be repaired in two ways:
- Convert all resources to HTTPS: Manually update old HTTP references in themes, plugins, widgets etc. Anything calling scripts, images or assets needs to use protocol-relative or secure URLs.
- Use the Cloudflare Flexible SSL plugin: This automated plugin handles mixed content for you by dynamically converting resources to HTTPS.
We recommend the easier plugin approach for initial setup. But hardcoding changes provides ongoing management benefits:
- Acts as fallback if the plugin breaks
- Standardizes references for future development
- Boosts performance not having to redirect assets
Using both methods together is a best practice strategy. Here are step-by-step instructions on implementing each fix…
Installing the Cloudflare Flexible SSL Plugin
Below outlines how to install and activate the plugin for WordPress. This takes just a few minutes and immediately resolves many SSL issues:
- Login to your WordPress dashboard
- Go to Plugins > Add New
- Search “Cloudflare Flexible SSL” and install the plugin by Josh Eckhart
- Activate the plugin after installation completes
The plugin actively converts mixed HTTP content to HTTPS as pages load. Most WordPress sites return to normal operation after activating. But we still recommend manually updating insecure references too…
How to Update Mixed HTTP References in WordPress
While time consuming, globally changing HTTP references to HTTPS across your WordPress site is a best practice. This prevents assets from slipping back to plain text transmission while improving performance.
Here is an example workflow:
- Inventory HTTP links: Scan page source code to identify all mixed references. Check HTML, JS and CSS files.
- Update live theme files: Edit Style.CSS and other templates to use HTTPS/protocol-relative URLs for assets likes images, scripts etc.
- Modify plugin source code: For any custom or third-party plugins, change instances of hardcoded HTTP links accordingly.
- Standardize widgets: Edit all widgets and components injecting front-end JavaScript, CSS, media etc. to call these over HTTPS.
While a lengthier process, this exercise eliminates reliance on plugins dynamically fixing links. Test all changes in staging before deploying live. With those WordPress resolutions covered, let‘s move on to Joomla sites…
Repairing Joomla Sites Experiencing Cloudflare SSL Issues
As outlined for WordPress, resolving mixed content problems comes down to:
- Using extensions like the Cloudflare for Joomla plugin to dynamically convert HTTP assets being called
- Or, manually updating old insecure links
We walk through both methods below, prioritizing the quicker automated plugin approach first…
Installing the Cloudflare for Joomla Plugin to Fix Mixed Content
This official plugin by Cloudflare helps seamlessly transition Joomla powered websites to use Cloudflare SSL certificates:
- In your Joomla dashboard, visit Extensions > Manage > Install
- Search “Cloudflare” and install the free Cloudflare for Joomla plugin
- Once installed go to Extensions > Plugins and enable the plugin
Activating the plugin immediately starts serving mixed HTTP content over HTTPS instead. Your Joomla site should restore shortly after. But adding the plugin alone may not catch 100% of asset links…
Changing Insecure HTTP Links to HTTPS in Joomla
To fully eliminate Cloudflare SSL problems in Joomla requires addressing hardcoded HTTP references, just like with WordPress. For example:
- Audit templates in your active template for CSS, JS and media referencing assets over HTTP.
- Review plugin source code to replace instances calling scripts, images etc over unencrypted connections.
- Use protocol-relative links where feasible.
Testing such link changes in lower environments is wise. But once deployed live, this HTTP to HTTPS update combined with the Cloudflare plugin gives Joomla sites reliable SSL protection…
Ongoing Site Maintenance & Best Practices Checklist
Transitioning any existing website to start using Cloudflare SSL can be tricky but usually boils down to resolving mixed content errors. We recommend:
For Smooth Initial Setup
- Activate the Cloudflare plugin for automatic SSL conversion
- Redirect all HTTP traffic to HTTPS with Cloudflare page rules
- Check site health frequently at first to catch any lingering issues
For Ongoing Management
- Update old insecure HTTP references to HTTPS across templates, plugins etc
- Periodically scan site for new non-secure links needing updates
- Test SSL configuration using tools like the free SSL Labs Server Test
- Review Cloudflare’s options for enabling HSTS and other security enhancements
Migrating sites to Cloudflare SSL can seem intimidating but doesn’t need to be. Hopefully this guide serves as a helpful resource for both WordPress and Joomla site owners to address mixed content errors and establish reliable encryption.
