Enabled Cloudflare and encountered formatting issues

Hi there,

I recently enabled Cloudflare in conjunction with W3C Total Cache, as soon as Cloudflare kicked in the website encountered formatting issues and would not load any images.

Any idea what caused it? I disabled RocketLauncher and it didn’t help.

What is the domain? Without seeing what you’re seeing, I’m guess :search: mixed content #communitytip :search: will give you quick fix ideas to address mixed content errors.

1 Like

rampavingltd.ca

I have since disabled Cloudflare though, as I cannot have the website … looking the way it did until I have a clearer path to fix it.

Yes, it’s mixed content that was causing the issue.

Mixed content errors mean that your website is being loaded over HTTPS but some of the resources are being loaded over HTTP. To fix this you will need to edit your source code and change all resources to load over a relative path, or directly over HTTPS.

For example, if you load your images with a full URL:

<img src="http://example.com/image.jpg" />

You would want to change this to:

<img src="//example.com/image.jpg" />

By removing the http:, the browser will use whichever protocol the visitor is already using. An alternative option would be to enable the Automatic HTTPS Rewrites feature that can potentially fix these errors for you automatically. Do be aware that resources loaded by JavaScript or CSS will not be automatically rewritten and mixed content warnings will still appear.

See this Community Tip for further details

1 Like

Got it, thank you.

1 Like

Given that the website is built in wordpress, I can’t just edit all of the source code. Other than Automatic HTTPS Rewrites, are there any other ways to get this done?

I setup CLoudflare again, as well as Automatic HTTPS rewrite and it still gives me the same issue… though it hasn’t finished propagating yet.

Automatic rewrites will address a lot of the issues.

I’ve not used this plugin but many have and it seems to help, https://it.wordpress.org/plugins/Cloudflare-flexible-ssl/. You can edit htaccess, htaccess is usually hidden. Make sure you can View Hidden Files. If it does not exist, create it. Add the following line to your .htaccess file:
Header always set Content-Security-Policy: upgrade-insecure-requests

Huh, I setup the plugin you recommended and tried adding that line to my htaaccess file… still nothing.

So, when I enable W3C Total Cache I get the mixed content issues. When I disable it, the problem goes away. Does anyone know what the cause might be?

Any other input? Anyone else have some tips? #setup

Is it disabled at the moment?

Yes, it is.

As soon as I enable it, the mixed content issues start up again.

W3C is breaking something with cache. Digging around outside of cloudflare, there are reports of caching issues with headers and with Tag Manager.

Gotcha. Seems better not to mess with Cloudflare right now then.