Force https on traefik with docker-compose, mixed content

I'm using traefik as my reverse proxy on my server. It's used to host multiple web applications like wordpress and larvel. For these 2 application i found a "fix" for the mixed(the application servers http assets) content warning, as example, the wordpress fix:

if ( isset( $_SERVER['HTTP_X_FORWARDED_PROTO'] ) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
$_SERVER['HTTPS']='on';
$http_s = ( !empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') ? 'https' : 'http';

But I don't really like this solution and not every web-app support the option to declare "https only" or "force https" Is there an option in traefik to force or rewrite the urls, i didnt have these problems with Apache or nginx. I already have an http->https redirection These are my configs: Docker-compose traefik:

reverse-proxy:
    container_name: traefik
    image: traefik:v2.6
    restart: unless-stopped
    command:
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"
      - --entrypoints.websecure.address=:443
      - --entrypoints.websecure.http.tls=true
      - --entrypoints.web.http.redirections.entrypoint.to=websecure
      - --entrypoints.web.http.redirections.entrypoint.scheme=https
      - --entrypoints.web.http.redirections.entrypoint.permanent=true
      - --providers.file.directory=/app/certificates
      - --providers.file.watch=true
    ports:
      # The HTTP port
      - "80:80"
      - "443:443"
      # The Web UI (enabled by --api.insecure=true)
      - "8080:8080"

Docker-compose web app:

 nginx:
    image: nginx:latest
    container_name: ${APP_NAME}-nginx
    env_file:
      - .env
    volumes:
      - "./config/nginx/:/etc/nginx/templates/"
      - ./src:/var/www/html:rw,cached
    environment:
      - "NGINX_ENVSUBST_TEMPLATE_SUFFIX=.conf"
    networks:
      - default
      - traefik
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.${APP_NAME}.rule=Host(`${DOMAIN}`)"
      - "traefik.http.routers.${APP_NAME}.entrypoints=websecure"
      - "traefik.http.services.${APP_NAME}.loadbalancer.server.port=80"
      - "traefik.docker.network=traefik_proxy"
    restart: unless-stopped

Hey!

There is a global redirection configured on entryPoint that should redirect each incoming request from HTTP to HTTPS. So based on my best knowledge it should solve the problem with having mixed content.

Could you please help with understanding your issue?

Thank you,

Yes i enabled the redirect and that works. But only of the initial request. The web-app behind traefik thinks the request is a http request. So it tries to serve all assets with http, so i get a lot of mix content error's(like this


)

i found a workaround for laravel and for wordpress
as exaple the wordpress workaround:

if ( isset( $_SERVER['HTTP_X_FORWARDED_PROTO'] ) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
$_SERVER['HTTPS']='on';
$http_s = ( !empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') ? 'https' : 'http';

I don't had this problem virtual servers with nginx.

You can use a Traefik middleware label to rewrite the X-Forwarded-Proto header, so after removing all the other lines my docker-compose entry looks a little like

traefik:
image: "traefik:v2.6"
container_name: "traefik"
restart: unless-stopped
command:
- "--entrypoints.http.address=:80"
- "--entrypoints.https.address=:443"
- "--entrypoints.web.http.redirections.entryPoint.to=websecure"
- "--entrypoints.web.http.redirections.entryPoint.scheme=https"
labels:
- "traefik.http.middlewares.sslheader.headers.customrequestheaders.X-Forwarded-Proto=https"

As for why you do not have this issue with nginx, well a default install with settings in place to use nginx as a proxy may have already set usable defaults - such as shown in this article

  https://linuxize.com/post/nginx-reverse-proxy/

I tried your config but still it doesn't work. Are there more header i need to forward to get this working?