Mixed content warning when using HTTPS

Help!
1

I use HAProxy trying to do SLL offloading for a WordPress site. Frontend is on 80 and 443 with redirect
<redirect scheme https code 301 if !{ ssl_fc }>
Redirection is working well when the page is accessed on port 80.
However the pages loads incomplete and looking in the console of Firefox/Chrome it can be seen that “mixed mode content” is blocked by the browser. Some stylesheets, scripts an images are still accessed over http instead of https.
301 is permanent redirection, so why is this happening? The browser should not even try http because it should be aware of the permanent redirection. An besides that, even when http is used accidentally, it should still be redirect to https instead.

Any clues how to solve this? IIS reverse proxy seems to do fine but I like HAProxy better.

2

You should probably let the back end server know the client is using SSL so it sends https:// links, not http:// with this or something similar (in your frontend):

# Let the real servers know this was originally a HTTPS request
http-request add-header X-Forwarded-Proto https

If that fails, you can also try (no bad thing anyway) adding a HSTS header to responses like so:

acl hsts_exists res.hdr_cnt(Strict-Transport-Security) gt 0
http-response add-header Strict-Transport-Security max-age=31536000;\ includeSubDomains if ! hsts_exists
1 Like
3

Tnx for the reply, but it doesn’t solve the issue.
Only thing that seems to work is:

rspadd Content-Security-Policy:\ upgrade-insecure-requests

But not all browser (Edge…) do support that.

2 Likes
4

Hi, this is a problem in the backend server, you have to set the “ssl on”, because of the ssl termination in haproxy level, and the browser send a https request but the backend response as a http, browser will block the response.
please enable the ssl on the backend

5

Hi, Enabling ssl on the backend will only work if the content is also on the same server/subnet behind the HAP server. I also had this problem a few times and found that the backend server is making http requests even though it is being accessed as https. Many times in your code on the backend server(s), there can be links to images, other urls, etc outside of your server and this would in turn cause mixed content to be displayed in the browser url.

Hope it helps

6

If I recall this can be a common problem if you dynamically load things like css frameworks, e.g. Bootstrap or things like font libraries, etc. What will happen is that those items referenced in your code will be using something like http://fonts.google.com and are not actually retrieved by the proxy… The browser goes direct causing the mixed mode issues.

Couple options,

  1. change all the remote asset urls to be https.
  2. Tell the proxy to parse through all the code that will be rendered client side and change http to https wherever it is found
  3. Download all the remote assets to the server and host them yourself
7

I’m sure you’ll find an answer in this very useful Reddit thread: https://www.reddit.com/r/Wordpress/comments/5pjowi/mixed_content_with_ssl_wordpress_behind_a_reverse/

8

http-request add-header X-Forwarded-Proto https did the trick for me.

I’m using haproxy for ssl termination to a private nexus docker repo.

Thanks

9

Thanks, this is the only thing that helped.

2 Likes
10

Thanks a lot; it worked after slight modification

    http-response set-header Content-Security-Policy upgrade-insecure-requests
3 Likes
11

Thanks, I tried all the earlier suggestions, but once I added this last item (which is relevant for the version of haproxy I am running 2.2.3), it solved my problem too (so I can’t say the other suggestions didn’t work, but the http-response set-header content-security-policy upgrade-insecure-requests added to the backend was the one which tipped it over the edge).
this problem isn’t just a wordpress problem, so I’ve added a few more keywords to help people trying to fix the same problem
Firefox “Connection not secure” “Parts of this page are not secure”
Edge “Your connection to this site isn’t secure”
Chrome “Your connection to this site is not fully secure”
cheers

1 Like
12

Thanks a lot. that was resolution for me.