Force https on traefik with docker-compose, mixed content

Traefik Traefik v2
1

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
2

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,

3

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

image
image1600×608 141 KB

)

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.

4

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/
5

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

1 Like
6

Hi,
we encoutered the same problem recently.
Have you found a working solution for generic apps?
Thx and best regards

7

Hi,
I have the same issue when calling an url in an iframe that calls a backend that redirect in http. The initial request is redirected in https so my redir works, but when the iframe calls an backend that returns a response with a location header that contains a http request, I get block mixed content request error in the js console. Traefik should rewrite the location header in https before forwarding it to the client if the caller is in https.
Anyone found a solution/workaround for that ?

Thx and best,