Theming Monit with Apache ProxyPass

2018-11-09 331 words, 2 minutes
apache
monit
proxy
reverse-proxy
substitute

And suddenly, I felt like Monit Web interface was using too many pastel colors… Looking at the manpage, the HTML source and the source code, it was clear that it couldn’t be themed without a source modification and compilation ; and that’s not fun. But what’s fun is to rewrite the CSS on the fly so that stock-Monit just looks much better, to my eyes.

My Monit runs on localhost and is published by an Apache ProxyPass directive ; which supports live substitution. This is what I needed to replace the CSS.

Configure Apache for substitution

The apache-httpd-2.4.35 package from OpenBSD 6.4 ships with a module named substitute_module which

provides a mechanism to perform both regular expression and fixed string substitutions on response bodies.

Monit Web interface is composed of a single inline CSS block. The idea is to search for the <style type="text/css">...</style> definition and replace it with another one. In my case, I decided to reference an external CSS file that would be hosted in my DocumentRoot.

Apache publishes Monit using ProxyPass directives. For various reasons, I want the new CSS file to appears as if it came from the Monit path. So I had to add a ProxyPassMatch exception so that Apache would know were to find the new CSS file.

The relevant httpd.conf bits are:

(...)
LoadModule substitute_module /usr/local/lib/apache2/mod_substitute.so
(...)
Alias "/monit/monit.css" "/htdocs/monit.css"
ProxyPassMatch "^/monit/monit.css$" !
ProxyPass "/monit/" http://127.0.0.1:2812/
(...)
<Location "/monit/">
(...)
  <IfModule substitute_module>
    RequestHeader unset Accept-Encoding

    AddOutputFilterByType SUBSTITUTE text/html
    Substitute 's|<style type="text/css">.*</style>|    \
      <style type="text/css">@import "/monit/monit.css"</style>|'
  </IfModule>
</Location>
(...)

After an Apache reload, the old CSS code disappears in favor of my modification.