[{"id":"cG9zdDo4OTY=","slug":"use-traefik-and-regexp-to-bypass-adblockers","title":"Use Traefik and RegExp to bypass AdBlockers","content":"\n

This will be a controversial one, so let me explain the motivations first.

\n\n\n\n

I was using Matomo for collecting traffic metrics on different websites, however it’s kind of bloated for what I need to do. My goal is to get a grasp on viewership, without collecting personal data or any fancy analytics. I wanted to try out Umami as it seems simple and is privacy respecting first (including GDPR), without the need to tweak settings.

\n\n\n\n

The problem was that my AdBlocker was not letting request through and since most of the people visiting this site will probably devs they surely have some AdBlocker installed.

\n\n\n\n

FYI: All the data collected on this site are accessible and visible to anyone here.

\n\n\n\n

\n\n\n\n

The issue

\n\n\n\n

Lets have a look at the typical Umami code:

\n\n\n\n

<script\n  async\n  defer\n  data-website-id=\"3808ed9b-9fc6-481b-bf6c-45e07f7aedf9\"\n  data-domains=\"nicco.io\"\n  src=\"https://spectare.nicco.io/umami.js\"\n></script>

\n\n\n\n

The problem is that most block list have umami.js on it, which make measuring anonymous traffic impossible. Now blocklists are very static (for performance reasons) and therefore quite easy to circumnavigate.

\n\n\n\n

Rerouting

\n\n\n\n

What do you do when the street you are driving on is blocker? You take the detour.

\n\n\n\n

The solution is not to use umami.js directly, but redirect it form another name. With traefik this is very easy using the ReplacePathRegex middleware. Let’s see how:

\n\n\n\n

version: '3.8'\n\nnetworks:\n  proxy:\n    external: true\n\nservices:\n  umami:\n    image: ghcr.io/mikecao/umami:postgresql-latest\n    networks:\n      - default\n      - proxy\n    labels:\n      - traefik.enable=true\n      - traefik.http.routers.umami.rule=Host(`spectare.nicco.io`)\n      - traefik.http.routers.umami.entrypoints=secure\n      - traefik.http.routers.umami.tls.certresolver=le\n      - traefik.http.routers.umami.middlewares=umami-rewrite\n      - traefik.http.middlewares.umami-rewrite.replacepathregex.regex=/unicorn.js\n      - traefik.http.middlewares.umami-rewrite.replacepathregex.replacement=/umami.js\n\n  db:\n    image: postgres:12-alpine\n    ...

\n\n\n\n

We need to configure the regex and replacement parameters for the replacepathregex middleware. In my case I chose to use /unicorn.js and redirect it internally to /umami.js. This way the internal service is doing business as usual while ad blockers do not block the request.

\n\n\n\n

Responsibility

\n\n\n\n

As you can imagine this would enable far more nefarious use cases. You could also mask it as something like 23hf872.min.js or whatever. So use with caution and always keep in mind your users privacy and data!

\n","status":"publish","date":"2022-01-10T22:03:31","modified":"2022-02-20T17:14:14","tags":{"nodes":[{"id":"dGVybTo5Nw==","slug":"ad-blocker","name":"ad-blocker","count":1},{"id":"dGVybTo2Nw==","slug":"tracking","name":"tracking","count":2},{"id":"dGVybTo5OQ==","slug":"traefik","name":"traefik","count":1},{"id":"dGVybTo5OA==","slug":"umami","name":"umami","count":1}]},"post":{"featured":{"srcSet":"https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-300x200.jpg 300w, https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-1024x683.jpg 1024w, https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-150x100.jpg 150w, https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-768x512.jpg 768w, https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-1536x1024.jpg 1536w, https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-2048x1365.jpg 2048w, https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-500x333.jpg 500w, https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-800x533.jpg 800w, https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-1200x800.jpg 1200w, https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-1500x1000.jpg 1500w, https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-2000x1333.jpg 2000w","altText":"","sourceUrl":"https://api.nicco.io/wp-content/uploads/2022/01/hyeryi-sVk8nrCQ06g-unsplash-scaled.jpg"}}}]