HTTPS with Cloudflare – Secure Your Website

httpsjavascriptpage-contentsecuressl

I'm trying make my magento webshop work through HTTPS. I already have an SSL certificate.

This is what I've done:

In the backend (System > Configuration > Web > Secure Tab) I've changed the Base URL to https://mydomain.be .

My base Link URL: {{secure_base_url}}
Base Skin Url: {{secure_base_url}}skin/
Base Media URL: {{secure_base_url}}
Base Javascript URL: {{secure_base_url}}js/

I've changed the setting Use Secure URLs in Frontend to Yes. The problem is when I surf to https://mydomain.be I get the following errors (my css/js/images files aren't loaded):

example js: Mixed Content: The page at 'https://mydomain.be/nl/home' was loaded over HTTPS, but requested an insecure script 'http://mydomain.be/js/mage/translate.js'. This request has been blocked; the content must be served over HTTPS.

example image: Mixed Content: The page at 'https://mydomain.be/nl/home' was loaded over HTTPS, but requested an insecure image 'http://mydomain.be/media/catalog/product/cache/13/image/9df78eab33525d08d6e5fb8d27136e95/k/l/klorane-douchegels-2_1-gratis_13.jpg'. This content should also be served over HTTPS.

example css: Mixed Content: The page at 'https://mydomain.be/nl/home' was loaded over HTTPS, but requested an insecure stylesheet 'http://mydomain.be/skin/frontend/base/default/css/print.css'. This request has been blocked; the content must be served over HTTPS.

I also have a problem that when I set the option Use Secure URLs in Admin to Yes I get the following error when I try to access the backend:

ERR_TOO_MANY_REDIRECTS

What else do I need to do to make this work?

Best Answer

The first issue you mention is the mixed content. There's a couple things it could be.

The first is make sure you're scope is correct in the admin panel. When you go to System->Configuration->Wed, are you viewing on the default scope or the website scope? If you're viewing on the default scope, switch to the website scope and see if it's inheriting from the default. If so, switch to the store scope check the same thing. It's possible the website scope isn't inheriting from the default scope and the default scope is where you made your initial change to HTTPS.

The second possibility for the mixed content could be due to the fact that you're site isn't using 100% HTTPS. When you type HTTPS into the browser, you're manually loading an HTTPS page which can cause issues if you're unsecure base URL ins't HTTPS. I've seen lots of times when I do that and none of my CSS, images, JS, etc load because of mixed content. For some reason, when you type HTTPS for a page that's "normally" just HTTP, Magento builds the URLs necessary to pull in the resources using just HTTP because that's what the unsecure base URL is. Try flipping your unsecuire base URL to HTTPS and reload the site and see if those errors go away. If so, then you'll know what it is.

The last option that it could be is you could have just plain old hardcoded URLs in your template files. I'm not 100% sure how custom your shop is, but if someone hardcoded a URL in the page, then nothing you do in the admin panel will fix that. You'll have to track down the problematic URL in your code and fix it there.

For you're redirect loop issue, I had the exact same issue a few weeks back when I was plugging one of my stores into Cloudflare for the first time. To fix the issue, we had to add the following block of code to our index.php file before the Mage::run command in order to get rid of the redirect loop:

foreach (array(
    'SERVER_PORT' => 443,
    'HTTP_X_FORWARDED_PROTO' => 'https',
    'HTTP_CF_VISITOR' => '{"scheme":"https"}'
    ) as $key => $value) 
{
    if (isset($_SERVER[$key]) && $_SERVER[$key] == $value) {
        $_SERVER['HTTPS'] = 'on';
        break;
    }
}

Essentially what that block is doing is it's telling Magento that the SSL termination already happened (in Cloudflare) and even though the request is coming across port 80, or via HTTP, that it should treat the request as if it's a HTTPS request. I've had to do similar things with my store from day one since it lives behind a load balancer that does the SSL termination. But the principle is pretty much the same.

Related Topic