SSL issued but not working on Chrome Browsers

pgarciamaurino · December 15, 2022, 9:33pm

Hello, I have a WordPress site and it’s proxied in Cloudflare.

The SSL is issued by Cloudflare, and it has been working for a long time.

Now, I don’t know why, it has stopped working, and more strange, only in Chrome browsers.

The website is this one: https://peterpalmer.io

SSL is set to Flexible and always has worked well. Always use HTTP option is disabled, because I have https redirect in WordPress with Really Simple SSL and in the General options of WordPress the WordPress base URL is with https.

What is happening? I don’t know what is happening if this always has worked well, why is failing now?

Thank you very much.

erisa-cf · December 15, 2022, 10:10pm

Your edge SSL certificate is actually fine, the error is due to mixed content:

https://support.cloudflare.com/hc/en-us/articles/200170476-Troubleshooting-mixed-content-errors

https://www.cloudflare.com/en-gb/learning/ssl/what-is-mixed-content/

In this case a number of web resources are being loaded over HTTP:

The “one click fix” for this in Cloudflare is to enable Automatic HTTPS Rewrites (Not the same as Always Use HTTPS):

Otherwise, you will have to resolve the problem on your origin using advice in the three guides above.

sandro · December 15, 2022, 10:35pm

That’s actually the issue and means you have an insecure site. You should set that to Full Strict and fix the server.

pgarciamaurino · December 15, 2022, 10:42pm

I have activated full strict but now seems to appear this error that is coming from Cloudflare end

pgarciamaurino · December 15, 2022, 10:45pm

Automatic HTTPS Rewrites is enabled, and nothing, it is the same…

erisa-cf · December 15, 2022, 10:49pm

It may be, but you also set the mode to Full (Strict) without a certificate so we can’t test it anymore.

The error is because you enabled an SSL/TLS mode that requires a valid certificate at your origin to ensure encryption between Cloudflare and the Origin (Which is indeed a good idea to secure your connection).
To resolve this error you can either install a publicly trusted certificate (e.g. Let’s Encrypt) at your origin, or an Origin CA certificate and make the origin listen on HTTP (port 443)

sandro · December 15, 2022, 10:52pm

That’s the right mode, but as I wrote you also need to fix the server. Make sure you have a proper certificate.

pgarciamaurino · December 15, 2022, 10:52pm

Ok I have issued the SSL certificate, and now is on full strict, but I’m seeing the same error.

sandro · December 15, 2022, 10:53pm

That will be because of mixed content. I highly recommend to pause Cloudflare and make sure your site is secure, then it will work fine on Cloudflare as well.

pgarciamaurino · December 15, 2022, 10:57pm

Ok I have activated some options in Really Simple SSL to fix mixed content, now it says it is secure, but there are still some resources that are not displaying.

sandro · December 15, 2022, 10:58pm

The rewrite @erisa-cf mentioned may work, but keep in mind it mostly is a patch for a broken site.

pgarciamaurino · December 15, 2022, 10:59pm

pgarciamaurino · December 15, 2022, 11:00pm

erisa-cf · December 15, 2022, 11:05pm

Looks like the ones that Chrome was only warning about are taken care of, but there’s still two that it outright blocks on security grounds

Mixed Content: The page at 'https://peterpalmer.io/' was loaded over HTTPS, but requested an insecure image 'http://peterpalmer.b-cdn.net/wp-content/uploads/2022/06/Peter-barcelona.png.webp'. This request has been blocked; the content must be served over HTTPS.
peterpalmer.io/:1
Mixed Content: The page at 'https://peterpalmer.io/' was loaded over HTTPS, but requested an insecure image 'http://peterpalmer.b-cdn.net/wp-content/uploads/2022/01/IMG_7736-1-scaled.jpg.webp'. This request has been blocked; the content must be served over HTTPS.

So http://peterpalmer.b-cdn.net/wp-content/uploads/2022/06/Peter-barcelona.png.webp
and http://peterpalmer.b-cdn.net/wp-content/uploads/2022/01/IMG_7736-1-scaled.jpg.webp
are the affected resources.

How to fix this will depend on the setup entirely, it’s pretty tricky to give general advice aside from the tutorial on mixed content

pgarciamaurino · December 15, 2022, 11:15pm

Good point!

The problem was that the Bunny CDN was configured through HTTP instead of HTTPS.

It should be https://peterpalmer.b-cdn.net instead of http://peterpalmer.b-cdn.net.

Thank you very much.