HTTPS resources redirected to HTTP causing mixed content issues
I'm hosting a simple static Hugo site on Cloudflare Pages and encountering a problem where some resources, like the favicon, are redirected from HTTPS to HTTP. This causes my website to be flagged as not secure.
I can confirm this with curl:
I already have Automatic HTTPS Rewrites enabled.
My SSL/TLS setting is "Flexible". When I switch to "Full", my site stops working. A friend with a similar static Hugo website hosted in the same way doesn't have this issue, so I'm guessing it's not the issue.
I would appreciate help troubleshooting this out.
12 Replies
Your ssl/tls mode should always be "Full (Strict)", anything else is not secure/should not be used
if it breaks then that means you have something to fix
you have a redirect from apex to www, and www is running CF Pages (I assume?), but the html is
all your links go back to the non-www version, when they should be www if that's where Pages is
Although some of the icons don't exist in your Pages project still
https://www.brunorochamoura.com/favicon-16x16.png
Yeah, I'm aware the icons don't exist. Thanks for the quick response.
I just turned my SSL setting to "Full" so that I could show you exactly what error I was receiving, but now it appears to have worked... I'll do some more checks to see if the error is gone.
so you have a few options to fix this, both with the same ending point:
Set your ssl/tls mode to Full (Strict)
Options (do only one):
1. You can remove namecheap's redirect and use the redirect on Cloudflare, and then you'd want to fix those urls to not have to use the redirect anyway
https://community.cloudflare.com/t/redirect-example-com-to-www-example-com-using-single-dynamic-redirects/636762/2
2. You can put your website on your apex instead of www and redirect the other way, and not change the urls in your html, and go the other way
https://community.cloudflare.com/t/redirect-www-example-com-to-example-com-using-single-dynamic-redirects/636764/2
it's namecheap that gets broken by it, their redirect stuff doesn't support https/full (strict)
so those requests that go to your apex for favicon and such fail (without cache)
your pages website itself on www is fine though
Ah, never mind. I thought it was working, but it must have been a cache thing. After switching the mode to "Strict," the site is gone.
I'll be honest, I don't fully understand what you said, but I appreciate it. I'm not familiar with web hosting, and I don't know what happens on Cloudflare's or Namecheap's end. I'll go take a look at the links you sent.
apex (brunorochamoura.com) -> namecheap url redirect -> broken by full (strict)
www (www.brunorochamoura.com) -> cf pages -> gets effected because some of your resources on it link back to your apex and depend on the redirect working
CF can do the redirects for you, you don't need to use namecheap which breaks on full (strict)
pick which one you want your website to live on, apex or www, and then you'll have the other redirect, keeping mind your website is already setup to work on apex and if you pick www you'd want to change those urls in your code/website to use www instead of apex
Thanks for breaking it down for me. I'll look into how to disable the Namecheap redirect and use the Cloudflare one instead.
This first link doesn't cover how to disable the other (Namecheap, in my case) redirect, right? Or just following the article enough?
just delete the current dns record called
brunorochamoura.com (should be A/AAAA or CNAME, don't touch any TXTs/other types) and replace with 100:: as shown in there, and it'll workSweet, I just replaced the A record and created the redirect rule. I’ll wait a few minutes to see if it worked.
Wow, it seems like it did!
I see it working fine on my end already, a fair bit faster too. Still, you'll want to sometime modify your website html/code to use www for the links and resources, faster without redirects and not everything follows them nicely
Got it. I appreciate the help, couldn't have done it without you. Have a nice day!