How Ad Blockers Work
By: Connor Finnegan
Tags: JavaScript, Algorithms, Web Development, Web Design, Programming

How Ad Blockers Work

And What They Mean For Web Developers

Not in my house!

The battle over online advertisements is frustrating for everyone. Users are tired of being bombarded by ad-heavy sites, and with autoplay videos and cursor-tracking technology making ads even more invasive, it was only a matter of time before some users said: “Enough.”

Shoutout to The Oatmeal

On the flip side, content creators are facing a grim financial picture. Ads are by far the most effective way to make money off of a successful website that receives lots of traffic and now, just because a few bad eggs go overboard with ads, they’re expected to come up with new ways to monetize? It’s no wonder so many beloved independent sites have had to shut down recently.

In the middle of this battle is the ad blocker. If you don’t use one yourself, chances are one of your friends does. According to a recent Deloitte survey, 31% of Americans used some form of an ad blocker on their computer in 2017, up from 24% in 2016. As ad blockers continue to rise in popularity, it’s worth investigating: What does an ad blocker actually do?

In the interest of simplicity, I’ll be looking at Adblock Plus for the rest of this piece. It’s one of the most popular ad blockers in the world at over 500 million downloads, and it’s the one I personally use.

What Does Adblock Plus Do?

At the most basic level, Adblock Plus filters out elements of a website from being loaded or displayed.

How Does AdBlock Plus Determine What to Block?

Adblock Plus says they’re not looking to block all ads, and in a 2009 survey, only 25% of Adblock Plus users said they were strictly against all advertising. As such, the default feature on the extension still allows ads deemed acceptable to display on sites. If that gives you pause as a user, consider that their list of rules is pretty stringent:

Basically, all the annoying stuff users hate

Some of these restrictions are based on the nature of the element itself and how it behaves on the page, while others, like in the diagrams below, simply state that the ad can only take up a certain percentage of the page and can only do so in a manner that does not distract from the page’s main content.

How Does Adblock Plus Actually Block the Ads?

The two mechanisms Adblock Plus uses to prevent an ad from loading on your page are HTTP request blocking and element hiding. HTTP request blocking does the bulk of the work out of these two. Many ads are stored on another server, and if a site is trying to load an element from a banned domain or with the wrong keywords, Adblock Plus will block the HTTP request and keep the element from being loaded onto the page. This keeps the ads off your page and decreases the amount of time it takes for a web page to load.

In cases where the ad is stored on the site itself, Adblock plus will apply a CSS filter to simply have it not display. These display filters are in a user stylesheet which Adblock Plus loads onto the site using uses the stylesheet service nsIStyleSheetService. Since user stylesheets have the highest possible importance, they will overwrite the existing CSS for the site in question.

Goodbye, ad.

How This All Happens So Quickly

One of the key selling points of ad blockers is faster page loads, so it makes sense that the Adblock Plus creator Wladimir Palant obsessed over which algorithm would streamline the tool’s filter-matching process the most, as detailed in this post. As Palant outlines, the filter-matching process was the most effective when he implemented a modified Boyer-Moore algorithm. This algorithm combines two approaches to pattern match more efficiently: the Bad Character Heuristic and the Good Suffix Heuristic. The Bad Character Heuristic will take the first mismatching character (going from right to left) and look for a matching character further back in the pattern.

Since there’s no way there will be a match if the character does not appear anywhere in the pattern, if no matching character is found, the whole pattern will be moved beyond the mismatching character. This saves time while searching for matches.

Bad Character Heuristic in action.

The other technique used in the algorithm is the Good Suffix Heuristic. If a few characters match between the pattern and the string (again, scanning from right to left), this will look to see if the matching suffix occurs anywhere else in the pattern. If so, it will shift the pattern down to align the other instance of the “good suffix” in the pattern with the text to test for a match.

This becomes even more efficient when you use the Strong Good Suffix Heuristic. This will exclude any occurrences of the “good suffix” in the pattern that are preceded by the same mismatching character to avoid wasting time checking for the same mismatch.

If there’s no other instance of the “good suffix,” the pattern will be moved past the part of the text being examined to save time.

Here’s what all of this looks like in practice in Javascript in the Adblock Plus code.

What’s a Developer to Do?

While the majority of users still don’t use an ad blocker, the adoption rate is climbing and there’s little reason to suspect that will slow down. At this point, it seems that the best move to make sure the ads on your site are reaching the highest percentage of your site’s visitors possible is to understand the most popular criteria being used by Adblock Plus and other popular ad blockers. It may not always be possible to work within these guidelines, but doing so where possible will create a good user experience and allow you to monetize your site and avoid getting blocked.