Customize Metabse UI without modifying the core code

MetabaseĀ is a tool that allows everyone in your company to ask questions and learn from data: handy when it comes to generate reports, charts and export them into Excel etc..

While it is a good tool but I lacks easy basic ways to customize its UI without forking the repository.. Here I show a workaround to bypass the Content-Security-Policy header in Metabase that restricts loading external style sheets.

DISCLAIMER: Metabase license doesn’t allow this so please use only on your dev environment for education purposes only or buy a licence.

We will be using the Apache headers module for that so lets enable it in Apache

sudo a2enmod headers

Next we need to configure the virtual host for our Metabase, mine was in:

sudo nano /etc/apache2/sites-available/reports.example.com-le-ssl.conf

Then we need to see the current header set by Metabase by using PostMan and making a get request to: https://reports.example.com/questions

Note down the current “Content-Security-Policy” header and append your style source as in:

# Allow loading styles from my server
Header set Content-Security-Policy "default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval' 'self' https://maps.google.com https://apis.google.com https://www.google-analytics.com https://*.googleapis.com *.gstatic.com ; child-src 'self' https://accounts.google.com; style-src 'unsafe-inline' 'self' fonts.googleapis.com app.example.com; font-src 'self' fonts.gstatic.com themes.googleusercontent.com ; img-src * 'self' data:; connect-src 'self' metabase.us10.list-manage.com"

Check this list for parameters and their meanings.

And insert it to your vhost conf under:

<VirtualHost *:443>
ServerName reports.example.com
<HERE>

Now we will hijack one of the metabase style and append our custom style to it: since/app/dist/styles\.bundle\.css wis the last stye in Metabase I will use it for my hijacking.

Add this to the vhosts:

# RedirectPermanent Stylesheet
RewriteEngine on
RewriteRule "^/app/dist/styles\.bundle\.css$" "https://example.com/resources/css/reports.min.css" [R]

Test the configuration

sudo apache2ctl configtest

Restart the server

sudo service apache2 restart