Traefik is not compatible with Angular

Traefik Traefik v3 (latest)
,
1

While developing this wonderful tool, which uses Angular as the frontend framework and Traefik as a reverse proxy, I encountered the following problem.

The Angular documentation Read route state • Angular describes that Matrix Parameters are passed in the form /path;key1=value1;key2=value2
When I used matrix parameters on my website, I was incredibly surprised by the behavior: for requests containing non-encoded semicolons in the path, the browser showed an HTTP 400 error. Example path from my website:

https://qrcode.expert/signin;returnPath=%2Ftrack

returns
400 Bad Request

My traefik configuration (docker compose):

services:
    traefik:
        image: "traefik:v3.6"
        container_name: "traefik"
        restart: always
        command:
            - "--providers.docker=true"
            - "--providers.docker.exposedbydefault=false"
            - "--entrypoints.web.address=:80"
            - "--entrypoints.web.http.redirections.entrypoint.to=websecure"
            - "--entrypoints.websecure.address=:443"
            - "--entrypoints.websecure.http.tls.certResolver=myresolver"
            - "--certificatesresolvers.myresolver.acme.tlschallenge=true"
            - "--certificatesresolvers.myresolver.acme.email=webmaster@qrcode.expert"
            - "--certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json"
            - "--entrypoints.websecure.http.middlewares=no-www"
        ports:
            - "80:80"
            - "443:443"
        volumes:
            - "/var/run/docker.sock:/var/run/docker.sock:ro"
            - "./volumes/letsencrypt:/letsencrypt"
        labels:
            - "traefik.enable=true"
            - "traefik.http.middlewares.no-www.redirectregex.regex=^https://www\\.(.+)$"
            - "traefik.http.middlewares.no-www.redirectregex.replacement=https://$1"
            - "traefik.http.middlewares.no-www.redirectregex.permanent=true"
    qrcode.frontend:
        image: qrcode.frontend:latest
        restart: always
        volumes:
            - ./volumes/logs:/logs
        labels:
            - "traefik.enable=true"
            - "traefik.http.routers.qrcode-frontend.rule=Host(`qrcode.expert`) || Host(`www.qrcode.expert`)"
            - "traefik.http.routers.qrcode-frontend.priority=10"
            - "traefik.http.routers.qrcode-frontend.middlewares=qrcode-frontend-compress"
            - "traefik.http.middlewares.qrcode-frontend-compress.compress=true"

Unfortunately, I couldn't find a way to overcome the traefik. I tried adding:
- "--entrypoints.web.http.sanitizePath=false"
- "--entrypoints.websecure.http.sanitizePath=false"

But it doesn't help at all.

2

Check Encoded Character Filtering,

4

So, this line resolves the issue:

- "--entryPoints.websecure.http.encodedCharacters.allowEncodedSemicolon=true"

This is an extremely bad feature of Traefik, as it is non-obvious (semicolon is not URL-encoded!) and by default breaks popular UI libraries (specifically, Angular).
I hope the Traefik developers will notice this.

5

If you think this is a bug, please report it to the devs at Traefik Github.

6

Done: By default, Traefik does not allow unencoded semicolons in the path; the behavior is incompatible with Angular. · Issue #13230 · traefik/traefik · GitHub