Caddy Server | Reverse Proxy | Automatic TLS: Wordpress CSS causing page to be broken post load

1. My Caddy version (caddy -version):

v2.0.0-beta11

2. How I run Caddy:

./caddy run --config myConfig.json

a. System environment:

OS, relevant versions, systemd? docker? etc.

Distributor ID: Ubuntu
Description: Ubuntu 16.04.5 LTS
Release: 16.04
Codename: xenial

d. My complete Caddyfile:

{
  "admin": {
    "listen": ":2019"
  },
  "apps": {
    "http": {
      "servers": {
        "reverse_proxy_master": {
          "listen": ["0.0.0.0:443"],
          "@id" : "reverse_proxy_master",
          "routes": [
          ],
          "experimental_http3": false
        }
      }
    },
    "tls": {
      "automation": {
        "policies": [
          {
            "hosts": [],
            "management": {
              "ca": "https://acme-staging-v02.api.letsencrypt.org/directory",
              "module": "acme"
            }
          }
        ]
      }
    }
  }
}

Route Handlers:

                  {
                     "@id":"example.com",
                     "handle":[
                        {
                           "handler":"subroute",
                           "routes":[
                              {
                                 "handle":[
                                    {
                                       "handler":"reverse_proxy",
                                       "headers":{
                                          "request":{
                                             "set":{
                                                "Host":[
                                                   "{http.request.host}"
                                                ],
                                                "X-Forwarded-For":[
                                                   "{http.request.remote}"
                                                ],
                                                "X-Forwarded-Port":[
                                                   "{http.request.port}"
                                                ],
                                                "X-Forwarded-Proto":[
                                                   "{http.request.scheme}"
                                                ],
                                                "X-Real-Ip":[
                                                   "{http.request.remote}"
                                                ]
                                             }
                                          }
                                       },
                                       "upstreams":[
                                          {
                                             "dial":"<ip>"
                                          }
                                       ]
                                    }
                                 ],
                                 "match":[
                                    {
                                       "path":[
                                          "/"
                                       ]
                                    }
                                 ]
                              }
                           ]
                        }
                     ],
                     "match":[
                        {
                           "host":[
                              "example.com"
                           ]
                        }
                     ],
                     "terminal":false
                  }

3. The problem I’m having:

Have wordpress site. I have setup A record to point to my caddy server and do reverse proxy with auto ssl certificate generation. This thing is working, however post reverse proxy main domain URL is https however rest part of site is broken as static resources like css etc are on loaded.

4. Error messages and/or full log output:

No error in caddy but Chrome console shows following error:

(index):13 Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure script 'http://example.com/wp-includes/js/wp-emoji-release.min.js?ver=5.2.2'. This request has been blocked; the content must be served over HTTPS.
f @ (index):13
(anonymous) @ (index):13
(anonymous) @ (index):13
(index):29 Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://example.com/wp-includes/css/dist/block-library/style.min.css?ver=5.2.2'. This request has been blocked; the content must be served over HTTPS.
(index):30 Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://example.com/wp-includes/css/dist/block-library/theme.min.css?ver=5.2.2'. This request has been blocked; the content must be served over HTTPS.
(index):31 Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://example.com/wp-content/themes/twentynineteen/style.css?ver=1.4'. This request has been blocked; the content must be served over HTTPS.
(index):32 Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://example.com/wp-content/themes/twentynineteen/print.css?ver=1.4'. This request has been blocked; the content must be served over HTTPS.
(index):88 Mixed Content: The page at 'https://example.com/' was loaded over a secure connection, but contains a form that targets an insecure endpoint 'http://example.com/'. This endpoint should be made available over a secure connection.

Please assist.

Any help with rewrite, i tried adding one more handle to above mapping:

Something similar to =
{
“handler”: “rewrite”,
“method”: “”,
“uri”: “{http.request.proto}”,
“strip_path_prefix”: “”,
“strip_path_suffix”: “”,
“uri_substring”: [{
“find”: “http”,
“replace”: “https”,
“limit”: 0
}],
“http_redirect”: “”,
“rehandle”: true
}

Doesnt work

Or http.filter is right approach to change asset link from http to https ?

It might just be a misconfiguration in Wordpress, if it’s emitting http:// links instead of https://. (Frankly, it should just emit protocol-relative links, I dunno why they bother to include the scheme at all, let alone http:// on sites in 2020. But I digress.)

Thankyou Matt. Yes if we install redirect plugin all absolute path are converted to relative path.

However we are trying to reverse proxy using automatic https. Our main index page gets https asset links are http only. Is there way we can handle this via rewrite or changing links in proxied response

I have to chime in here to STRONGLY recommend you fix the issue at the source, i.e. in WordPress, instead of doing HTML and header filtering at the proxy layer.

A few plugins exist which rewrite all internal http: references to https: - probably the best / most popular of which is https://wordpress.org/plugins/really-simple-ssl/.

1 Like

Yep that was way i thought before that just wanted to see if caddy did allow something and after researching though not good idea to play with client response html.