Today we are going to talk about uMatrix, a more powerful cousin of the uBlock Origin ad-blocker. uMatrix adds Cookie, CSS, Media/Image, Script, XML Http Requests (XHR), Frame, and other types of blocking to your security and privacy arsenal, and it allows the user to fine tune each of these types of blocking to the user’s preference. It is open-source and managed by the same developer that heads the extremely popular uBlock Origin.

It gives you the power to block or allow nearly everything a web page can have, and you can dial in how much privacy and security you want.

uMatrix appears complicated on the surface, but with some guidance and a day or two of experience the app runs pretty much transparently in the background and protects you from all kinds of malware and tracking.

The uMatrix Interface

When you open the uMatrix extension after browsing a site, you see a matrix-style grid. The columns represent the type of request that is blocked, and the rows represent the source of the element that was blocked.

So if we look at youtube.com, we see that 3 cookies were attempted to be set by the page on landing. www.youtube.com tried to add another cookie, 5 css calls, an image, 11 scripts, and three XHR requests, and so on. In total 87 elements were blocked from loading. These represent all kinds of trackers and ad servers.

It’s important to understand that uMatrix is aggressive by design and will block anything that isn’t whitelisted as a safe source automatically. So in this state, YouTube will not work. If I scroll to the bottom of this page, it is supposed to load scripts and XHR requests that load more content, that doesn’t work because it is blocked.

If I click on a video to watch it, I get a nonsense page from YouTube with a giant logo and a gray box with nothing inside prompting me to sign-in.

Managing Elements – How to Allow or Disallow Elements of a Page

So uMatrix is laid out in a “Matrix” style interface, and the individual cells in the grid layout are the key to blocking or allowing content. If you click on the top-half of the element, it turns green, indicating that the next time you load this page, this element or group of elements will be allowed. Alternatively, if you click on the bottom half of the cell, it will turn red, indicating that it will be blocked from loading the next time you load the page.

In the example below, i’ve clicked on the bottom half of the cell to manually block YouTube cookies, but i’ve clicked on the top half of the cell to manually allow CSS and scripts.

Once you get a site working the way you like, you can click on the “lock” icon at the top of the uMatrix interface and it will save the settings that you’ve edited for that page, and all future visit will automatically apply those settings.

So there’s multiple ways to go about fixing broken elements using uMatrix’s interface, and i’ll show them each with increasing privacy controls.

Blanket-Allow – Allowing All Elements On a Particular Site

By clicking the “power button” at the top-middle of the uMatrix interface, you are telling uMatrix to allow ALL elements to load from YouTube.com. This includes ad servers, cross site calls to other sites, etc. This disables all uMatrix protection for sites that you trust. This button is good for things like Banking websites and e-commerce that need to use secure scripts and XHR requests for checkout, etc. It is generally a bad move for privacy-unfriendly sites or sites with hundreds of elements.

BETTER: Allowing Certain Types of Elements to Load – Fire and Forget but not Ideal Security/Privacy

This method allows groups of elements through. In this example i’ve blanket allowed images, scripts, and cross-site http requests. uMatrix is smart enough to have a black-list for the worst of tracking and ads that it will not allow even when you blanket allow types of elements. You have to scroll down and manually allow those (who would?).

The reason that this isn’t ideal is that it loads a substantial amount of extra code that is not required for the site to function. This is likely used to do some form of tracking and analytics. So it blocks the worst elements, but not everything.

BEST: Fine-Tuned Control – Only Allowing Critical Elements

We can go through and only allow the scripts, css, and XHR that make the site the function the way we want it to.

You can see here that i’ve manually allowed the XHR requests to the video servers, the css that formats and sizes elements on the page properly, and the scripts that make the links and player itself work. You can see that the preview images are still broken because I haven’t allowed them in uMatrix. If I allow the image requests as well I will have a normal looking YouTube page with Gambino’s icon and the preview images.

This configuration blocks new elements every time they appear on your browser. This means that if you load more videos, it is possible to hit different video servers to load your video, and the request will need to be permitted.

The good news is, that after a day or so of manual updates, you can generally surf sites like YouTube without needing to do much updating on uMatrix.

With this configuration and clicking on 10 links in YouTube, over 2200 elements were blocked from loading.

This guide is part of a series that intended to show users how to significantly increase their resistance to digital surveillance and increase their digital security. See our Firefox Hardening Guide for more information about making your browsing safer!