Unable to load compiled assets (CSS) after installation of Varnish & hitch

Question

CSS is not loading when I installed Varnish version 7.0.2 & hitch 1.7.0 on ubuntu 20.04 server.

It's loading fine when i stop Varnish.

Also tried to bypassed site but issue still exists:

sub vcl_recv {
   if (req.http.host ~ "(www\.)?(example)\.com") {
     return(pass);
   }
}

Note: There isn't any changes in VCL file.

Please help me out in this.

Answer 1

One of the reasons why the CSS might not be loading is because of mixed content. Please check whether or not your static assets are loaded over HTTP whereas the page is loaded via HTTPS.

If that is the case, you need to make sure your application is aware of the terminated protocol. Registering the X-Forwarded-Proto header is one way of achieving this.

Use the PROXY protocol

As described in https://www.varnish-software.com/developers/tutorials/terminate-tls-varnish-hitch/#retrieve-tls-information-with-vmod_proxy, if the communication between Hitch and Varnish happens over the PROXY v2 protocol, you can use vmod_proxy to extract TLS information and set the X-Forwarded-Proto header.

This would be the VCL code:

vcl 4.1;

import proxy;

backend default {
    .host = "127.0.0.1";
    .port = "8080";
}

sub vcl_recv {
    if(!req.http.X-Forwarded-Proto) {
        if (proxy.is_ssl()) {
            set req.http.X-Forwarded-Proto = "https";
        } else {
            set req.http.X-Forwarded-Proto = "http";
        }
    }    
}

Ensure support for X-Forwarded-Proto in your application

The X-Forwarded-Proto request header that will be sent to your origin application should be supported. This means that your application should know how to inspect that header.

The value will either be http or https. Based on the value of the header, your application can generate URLs using a consistent request scheme. This will prevent mixed content from being loaded.