Tips how to create and maintain your blog

WordPress

Cloudflare Flexible SSL doesn’t work with WordPress sites

Cloudflare WordPress JSON error

Some web hosting companies charges a lot for SSL setup and they don’t allow to run Free SSL on their servers. So I was very happy when Cloudflare introduced Flexible SSL.

With Cloudflare Flexible SSL you don’t need to take any actions on your hosting.

Just one click and you have secure WordPress website.

It was working perfectly until I wanted to add some content on my WordPress blog. Actually it was the one you are reading now – my blogging tips website. Ironically I wanted to write a blog post “How to setup Cloudflare for WP” and got an error.

What did happen?

I created a new post in WordPress, entered some text, tried to save a draft, but it didn’t work. It couldn’t save anything and I was getting such error message:

“Updating Failed. Error message: The response is not a valid JSON response.”

This is screen shot of the actual message:

Why this error occurred

The issue is due to Mixed content on page. It simply means that website is being loaded over HTTPS but some of the resources are being requested over HTTP.

An example of mixed content error when you update/publish a post:

VM49:1 Mixed Content: The page at ‘https://www.bloggingtips.info/wp-admin/post.php?post=439&action=edit’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://www.bloggingtips.info/wp-json/wp/v2/’. This request has been blocked; the content must be served over HTTPS.

You can check these errors yourself in the browser:

  • Chrome: Right click > Inspect > Console
  • Firefox: Right click > Inspect Element > Console

Temporary solution (not recommended)

You can turn OFF “Always Use HTTPS” option and you can access your site with HTTP instead of HTTPS. But this is very bad solution. It is not only you can access both (secure and not secure) website versions, but it is accessible for everybody and search engines (Google, Bing, Yahoo and etc) as well. It means you have duplicate content on web and it is very bad for SEO.

So I highly against such solution.

Proper solution

After some testing and failures I reached Clouflare support for help.

We did some more testing with different settings, but we were not able to make Flexible SSL work properly. So the only option is to switch to Full SSL.

Suggestion steps to fix mix content errors for WordPress users:

  1. Create and install a Cloudflare origin CA cert at the origin server following our guide here: https://support.cloudflare.com/hc/en-us/articles/115000479507-Managing-Cloudflare-Origin-CA-certificates
  2. Switch to SSL Full/ Full (Strict) mode in your Cloudflare dashboard.

Conclusion

Unfortunately for me I can’t use this solution, because I can’t make needed changes on my hosting server. So let me know if by any chance you was able to make Cloudflare Flexible SSL work on your WordPress website.

But switch off Flexible SSL if you can’t setup it properly. The worst thing is to have mixed (http and https) content on your site. Why?

From February 2020 Chrome 81 web browser will block resources by default if they fail to load over https://. So your website will be broken in if you’ll have mixed content on you site.

Chrome 81 will be released to early release channels in February 2020.
https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html

2 Comments

  1. Bob

    Correcting my previous comment. Keep cloudflare off, and you must use cloudflare.com site (turn on development mode to prevent caching when you’re working on your site), not the cloudflare plugin. After setting Site Address to https, you can turn on cloudflare.

Leave a Reply