Add custom header to all the http calls make by matomojs.

[SARAVANA1501]

We are hosting Matomo behind gateway service, which is capable of exposing part of matomo endpoint to internet. We need to authenticate every request by certain custom header. The token is available in website cookie which we are trying to track. Is it possible to add that token or key in every request made by matomojs?

[tsteur]

@SARAVANA1501 you mean in the JS tracking request (going eg to matomo.php endpoint?)

[SARAVANA1501]

Yeah

[tsteur]

That's not possible just yet unless you manage to intercept these any XmlHttpRequest or maybe using service workers. Alternatively, you could create a PR that adds this feature.

[SARAVANA1501]

If provide a some technical detail to begin, I am glad to start.

[tsteur]

It's hard to give much technical detail there. Basically, you want to look at the js/piwik.js file.

Add some public method that can be called similar to how this.trackEvent = function (category, action, name, value, customData, callback) { is currently defined.

eg this.setCustomRequestHeader(name, value).

You'd store this in a say configCustomHeaders[name] = value.

These custom headers you would need apply to the method in sendPostRequestViaSendBeacon and sendXmlHttpRequest.

To have this working you would also need to force using POST requests by calling _paq.push(['setRequestMethod', 'POST']).

You would later configure the headers like _paq.push(['setCustomRequestHeader', 'name', 'value...']);

@Findus23 @mattab do we see any issues with allowing people to send custom headers? I suppose if there's an XSS on the site or ad blockers they could configure any random custom headers but I suppose they could also just send the XmlHttpRequest to the Matomo directly if they wanted in that case.

Wondering if this was maybe better done in a custom tracker plugin see https://developer.matomo.org/guides/enrich-js-tracker in which case I would give you different instructions @SARAVANA1501

[SARAVANA1501]

@Findus23 @mattab If you don’t see any issues with implementation, I will contribute to this.

[mattab]

@SARAVANA1501 sounds good, feel free to create a PR and we will review it eventually 👍 Also check to include automated tests in the file: https://github.com/matomo-org/matomo/blob/4.x-dev/tests/javascript/index.php. Thanks for your consideration!

[SARAVANA1501]

@tsteur What about _paq.push(['setCustomRequestHeader', 'name', 'value...']) implementation for scripts generated by tag manager?

[tsteur]

@SARAVANA1501 that could work to have this in the JS tracker. Not sure though what you mean by "for scripts generated by tag manager"?

[SARAVANA1501]

@tsteur While creating container in tag-manager, it is generating tracker js file. we have to configure page with container similar to below snippet

Is it possible to add similar "setCustomRequestHeader" function on these generated files?

[tsteur]

If it's added to the Matomo JS tracker in https://github.com/matomo-org/matomo/blob/4.x-dev/js/piwik.js then it will automatically also be included in the tag manager since the tag manager embeds the JS tracking code automatically.

[joelcoxokc]

Hello, This is actually a critical one for us.
We are using a BFF infrastructure where all requests from the client are proxied through our backed.
We need to send two headers along with the requests to matomo so that they can be consumed in our proxy.

We would really like to use _paq.push(['setRequestHeader', 'MyHeader', 'MyValue']);

[sgiehl]

@joelcoxokc This hasn't been implemented yet, and there are no current plans to do so.

Also implementing this might need some additional effort. By default Matomo tries to send it's requests using sendBeacon. That method afaik does not support providing custom headers. So we also would need to fall back using XMLHttpRequest instead.

[joelcoxokc]

@sgiehl I have been digging through the code to see if I could implement it for you.
So just so I understand...

afaik and XMLHttpRequest do not support setting headers?

I understand that you are requesting the matomo.js
and then sending individual requests per tracking event.

Is it possible to add custom headers to those individual tracking events?
Or is that also run through afaik?

[joelcoxokc]

I see this line, and am wondering if it's possible to tap into this add add an additional header

matomo/js/piwik.js

Line 2916 in cc2ff14

xhr.setRequestHeader('Content-Type', configRequestContentType);

[sgiehl]

The header might need to be set at that place. But there need to be methods added to allow providing the headers to be set. In addition as soon as a custom header is set, the sendbeacon method needs to be disabled, as it doesn't support additional headers.

[arapangabriel]

I see this line, and am wondering if it's possible to tap into this add add an additional header

matomo/js/piwik.js

Line 2916 in cc2ff14

xhr.setRequestHeader('Content-Type', configRequestContentType);

Have same problem
We are using cloudflare whitch provide some access tokens.
Will be greate to have a possabilities to add a custom headers for all matomo requests like
headers: {
"CF-Access-Client-Id": "token-id",
"CF-Access-Client-Secret":
"token-secret"
}