CODEWITHSUNDEEP
magentohttpsmixed-content
Holly
Holly

Reputation: 7752

https Mixed Content errors

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.

Upvotes: 3

Views: 18703

Answers (2)

Luke
Luke

Reputation: 1

I got the exact same error while adding products to cart, I was deploying CDN for Magento 1.9 let me share my solution,

Accoriding to Chrome Console, the URL returned by js about ajaxcart started with HTTP , so I go to review the parameter construture I found this :

js/cmsmart/jquery/ajaxcart/cmsmart-ajaxcart.js: var myajaxcart = baseUrlAjax + 'ajaxcart/index/index/id/';
js/cmsmart/jquery/ajaxcart/cmsmart-ajaxcart.js: var urladdajaxcart =  baseUrlAjax + 'ajaxcart/index/index/';
js/cmsmart/jquery/ajaxcart/cmsmart-ajaxcart.js: var checkouturl =  baseUrlAjax + 'checkout/cart/add/';

and baseUrlAjax is controlled by PHP echo $url

app/design/frontend/default/theme691/template/cmsmart/ajaxcart/page/head.phtml: var baseUrlAjax = '<?php echo $url; ?>';

and $url is controlled by

app/design/frontend/default/theme691/template/cmsmart/ajaxcart/page/head.phtml   >>> 

#$url = Mage::getBaseUrl();  #oldone 
$url = Mage::getUrl('',array('_secure'=>true)); # set to this new one

Bingo!

Reffered to this page : How Do You Get The Store Secure URL in Magento?

Upvotes: 0

Holly
Holly

Reputation: 7752

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/

Upvotes: 11

Related Questions