Mixed Content problem for Plone behind Traefik reverse proxy

Question

I just tried installing the Docker-based Plone, and it runs behind Traefik as a reverse proxy, but when I access it from a web browser, I get an error on the console like this:

Mixed Content: The page at ' https://new.mydomain.id/ ' was loaded over HTTPS, but requested an insecure stylesheet ' http://fonts.googleapis.com/css?family=Roboto:400,300,700 '. This request has been blocked; the content must be served over HTTP

Mixed Content: The page at ' https://new.mydomain.id/ ' was loaded over HTTPS, but requested an insecure stylesheet ' http://new.mydomain.id/++resource++plone-admin-ui.css '. This request has been blocked; the content must be served over HTTPS.

Are there any special environment variables that can be passed to make all communication using HTTPS?

Previously, I installed the OJS3 web application behind the same reverse proxy, and got the same error message, but resolved by passing the environment variable HTTPS=on to the container.

I hope there are similar environment variables for Plone. I use Traefik 1.7.16

Answer 1

You need to correctly configure the proxy rewrite URL, including Virtual Host Monster (VHM) parts. That way, Zope's VHM can correctly rewrite the request.

An example for Nginx can be found here:

https://docs.plone.org/manage/deploying/front-end/nginx.html#minimal-nginx-front-end-configuration-for-plone-on-ubuntu-debian-linux

Basically, the rewrite URL should look like this:

       Protocol plus domain or address of the proxied server
       |                      Protocol of frontend server
       |                      |    Domain of frontend server
       |                      |    |           Port of frontend server
       |                      |    |           |   Path to Plone site root
       V                      V    V           V   V
http://plone/VirtualHostBase/http/yoursite.com:80/Plone/VirtualHostRoot/

More information on the VHM: https://zope.readthedocs.io/en/latest/zopebook/VirtualHosting.html