CODEWITHSUNDEEP
htmlcsscachingmediawiki
Nobody-Knows-I-am-a-Dog
Nobody-Knows-I-am-a-Dog

Reputation: 227

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

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:

  1. Which component adds that ?eff18 string?
  2. 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:

  1. 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.
  2. The browser profile is fresh Chrome, no extensions installed.
  3. 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 (?).
  4. 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.
  5. 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?

Upvotes: 4

Views: 218

Answers (2)

Kevin Christopher Henry
Kevin Christopher Henry

Reputation: 48952

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.

Upvotes: 1

Putra Budiman
Putra Budiman

Reputation: 26

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 ...

Upvotes: 0

Related Questions