System Design : Ad/Commercial Blocker App/Browser

Hi, a warm welcome to tech-maze, in this article, we will explore how few browser or ad/commercials blocker app blocks the unwanted trackers, advertisement etc. when we visit a page or stream videos.

In general when a user open a page or play a video, a set of following steps executes internally

-- user opens a url in browser

-- request goes to DNS

-- DNS redirect to the actual server which has exposed the page

-- server process the request and send the page as a response back to browser server

-- browser server redirect the page to its browser

after opening the page, browser server receives requests directly from multiple domains (via other hosting servers) for user data (in few cases) and to show the advertisement.

Malicious tracker mostly gets removed by the browser server and accepts registered, sometime unregistered ad request and process it, once browser server process these request, ad starts appearing on the client's browser.

following diagram precisely illustrate the process which we have discussed till here

Now lets check how ad/commercials play on any streaming platform, when user play any video.

-- user loads a video

-- request goes to website server

-- website server fetches the video from distributed file system and starts playing the video

-- in parallel, website server gets multiple http request to play ad/commercials in between the videos.

-- playing an ad within the videos, depends on the time interval, frequencies, amplitude, low-high node combination etc, we will surely look into this in upcoming article, for now will focus on the current topic.

when application receives a request to play an ad/commercial, it pause the video at a particular time and play the ad/commercial,

when ad/commercial ends, it resumes the video, since these ad/commercial request are already validated, the overlay of ad/commercial over the running video runs seamlessly without any interruption or hiccups.

So this is how ad/commercial shows or play on a page or streaming platform, now lets begin with our actual topic, how ad/commercial gets blocked by browser or ad blocker app.

Following are the most common ways used to block ad/commercial

1. It places a blocker service in browser server so that when any request which doesn't originate from its browser, instead originate from different domain or server, these request has to go though blocker service before actual processing.

Blocker service blocks all unwanted http request, in few cases browser maintains a domain list, and make sure that only ads from these domain will be processed by the browser server and blocks rest all incoming http request.

2. Sometime few unwanted http request passed the blocker service requirement due to its element type, in this scenario, application hide those ads(coming as html element) through CSS/in-line styles by verifying few tags such as classname, elementid, classId etc., if classname, classId or elementid doesn't belong to the list (maintains the list in browser server) then these elements refrain to display on the page.