When using a CDN in conjunction with HTTPS / SSL, customers often find that the CDN product they use lacks an HTTPS endpoint, or the one provided is different from the standard, non-HTTPS one.

One simple solution to this would be to force the loading of your CDN assets via HTTP like so:

This leads to one other issue, however…

Why dont I see the Blue/Green Bar?

When a page and all of its assets are served over HTTPS, modern web browsers provide a visual indicator—usually in green or blue. This is designed to provide visitors with the confidence to shop or register on your site.

When your HTTPS pages are served with “mixed content” (as it sounds, this is a situation in which HTTPS and HTTP assets are both being loaded on a single page, this indicator does not appear. This could happen for any number of reasons — all beyond the scope of this article — but there’s a simple solution for addressing this with only a few short lines of code.

Disabling CDN on HTTPS pages only

W3 Total Cache ships with documentation (Performance > FAQ) that provides instructions on disabling each of the caching types. Combined with a simple PHP function and WordPress hook, we’re able to conditionally disable the CDN for pages that utilize HTTPS.

Add the following code snippet to your theme’s functions.php file:

add_action('wp_head','nocdn_on_ssl_page');
function nocdn_on_ssl_page() {
if ($_SERVER['HTTPS'] == "on") {
define('DONOTCDN', true);
}
}

This of course assumes that you have W3 Total Cache active and that the only assets being served over HTTP are originating from your CDN (otherwise, you might need something like this). When you reload a page being served over HTTPS, you should notice that the familiar green / blue indicator appears in your address bar.

Note: we’ve found that MaxCDN‘s SSL support and easy integration with W3 Total Cache provides a solid solution for many customers.