Blog

How to use Fiddler as an Ad Blocker

Nov/ 28/ 2011HTML, .NET

By Fernando Mendoza.

I’ve been using Fiddler a lot these days. To test how requests and responses go to and come back from the server, being HTML responses, SOAP responses or custom responses from web services.

One website I like a lot is StackOverflow; I use it to find answers when I’m stuck with a programming or configuration issue. I like this site, and even though they don’t have too many ads it still bothers me a bit. So one day I was thinking if it was possible to use Fiddler to modify the HTTP response from the StackOverflow server before it’s rendered by the browser.

Turns out it’s possible, Fiddler has something called Rules that allows you do that. Let’s see how to do that step by step.

The following is a sample page from the site before configuring Fiddler with those changes we want it to apply to the HTML response:
 
 
 

Then we identify those areas we don’t want to be displayed by inspecting the rendered HTML. In my case I use Firebug to help me with this:

 

Now we start Fiddler and go to the Rules menu and select the Customize Rules option (Ctrl + R).

The CustomRules.js file will open (typically in Notepad) and we can start editing it. If we want to use another text editor we can go to the C:\Users\[USER]\Documents\Fiddler2\Scripts folder and open it from there.

Once opened, we search for the OnBeforeResponse function and we make our changes there by using the utilReplaceInResponse() method. Following are the replaces necessary to the HTML response so that the browser doesn’t show the ads and other elements we don’t want to be displayed.

Highlighted code:

static function OnBeforeResponse(oSession: Session) {

...

if (oSession.HostnameIs("stackoverflow.com") && oSession.oResponse.headers.ExistsAndContains("Content-Type","text/html")){

oSession.utilDecodeResponse();

oSession.utilReplaceInResponse('<div class="nav askquestion">','<div class="nav askquestion" style="display: none;">');

oSession.utilReplaceInResponse('<div class="everyonelovesstackoverflow">','<div class="everyonelovesstackoverflow" style="display: none;">');

oSession.utilReplaceInResponse('<div id="footer">','<div id="footer" style="display: none;">');

oSession.utilReplaceInResponse('<form id="post-form"', '<form id="post-form" style="display: none;"');

oSession.utilReplaceInResponse('<div id="sidebar">', '<div id="sidebar" style="display: none;">');           

}

}

Once this is done, we save the file and refresh the page. The elements we don’t want to be displayed will be hidden thanks to the HTML replaces in the rules file.

Following is the final result:

 

 

Comments

Leave a comment

 
 
 
 
CAPTCHA Image Validation