[{"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"}}},{"id":"cG9zdDo3Mzc=","slug":"matomo-vs-ublock-origin","title":"Matomo vs uBlock Origin","content":"\n

After Ackee got an update and stopped working I wanted to search for an alternative to get some stats on my statically rendered site. As no server is used, I need some 3rd party service.

\n\n\n\n

I don’t want to spy on people, nor set cookies and annoy people with consent banners if they only want to read a damn blog post. The goal is just get a feel for the traffic on the site.
This is important to mention as the next steps could sound a bit nefarious otherwise.
Data collected on this site is 100% anonymous and GDPR compliant.

\n\n\n\n

\"\" — Photo by Luke Chesser on Unsplash

\n\n\n\n

Since Matomo is the de facto way to go, I spun up the Matomo server with my trusted docker-traefik setup and was up and running in no time.
( I’ll share the config files if anyone is interested at the bottom. )

\n\n\n\n

Then I quickly copied the JS tracker code in my main html template and thought that was it. Wrong.

\n\n\n\n

The problem defaults.

\n\n\n\n

So turns out that Matomo, being widely used is of course included in many Ad-Blocker lists and therefore my stats did not work. Lets see why:
Basically all ad blockers work with lists. Those lists include pattern that if matched will be filtered out. Let’s take a look at the default Matomo tracking code:

\n\n\n\n

<script type=\"text/javascript\">\n  var _paq = window._paq = window._paq || [];\n  /* tracker methods like \"setCustomDimension\" should be called before \"trackPageView\" */\n  _paq.push(['trackPageView']);\n  _paq.push(['enableLinkTracking']);\n  (function() {\n    var u=\"//stats.nicco.io/\";\n    _paq.push(['setTrackerUrl', u+'matomo.php']);\n    _paq.push(['setSiteId', '1']);\n    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];\n    g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);\n  })();\n</script>

\n\n\n\n

We can see that my stats server is stats.nicco.io. And we also can see that the tracking script is loaded by matomo.js, which then sends the details to matomo.php. Well that is of course incredibly easy to block, and it is as you can see below:

\n\n\n\n

\n\n\n\n

\n\n\n\n

That won’t work, and since most of the people that visit this site are probably developers which probably have some kind of ad blocker installed.

\n\n\n\n

Solution time

\n\n\n\n

So after a short Ecosia search I landed on the blog of Christian Mochow that wrote a blog post on this issue. I got the solution from his article.

\n\n\n\n

Luckily Apache has the famous Rewrite module, which will solve all our problems. I bet most of you already know where this is headed.

\n\n\n\n

We can create a .htaccess file in the root of our Matomo installation folder, to cloak our requests.

\n\n\n\n

# .htaccess\nRewriteEngine On\nRewriteRule ^unicorn matomo.js\nRewriteRule ^rainbow matomo.php

\n\n\n\n

Now if we request https://stats.nicco.io/unicorn we actually get the response for https://stats.nicco.io/matomo.js and the same for rainbow and matomo.php.

\n\n\n\n

// Replace in the client\n\n_paq.push(['setTrackerUrl', u+'matomo.php']); // Before\n_paq.push(['setTrackerUrl', u+'rainbow']); // After\n\ng.src = u + 'matomo.js' // Before\ng.src = u + 'unicorn' // After

\n\n\n\n

Awesome!

\n\n\n\n

I had to create a minuscule Dockerfile as the Rewrite module is not enabled per default in the standard Matomo docker image.

\n\n\n\n

# Dockerfile\nFROM matomo\nRUN a2enmod rewrite

\n\n\n\n

Responsible Usage

\n\n\n\n

Now as you can see it’s incredibly easy to mask tracking stuff, and I bet there are a lot of people doing this in the wild. It is important to respect the privacy of your users and you should never store more data than you need and in the best case don’t store data at all.

\n\n\n\n

Anonymize as much as possible! Matomo makes this easy. You can effortlessly delete 2 bytes of each ip address (half of the info), enforce strict no cookie tracking and automatically delete data after x days. Please do ❤️

\n\n\n\n

Config Files

\n\n\n\n

The Dockerfile and the .htaccess files are shown above.

\n\n\n\n

# docker-compose.yml\nversion: \"3.7\"\n\nnetworks:\n  traefik:\n    external: true\n\nservices:\n  db:\n    image: mariadb\n    command: --max-allowed-packet=64MB\n    restart: unless-stopped\n    volumes:\n      - ./data/db:/var/lib/mysql\n    env_file: .env\n\n  app:\n    build: .\n    restart: unless-stopped\n    links:\n      - db\n    volumes:\n      - ./data/matomo:/var/www/html\n      - ./.htaccess:/var/www/html/.htaccess\n    env_file: .env\n    labels:\n      - traefik.enable=true\n      - traefik.docker.network=traefik\n      - traefik.port=80\n      - traefik.backend=matomo\n      - \"traefik.frontend.rule=Host:stats.nicco.io;\"\n    networks:\n      - traefik\n      - default

\n\n\n\n

# .env\nMYSQL_DATABASE=matomo\nMYSQL_USER=matomo\nMYSQL_PASSWORD=<random bytes>\nMYSQL_RANDOM_ROOT_PASSWORD=yes\n\nMATOMO_DATABASE_HOST=db\nMATOMO_DATABASE_ADAPTER=mysql\n\nMATOMO_DATABASE_DBNAME=matomo\nMATOMO_DATABASE_USERNAME=matomo\nMATOMO_DATABASE_PASSWORD=<random bytes>

\n\n\n\n

See the code for this website.

\n","status":"publish","date":"2021-01-28T11:40:15","modified":"2021-03-23T09:13:58","tags":{"nodes":[{"id":"dGVybTo2NQ==","slug":"blocker","name":"blocker","count":1},{"id":"dGVybTo2NA==","slug":"matomo","name":"matomo","count":1},{"id":"dGVybTo2Ng==","slug":"stats","name":"stats","count":1},{"id":"dGVybTo2Nw==","slug":"tracking","name":"tracking","count":2}]},"post":{"featured":{"srcSet":"https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-300x200.jpg 300w, https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-1024x683.jpg 1024w, https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-150x100.jpg 150w, https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-768x512.jpg 768w, https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-1536x1024.jpg 1536w, https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-2048x1365.jpg 2048w, https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-500x333.jpg 500w, https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-800x533.jpg 800w, https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-1200x800.jpg 1200w, https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-1500x1000.jpg 1500w, https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-2000x1333.jpg 2000w","altText":"","sourceUrl":"https://api.nicco.io/wp-content/uploads/2021/01/luke-chesser-JKUTrJ4vK00-unsplash-scaled.jpg"}}}]