🐛 BASE_PATH configuration failing to load all resources when used with a basic reverse proxy setup

🐛 Bug report

Description

Passing the BASE_PATH environment variable per the customization docs does not work properly behind a reverse proxy with a standard path prefix rule. There are still some resources that are trying to be loaded from the root / instead of from $BASE_PATH/. Some resource are loading correctly (page background color and cookies consent pop-up load just fine).

Is this a regression?

I’m not sure. But I think this PR was supposed to “fix” it or was an attempt at dealing with this

🔬 Minimal Reproduction

See Environment section for minimal docker-compose/ docker-swarm configuration to reproduce

🔥 Exception or Error

As you can see in the above screenshot, many resources load fine while using a basePath of player-1, however starting with runtime.js the application tells the browser to load it from root.

As you can see above, when I manually try to load runtime.js from /player-1/runtime.js it loads correctly.

🌳 Your Environment

I want to be able to set up multiple juice-shop instances behind a single hostname, however the added BASE_PATH configuration does not seem implemented correctly. Here is a minimal docker-compose file that I am using with docker-swarm. I have omitted the traefik configuration here as it is not relevant.

# docker-compose.yaml

version: '3.8'

services:

  shop-1:
    image: bkimminich/juice-shop
    environment:
      - PORT=3001
      - BASE_PATH=/player-1
    deploy:
      labels:
        - traefik.enable=true
        - traefik.http.services.shop-1.loadbalancer.server.port=3001
        - traefik.http.services.shop-1.loadbalancer.sticky.cookie=true
        - traefik.http.routers.shop-1.rule=Host(`gameday.example.net`) && PathPrefix(`/player-1`)
        - traefik.http.routers.shop-1.service=shop-1
    networks:
      - traefik_network

networks:
  traefik_network:
    external: True
    name: traefik_network

Additional Information

This is not specific to Traefik or the reverse proxy or the web browser. Juice shop should correctly use the basePath config item for ALL relative links/resources. It looks like the main index.html or equivalent is telling the browser to look from root / not taking the base_path into account perhaps?

[bkimminich]

Ok, thanks! I’ve updated the documentation accordingly!

[tomdaley92]

I don’t think the entire implementation is flawed, just “against the grain” from what we typically would see on how base_path variables would normally work for web apps. And I wish I had the time to dive into this more, but can’t promise I’ll be able to any time soon 😕

The docs DO in fact mention that the base_path variable is used for redirects, so maybe that’s enough… I just think there needs to be a clear note that setting the base_path variable does not actually change the base path of the juice-shop web server at all (which makes the variable name very misleading)

An alternate suggestion could be to change the variable name to external_base_path or redirect_base_path instead, so that it’s clear

It’s a very minor nuance that I think should be clarified, is all.

Like I stated earlier I got it all working by informing the proxy to strip the same base_path value off of request URLs before sending the request to the juice-shop docker container (behind the proxy)