crowdsec-bouncer-traefik-plugin/examples/custom-ban-page

Example

Adding a custom ban page

Traefik can return a custom HTML ban page along with the 403 HTTP response code.
This can be usefull as some browser (Firefox for instance) return a 403 blank webpage and we can mistake a server/reverse-proxy error with a ban from Crowdsec.

Traefik configuration

  labels:
      # Define ban file path
      - "traefik.http.middlewares.crowdsec.plugin.bouncer.banFilePath=/ban.html"

The ban file must be present in the Traefik container (bind mounted or added during a custom build).
It is not directly accessible from Traefik even when importing the plugin, so download it locally to expose it to Traefik.

  ...
  traefik:
    image: "traefik:v2.11.0"
    volumes:
      - './ban.html:/ban.html'
  ...

Exemple navigation

We can try to query normally the whoami server:

curl http://localhost:8000/foo

We can try to ban ourself

docker exec crowdsec cscli decisions add --ip 10.0.0.20 -d 4h --type ban

We will see in the browser the ban custom page:

To play the demo environment run:

make run_custom_ban_page

Another thing to note

In the html of the ban page, you can use:

• {{ .ClientIP }} to display the IP used to ban the request.
• {{ .RemediationReason }} that convert on runtime into why the ban page is served. It's an enum with "APPSEC", "LAPI", "TECHNICAL_ISSUE" and it is useful to help user understand why the request is blocked.
• {{ .CustomHeader }} value of the specified Request Header (for example X-Request-ID)

<script>var remediation = "{{ .RemediationReason }}"</script>
<script>var clientIp = "{{ .ClientIP }}"</script>
<script>var traceID = "{{ .TraceID }}"</script>

With the above tweak and some other js, you can customize your ban page on runtime.