Home-Hosted WordPress Websites Not Delivering Correctly - SSL Issue?

[marcuscali]

Hello everyone,

I am reaching out to you all with a pressing issue concerning my home network. My home-hosted WordPress websites aren’t being delivered properly and I can’t seem to figure out why. Despite having a verifiably issued security certificate from Let’s Encrypt, I keep getting error messages stating the security certificate isn’t correct.

To give you a more in-depth overview of my network setup: I am using AT&T’s 1GB fiber connection, operated with a BGW210-700 modem. The modem is set to IP passthrough and despite it supposedly being a dynamic IP address, it hasn’t changed for the past three years.

My Netgate 6100 router, running pfSense, is behind it. It operates the main network under the address 172.16.1.1. A Proxmox hypervisor is connected to a VLAN with the subnet 192.168.1.1. These networks can communicate with each other and have Internet access.

Between pfSense and Proxmox, I have a 10GB MikroTik 9-port desktop switch (CRS309-1G-8S+IN) connected, which passes both the VLAN and the main network to a UniFi 1GB 24-port switch.

The Proxmox server hosts a Docker VM that runs an Nginx proxy manager (192.168.2.102:81), which is set up to deliver the WordPress website (192.168.2.119) installed on a separate Ubuntu 22.04 and Apache VM, with an SSL certificate.

Here’s the twist: whenever I enter the IP address of the WordPress installation under Host Override in pfSense’s DNS resolver, I can’t log into the WP backend on the local network at all.

Based on the Nginx logs, the certificate seems to be correctly pulled and installed, and is delivered across different browsers. Still, both internally and externally, the site appears as “not completely secure”. The default WordPress website after initial installation, as well as the backend login page, is graphically displayed incorrectly.

Interestingly, when I lower the security settings in Firefox, the WP page displays correctly.

I’ve tried several things: experimenting with new WordPress VMs, installing turnkey WordPress installations in containers on Proxmox, and moving websites from an external server to my internal Proxmox VM. However, the issue persists - the website simply isn’t being delivered correctly.

I’d really appreciate any insights or advice on how to tackle this issue. Is there something I’m missing in my setup or configuration? If you need more details, I’d be more than happy to provide them.

Thanks in advance for your help!

Best Regards,
Marcus

[LTS_Tom]

When you check the details of the certificate via the browser does the “Common Name (CN)” properly match your FQDN?

[paolo]

What do you mean by “not completely secure”? Are you talking about mixed content warnings, i.e. the page itself is loading correctly over HTTPS but other resources like styles and images are blocked? This would support your statement that the page is displayed incorrectly. I would check this first before looking at the proxy and network configuration.

For reference, this is what a mixed content warning in Firefox looks like:

https://mixed-script.badssl.com/

Mixed content blocking in Firefox | Firefox Help

If this is indeed a mixed content problem, there is a problem with the website (i.e. WordPress) itself, not with your infrastructure. The fix might be as simple as adjusting the home URL and site URL to include the HTTPS scheme. Otherwise there are plugins that rewrite the HTML output to contain only HTTPS resources.

How Can You Resolve Mixed Content Warnings in WordPress Easily?

If this doesn’t work, it might require more extensive reworking of the installed theme.

[marcuscali]

It really is maddening: I have set up another LXC container with Wordpress from Turnkey.

Microsoft’s Edge browser shows nothing at all. Firefox only works when I lower the security settings.

Even though it is a “clean” Wordpress installation, Firefox complains that the content is mixed.

The SSL certificate comes from the Nginx Proxy Manager running in a Docker VM.

In German they say, I am at the end with my Latin

Greetings for the weekend from sunny California

Marcus

[marcuscali]

This is a test domain - btw.
And this is what Chrome says accessing the website from my internal network:

[marcuscali]

Could the issue be that my network is experiencing problems because both Proxmox and the TrueNAS server are operating within a distinct VLAN (192.18.2.1), whereas my client devices are running on a different network (172.16.1.1)?

I’m really groping in the dark here. I’ve tried quite a number of installations (VMs and containers), but I consistently fail because my SSL certificate is not properly served. Unfortunately, there are so many different components involved that isolating the error is difficult due to my lack of experience. Sigh.

[xMAXIMUSx]

When you are on the page “Your connection is not private” can you push F12 and click on the Security tab so we can see what your browser is complaining about? Should look something like this.

[paolo]

This is not an infrastructure level problem (VM, network, etc) since you can reach the server just fine. It has to do with your web server configuration.

While you’re at it checking the Security tab in the dev tools, please check the console output as well. If there is any mixed content, this will show more specifics.

Some care should be taken not to confuse mixed content with TLS outright not working, it makes it easier to reason about when we can distinguish between these cases. To clarify: If the resource you are requesting, e.g. the root path of your website, cannot be served via HTTPS in the first place, this indicates a misconfiguration at the web server or reverse proxy level. If resources are served correctly when explicitly requested, but the browser fails to load additional elements like scripts, styles and images from the same domain, there is a mixed content problem. The latter is primarily an application level problem (WordPress putting the wrong URLs in the HTML) but could possibly be fixed by forcing HTTP->HTTPS redirects in the proxy as well.

When I load your page in Firefox right now, I get an SSL_ERROR_UNRECOGNIZED_NAME_ALERT. This means that the web server is listening, but it didn’t serve a certificate at all (not even an invalid one). It’s a misconfiguration of the reverse proxy. Could you show us some of your Nginx Proxy Manager config?

[marcuscali]

Hi Paolo,

I have sent you a private message here