Getting started with SSL


#1

I followed the instructions on another thread that pointed to this tutorial:

I am testing these steps on a tiny site of mine. Now, something is not working as I expect it to work.

I did the first page rule to direct all the traffic from www.ringthebells.ca to http://ringthebells.ca
That worked.

Then, I added the " Always Use HTTPS" as a page rule (I know, I could have toggled it on the Crypto page). This worked as it directs everything to the https however, now all the formatting is odd, the carousel of images displays all the images one after the other.

So, I removed the Always Use HTTPS rule from the Filter page and didn’t touch it in the Crypto page. Nothing has changed and everything is still directed to the HTTPS.

I even removed the first rule, and everything is still directed to the HTTPS with all that weird formatting.

How should I proceed?

(I am glad to be using only a test site!)


#3

You probably have a mixed content issue, meaning that your sites tries to link to content (scripts/stylesheets/images etc) from a non-https URL. This results in a warning in the browser that the site is not fully secure.

To fix this issue, you need to make sure that all (third party) resources are loaded over HTTPS, and that you only link to content with https:// prefixed.

You may want to consider using the ‘Automatic HTTPS Rewrites’ functionality. In that case Cloudflare tries to rewrite links. Be aware that this not always solves the problem.

This knowledge base articles may also be helpful:


#4

I disabled everything for now.
What is TLS?? What is that for?


#6

OK on the first reference article, it says “Below are indications in the web browser that insecure or mixed content is present for the site requested…” but I am not getting any warning, so what would I check??


#7

Not at all. I have two large sites that I want to set with HTTPS but last time I tried, was a catastrophy so this time, i am testing the process on this tiny site first to understand what I am doing, so yes, I DO want the https on this site too.

I only disabled everything in order to “start from scratch” thinking I might have skipped a step (or two).


#9

OK right now, i have the Flexible SSL indicated on the Crypto page (by default), and no other page rules.
To have all the images and other resources on the HTTPS does it mean that if it is all on the same wp installation and under the same domain that it should be ok? How do i make sure? What resources might be trying to load that is “from http”? How do I find that out?


#11

You can locate the warnings by opening the console. It gets a bit technical here, but when looking through those warnings, you will see exactly which stylesheets and images are causing this issue.

If you are using Chrome, you can open the console by going to View -> Developer -> Developer Tools.

You end up seeing something like this:

Now, since you are using WordPress, I believe WordPress can automatically fix most of those warnings to go away.

Make sure that the WordPress Address (URL) and Site Address (URL) fields both have addresses prefixed with https. You can access those from Settings -> General.


#12

Do you mean I should set it to Full, like it was by default?

I ran the test you linked to and several “hard failure” are related to images used (which are on the same domain), and theme elements (also on the same domain) either from the /library/ or js/jquery/.

Would the automatic https rewrite fix those?


#13

Last time i tried to set the https in the Settings > General, it messed up something and I ended up locking myself out of the site (not my plan of course).


#14

Before you change that, you indeed have to make sure that SSL is set to Full SSL.


#16

one of my big sites is on Wordpress, but the other is on ZenCart, which will definitely be a different challenge!


#18

Ok I set it to Full, and retested. It looks like the mixed content yields SOFT failures now, instead of HARD like earlier. Maybe progress?


#20

Now, the HTTPS page is loading fine (I didn’t change anything else), but anything I click from the navigation yields a 404 error.


#22

Definitely progress! Before you had around 20 errors. Now only 7 left.

They all seem to be related to the images used in the image carousel/slider. There is probably a plugin or a WP-post somewhere where you can edit the links to those images.

Alternatively, enabling “Automatic HTTPS Rewrites” will fix this.


#23

Ok it was a user error here (error in the .htaccess file).
OK so it seems to work now, but isn’t that mixed content going to cause issues down the line?


#25

Now, help me understand something. Those images are already inside the folders of my domain, which is “protected” by https. When I select an image, from inside the site (whether it is a WP site or not) how do I make it an https? Is that what the https rewrite would do?


#27

Yes, but your theme is referring to them by http. I am not sure how this slider is coded, but you could try to remove the images, and upload them again.

Automatic HTTP Rewrites will fix it for sure.


#28

The carousel is picking the image through the Media library of my site, so I don’t have anything I can type or edit. I’ll try to load them again. Be right back!


#30

I removed the images from the server, and the carousel, and reuploaded them. I get the exact same errors.
Maybe time to test that https rewrite?


#31

Either that, or digging into the code and replace the references there.

Letting Cloudflare rewrite the links is probably the quicker way :smiley: