Introduction
There used to be a fantastic chrome extension called uMatrix, written by Raymond Hill, the uBlock Origin developer. uMatrix was an intuitive way to control site permissions and subresource requests.
It looked like this:
This isn’t something you’ll care about unless you’re a nerd – but it let you limit what third parties could serve subresource requests, and controlled access to features like frames, scripts, video, fonts and so on. You can do some of that manually with browser settings, but uMatrix made it quick and easy. This meant that what would otherwise be quite a laborious and fiddly way to browse the web became simple. Okay, not simple, but simpl_er_.
Anyway, I enjoyed all the extra knobs to control website permissions.
The features in uMatrix were – more or less – a subset of the features available in uBlock Origin, so rather than maintain both, Hill deprecated uMatrix and users were encouraged to migrate to uBO.
This actually worked okay for me – uBO added some features I quite liked (e.g. cosmetic filters). and if you didn’t mind writing the more complex rules by hand, it could basically do everything uMatrix could do.
The bad news is that uBO is a legacy MV2 extension, and the successor – uBO Lite – removed this feature.
I really don’t want to give that up – is there a solution?
Options
My question is could uMatrix even be possible under mv3?
declarativeNetRequest
The main difference between mv2 and mv3 here is that it is no longer possible to block requests while you execute a callback, a so-called “blocking” web request.
If you want to intercept a request, it now has to be done declaratively. That just means instead of running some javascript on every single request, you have to declare what actions you want applied in advance.
Here is the controversial bit you’ve probably read about: You can’t do everything that was possible in a callback declaratively, so the capabilities have been nerfed. That is technically true, but practically the rules are flexible enough for everything I would ever want.
Policies
The web already has a system to control features and subresources, it’s called Content Security Policy.
The obvious design is to use declarativeNetRequest to add our own Content-Security-Policy, then the browser will do all the work for us. All we need to do is provide a convenient interface to manage it.
Okay, but how will we offer a list of subresources to allow and deny? When you used uMatrix, it would show you a list of subresource types and origins, and let you manually approve or deny them.
This was the core thing uMatrix did well, so it’s essential. Well, I think CSP already provides a solution! There is a report-to directive that instructs the browser to post any security violations to a reporting endpoint.
All we have to do is enable that feature, add another declarativeNetRequest rule to catch those reports, then populate a list from the reports the browser sent. That’s another task successfuly offloaded 😂
Of course, this will take some plumbing, but the pieces are all there and it seems completely viable to me.
Outline
So now that we have a rough outline for how it could work… someone just has to write a proof of concept. Ah fine, I’ll give it a shot.
Here is a first attempt, matrix³.
It is clearly in a prototype state, but it basically works. I thought I’d post about this on my blog and see if there’s any interest!
The code is minimal – no building or dependencies required, just git clone and then “Load Unpacked” in Chrome.
I am not a web developer, and I clearly have zero UX skills 🦎 Please let me know if this is a bad idea, or you know a better solution, or you want to help.
Instagram Engineering
Shopify Engineering