https Mixed Content errors

Question

We're getting allot of Mixed Content errors on the cart page of our Magento Store

 Mixed Content: The page at 'https://www.magento.com/onestepcheckout/index/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Lato:400,300,700,900'. This request has been blocked; the content must be served over HTTPS.

I can see the google font file is being called in the head section of our theme via http

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

I'm wondering what is the best way to solve this issue should I change the line above to:

Option 1

<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

OR Option 2

<link href='//fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

Which is the best method considering most of our site uses http? I was not aware of Option 2, it seems like a very good approach.

Answer 1

I found a good answer here.

The second option, protocol relative links seems to be the best option.

UPDATED ANSWER

To give a more complete answer, protocol relative URLs help to avoid Mixed Content errors by requesting the resource from whatever protocol the browser is viewing that current page through. This is really useful when your site has pages that use both http & https, as in my case checkout page was being loaded over https while the rest our site uses http.

Example

So if we use a protocol relative url to link to a resource.

<link href='//fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

When we're on https://www.magento.com/onestepcheckout/index/ the resource will be loaded via https, https://fonts.googleapis.com/css?family=Lato.

And if we're on http://www.magento.com/ the resource will be loaded via http http://fonts.googleapis.com/css?family=Lato

This will avoid any Mixed Content Errors.

Caveats

There are a few things to consider when using this approach though.

1. IE6 does not know how to hanler protocol relative urls. IE6 has less than 1.7% of the browser market.
2. IE7 & IE8 support protocol relative URLs but they’ll end up fetching the resource twice. Once from HTTP and once over HTTPS, which will slow things down. Again, these older browsers account for very little of the browser market.
3. Does not work in all email clients (e.g Outlook), so avoid using protocol relative urls in HTML emails
4. You have to be sure that the server you’re requesting from is capable of serving content over both HTTP and HTTPS. If not you might end up fetching content from an unsecured or nonexistent server port.

Further Reading

https://developer.mozilla.org/en-US/docs/Security/MixedContent/How_to_fix_website_with_mixed_content http://www.paulirish.com/2010/the-protocol-relative-url/ http://billpatrianakos.me/blog/2013/04/18/protocol-relative-urls/