Fix Broken “Mixed Content” WordPress 4.4 srcset (Responsive Images)

One of the newest features (and one of the coolest) to be introduced to WordPress core lately has been “responsive image support”. What does this really mean? To be specific, WP implemented the HTML5 <img> srcset (“source set”) attribute.

When it works properly, this attribute solves a couple common problems in web development. By providing the browser with a list of pre-scaled image resolutions it can choose from, a device can intelligently request the best image for the current screen resolution. If you’re using one of the currently supported browsers on a high-resolution screen, it should automatically opt to use one of the larger images specified in srcset. I’ve been doing a lot of testing on my Nexus 6P, which is nearly 520 PPI. You can really tell the difference on screens like that.

Here’s the problem. If you’re using HTTPS with WordPress, but it isn’t in your SITEURL or HOME variables, you will likely end up with plain old HTTP srcset paths. Visiting the site on unencrypted HTTP will work just fine, but the problems show when you try HTTPS. Suddenly, and only on devices that support and choose to use the srcset, most of your images will fail to load. This is called “Mixed Content” – loading insecure resources from a secure page. It’s a pretty bad thing to do, and because of the security hazards, almost all browsers will completely block requests like this to unencrypted HTTP from an HTTPS session.

So, yeah, great – browsers block your responsive images. You could go all-HTTPS, or go all-HTTP, but their is an option for your particular instance.

What do you do?

Solution A: filter wp_image_calculate_srcset and do an easy-peasy str_replace( ‘http://’, ‘https://’ ) making *all* your srcset images SSL. Use this for CloudFlare support.

add_filter( 'wp_get_attachment_url', 'set_url_scheme' );
add_filter( 'wp_calculate_image_srcset', function($sources) {
 $filtered_sources = array();
 foreach($sources as $source_key=>$source) {
  $source['url'] = str_replace('http://','https://', $source['url']);
  $filtered_sources[$source_key] = $source;
 }
 return $filtered_sources;
});

Solution B: filter wp_image_calculate_srcset and attempt to detect the protocol the page was requested with, then only rewrite to https if the page was loaded securely as well. This is nice if it works in your configuration since you don’t incur any HTTPS overhead loading images on an unencrypted page. However, it will not work with CloudFlare. If you’re using CloudFlare, you should make sure HTTPS is on and use Solution A.

add_filter( 'wp_get_attachment_url', 'set_url_scheme' );
add_filter( 'wp_calculate_image_srcset', function($sources) {
 $page_protocol = ( !empty( $_SERVER['HTTPS'] ) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443 ) ? "https" : "http";
 foreach ( $sources as $size => $source ) {
  if ( stripos( $source['url'], $page_protocol ) !== 0 ) {
   // we can't find the current page protocol at the beginning of the srcset...
   $new_url = str_replace( $source_protocol . '://', $page_protocol . '://', $url );
   $sources[$size]['url'] = $new_url;
  }
 }
 return $sources;
});

Solution C: update siteurl and home to start with https://. This will make your whole site SSL. Please make sure your certs and redirects are all okay before doing this, or there’s a good chance you’ll lock yourself out of your install.

 

RHEL 7 t2.micro AWS EC2 AMI Costs 5x OSS Alternatives

I should have known, honestly. But Amazon makes it seem so affordable to license Red Hat. I thought “Hey, this is Red Hat. I’m a big Fedora user, and I build CentOS servers all the time. Surely Red Hat will be like any of those, just better!”

Unfortunately… I’d never licensed Red Hat previously and had no idea of its cost. Amazon currently lists the On-Demand t2.micro RHEL 7 AMI as a whopping $0.073/hr to run. This results in around a $52.56/month bill just for EC2. To compare, a CentOS t2.micro costs $0.013/hr (~$9.36/month) and has the same specs as the prior, 5.6 times as expense instance. If you don’t need to use Red Hat, for less money you could scale way up to a t2.medium which has 4x the memory of a t2.micro, 4x the rate of CPU credits, and 2x the vCPUs. Even that would only cost you $0.052/hr (~$37.44).

What does this mean for me? Well, I’m certainly not going to pay $640/yr to run pretty much the most bare-bones site I could have right now. And if I was going to spend $640/yr on anything, it wouldn’t be 80% licensing fees to Red Hat.

Please don’t take this as me dismissing Red Hat. They have been instrumental in the development of the OS’s I love so much, as well as the Linux community. I’m sure they’re a great company for enterprise-grade clients.

But now it’s time for me to rebuild my stack, on CentOS this time. I may shrink the server size even further and try out CloudFlare – it sounds like a perfect candidate for what I’m doing here.

Fresh Start

Off to a fresh start on a new infrastructure provider. WP Engine wasn’t going to work out – their SSL costs were much too high. This site is now proudly secured through Let’s Encrypt, utilizing site-wide HTTPS. HSTS preload headers are also set and submitted for inclusion in browser preload lists. This proper implementation of TLS enables secure transmission of data from this server to you.

Screenshot of A+ Rating on Qualys SSL Labs