Mixed Content Error when frontend uses HTTPS

[milouk]

I have deployed the app behind traefik and issued an ssl certificate for the frontend. My API_BASE_URL is set to http://shelf-back:8000. Since fontend has https and backend is http I am getting a "Mixed Content" error. Is there a way to have the frontend using https while the backend is http?

My docker compose is as follows:

  shelf-back:
    container_name: shelf-back
    image: fdooch/shelf-back:0.1.0-alpha.11
    env_file:
      - ./shelf/shelf.env
    volumes:
      - ./certs:/usr/src/shelf-back/certs
      - ./shelf-data:/usr/src/shelf-data
    depends_on:
      - redis
      - edgedb
    ports:
      - "8000:80"
    networks:
      private-network:
        ipv4_address: 10.1.0.22


  shelf-worker:
    container_name: shelf-worker
    image: fdooch/shelf-back:0.1.0-alpha.11
    env_file:
      - ./shelf/shelf.env
    volumes:
      - ./certs:/usr/src/shelf-back/certs
      - ./shelf-data:/usr/src/shelf-data
    command: ["celery", "-A", "app.tasks", "worker", "-l", "INFO"]
    depends_on:
      - edgedb
      - redis
    networks:
      private-network:
        ipv4_address: 10.1.0.23

  shelf-front:
    container_name: shelf-front
    image: fdooch/shelf-front:0.1.0-alpha.12
    env_file:
      - ./shelf/shelf.env
    depends_on:
      - shelf-back
    networks:
      private-network:
        ipv4_address: 10.1.0.24
    labels:
      - com.centurylinklabs.watchtower.enable=true
      - traefik.enable=true
      - traefik.http.services.shelf.loadbalancer.server.port=80
      - traefik.http.routers.shelf-https.entrypoints=https
      - traefik.http.routers.shelf-https.rule=Host(`shelf.example.org`)
      - traefik.http.routers.shelf-https.tls=true
      - traefik.http.routers.shelf-https.tls.certresolver=le
      - traefik.http.routers.shelf-https.middlewares=chain-middlewares-no-auth@file

  edgedb:
    container_name: edgedb
    image: edgedb/edgedb:2.5
    env_file:
      - ./shelf/shelf.env
    volumes:
      - dbvolume:/var/lib/edgedb/data
      - ./certs:/certs
    ports:
      - "5656:5656"
    networks:
      private-network:
        ipv4_address: 10.1.0.25
    labels:
      - com.centurylinklabs.watchtower.enable=true

[mrg358]

Same problem here.
Deployed Shelf behind Nginx Proxy Manager and getting Blocked loading mixed active content errors.
API_BASE_URL=https://api-shelf.example.com yet Shelf doesn't always respect this env var and sends many requests via http

[unmade]

@milouk
I apologise it took me so long to reply to you. I'm afraid there is no way to call http from https as this is enforced by the browser policies. May you can somehow disable it in your browser, but I don't recommend it. The best solution is to host everything using https or at least using the same protocol for frontend and a backend.

@mrg358
That's quite strange that API_BASE_URL is not being respected. Is it like all requests are sent via http or just some specific requests, like thumbnails and download?

[mrg358]

yes, it seems only getting thumbnails and downloads are calling api via http.

[unmade]

@mrg358
Seems like it is an issue with a gunicorn as it ignores X-Forwarded-* headers if you don't set FORWARDED_ALLOW_IPS environment variable. And this behaviour affects affects download and thumbnail urls, as they are generated by the backend. Without that X-Forwarded-* headers, backend simply fallback to the http scheme by default.

To fix it, you can set it to the IPs of your proxy (FORWARDED_ALLOW_IPS=10.170.3.217,10.170.3.220) or just set it to * (but do this only if your gunicorn is accessed by your trusted proxy (nginx in your case).

More technical details can be found here

[mrg358]

Thank you!
After I set the correct FORWARDED_ALLOW_IPS=192.168.x.1 it works now. 👍
FWIW my NPM also runs in the same docker environment, so the correct IP to set wasn't the IP of the nginx container but the first IP 192.168.x.1of the shelf-showcase compose stack. The same which shows up in the backend logs.

[mrg358]

Forgot to mention, I like your app and I hope it will keep advancing more in the future. The frontend design looks very polished and professional. Good job! 👍
Thank you for all the effort you put into it so far.