Varnish with Apache2 using mod_ssl and mod_proxy causing issues

Question

I have installed the Varnish with Apach2 and setup that using the HTTP proxy apache module and used the headers to get the Data over HTTP and send it to HTTPS using reverse proxy.

        ProxyPreserveHost On
        ProxyPass / http://127.0.0.1:80/
        ProxyPassReverse / http://127.0.0.1:80/
        RequestHeader set X-Forwarded-Port “443”
        RequestHeader set X-Forwarded-Proto “https

But the issue I am facing this setup is the Browser error Content is loading from HTTP over HTTPS has been blocked.

Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure stylesheet ''. This request has been blocked; the content must be served over HTTPS.

Please help to understand where I am wrong and how can I make this work?

Thank you in Advance.

Answer 1

There's not a whole lot of context about the setup and the configuration, but based on the information you provided I'm going to assume you're using Apache to first terminate the TLS connection and then forward that traffic to Varnish.

I'm also assuming Apache is also configured as the backend in Varnish listening on a port like 8080 whereas Varnish is on 80 and the HTTPS Apache vhost is on 443.

Vary header

The one thing that might be missing in your setup is a cache variation based on the X-Forwarded-Proto header.

I would advise you to set that cache variation using the following configuration:

Header append Vary: X-Forwarded-Proto

This uses mod_headers and can either be set in your .htaccess file or your vhost configuration.

It should allow Varnish to be aware of the variations based on the Vary: X-Forwarded-Proto header and store a version for HTTP and one for HTTPS.

This will prevent HTTP content being stored when HTTPS content is requested and vice versa.

A good way to simulate the issue

If you want to make sure the issue behaves as I'm expecting it to, please perform a test using the following steps:

1. Clear your cache through sudo varnishadm ban obj.status "!=" 0
2. Run varnishlog -g request -q "ReqUrl eq '/'" to filter logs for the. homepage
3. Call the HTTP version of the homepage and ensure its stored in the cache
4. Capture the log output for this transaction and store it somewhere
5. Call that same page over HTTPS and check whether or not the mixed content errors occur
6. Capture the log output for this transaction and store it somewhere

Then fix the issue through the Vary: X-Forwarded-Proto header and try the testcase again.

In case of problems, just add the 2 log transactions to your question (1 for the miss, 1 for the hit) and I'll examine it for you