Who adds numbers to the query portion of the URL of a css background-image?

Question

I have a mediawiki 1.37 installation with a page using some css file. In this css file I have a background-image referring to a url, such as icon.gif. The browser however issues the network requests to icon.gif?eff18.

Questions:

Which component adds that ?eff18 string?
How can I either determine this string myself (it looks like it is deterministically eff18 but it seems dependent on the specific image file) or turn off this adding of the string, since I need to issue a preload for this file.

What I have checked so far:

The css file as it arrives at the browser references icon.gif without the additional query portion. So it looks like it is not some css preprocessing by the server.
The browser profile is fresh Chrome, no extensions installed.
In a sample html file with css and the same effect does not show up; the example was done on the same web server installation so it probably is not a side effect of some server side mechanism (?).
The effect does show up with the same Mediawiki installation on other Chrome profiles as well as on Firefox. The added string, in my example eff18is the same for this gif file, for other files referenced by css, such as svgs or pngs, it is different.
The css files loaded by the client come without query extension, so it does not look like autoversioning as discussed here How to force the browser to reload cached CSS and JavaScript files

Background: I am familiar with the general idea of adding random query extensions to prevent loading things from cache. I am not familiar with the details of the css loader / minifier of mediawiki - but since the two browsers (Chrome & Fox) both show the background-url unmodified without that string in the css they receive from the server it should not be some fancy minification. In at least two experiments (one of the two chrome profiles and the fresh firefox profile) there is no fancy extension or whatever in place which might intercept the browser request. The thing happens in both browsers. So, who the hell is changing the URL - and how is this done? And, how can I turn this off or at least predict the value added, so I can add a decent preload link with the right extension? And, if I want to use that feature in my own frameworks, how would I activate it?

score 1 · Answer 1 · answered Jan 22 '22 at 15:26

What component adds that string?

That string is a hash of the contents of the file, and is added by MediaWiki's ResourceLoader component. Specifically, ResourceLoader.php on the backend and mediawiki.loader.js on the frontend.

How can I determine this string myself?

ResourceLoader is using the FNV 1 32-bit hash function, so you could always compute the same function (the two source files above each contain an implementation, one in PHP and one in Javascript).

The normal way to handle something like this is to to use a CSS preprocessor. That way you can refer to the unversioned name in your source CSS file, and then have the processor substitute the correct versioned name automatically. I'm not sure the best way to do this with MediaWiki specifically.

How can I turn off this adding of the string, since I need to issue a preload for this file?

ResourceLoader has configuration options, but I don't see a straightforward way to turn this off. Given the complexity of the ResourceLoader architecture, and the fact that it was designed to improve overall performance, it seems unlikely to be worth the effort to try and disable this feature.

score 0 · Answer 2 · answered Jan 22 '22 at 08:37

0

Media wiki use Less.php https://github.com/wikimedia/less.php parser to convert .less file to css file, and that random query string is generated automatically by this library located in ./vendor/wikimedia/less.php you need to hack this library to get what you want but seems too complicated,

If you ask which modules started to parsing that .less file template then you could look at file /resourceloader/ResourceLoader.php, begin at method in line 1862 :

public function getLessCompiler( array $vars = [], array $importDirs = [] ) {
    global $IP;
    ...

However my answer is not complete i hope this will help you ...

answered Jan 22 '22 at 08:37

Putra Budiman

26
3

I am not using less but css. So how would that apply then? – Nobody-Knows-I-am-a-Dog Jan 22 '22 at 13:35
i recommed make your template like an original template should be created, and if you need url automatic versioning for your loaded css resources why not just add some .less file to be parsed by the Less parser, rather than implementing with your own. – Putra Budiman Jan 22 '22 at 13:45
just spare them, which need versioning you could store in .less, and the rest you can leave in regular css file – Putra Budiman Jan 22 '22 at 13:46
Not my question. I have a css file. I do not need automatic versioning but I need to know how these versioning strings are calculated so I can a) turn them off or b) predict the versioning add on. I need to preload a gif but some mechanism adds a versioning string which destroys my preloading mechanism. – Nobody-Knows-I-am-a-Dog Jan 22 '22 at 13:49
Ok, to turn off you need to tweak that Less parser library, may be next time i'll try to find in which file and which line that is... – Putra Budiman Jan 22 '22 at 13:54
Why would I need to tweak the LESS parser library when I am not using less? – Nobody-Knows-I-am-a-Dog Jan 22 '22 at 13:58
Ok i'll try it next time. – Putra Budiman Jan 22 '22 at 14:40

Who adds numbers to the query portion of the URL of a css background-image?

2 Answers2