Mixing in social media while avoiding mixed content warnings

If you’ve ever had the thrill of integrating external content into your website, you’ve likely run across the mixed content warning issue. In short, one can link to non-secure content from a secure page, but anything that would result in content being loaded from a non-secure source (a common example being an image URL) will likely cause a mixed content warning of some type in a user’s browser, when the page is served over HTTPS.

It’s generally fine to load HTTPS content in an HTTP page, of course. This means that when including content in a page, one can consider either replacing HTTP links with HTTPS ones, or using protocol/scheme-relative URLs. If a resource can be served over HTTPS, it’s a good practice to use HTTPS URLs at all times in website content. This avoids the problem of protocol-relative URLs when a resource either cannot be served over HTTPS (or, sometimes, HTTP), or where the URL is different depending on the protocol.

That last problem is rare, but unfortunately not non-existent. A prominent example occurs with Pinterest, which serves each pin’s images over both HTTP and HTTPS–but when using the latter, one must include an extra “s-“, for example:

https://s-some-really-long-url-stuff/and-more-stuff-etc.jpg

Unfortunately, when retrieving results using the Pinterest API, URLs for images (for both avatars and pins) are returned only in the non-secure flavor. Thus for Pinterest-API content included in a page presented over HTTPS, URLs should have the protocols switched to HTTPS, but also the extra “s-” must be added.

Luckily, most of the other big social media sites (Facebook, Twitter, YouTube) serve images at URLs returned by their various APIs just fine via HTTPS, with no funky differences between URL formats for HTTP and HTTPS.

Advertisements