Written by: Christoph Wille
Many users surfing the Net use so called banner blockers (ad blockers), which block advertising banners - a well known tool in this category is the WebWasher. However, there are many Web sites on the Internet financing their contents by means of banner advertising on their pages. For these Web sites, such tools as the WebWasher truly are "Killer Apps" as they effectively filter out their source of revenue.
As a colleague of mine uses WebWasher, I sat down with him to discuss the technical possibilites for outwitting WebWasher as a Web site operator:
The last item sounds almost naive, but after some thoughts this was the approach we liked best.
The Basic Idea
The idea behind this is amazingly simple: every modern browser supports CSS and DIV tags. Using CSS, DIV tags can be rendered invisible - it is thus a nearly obvious idea to hide the page content inside an invisible DIV tag until the banners were loaded. In case the banner does not arrive, the DIV tag won't be set to visible - tough luck for the advertisement shy.
In the file bannerpage.htm I have implemented a simple page using this idea:
There are two DIV tags - pleaseWait containing the message that the page is being loaded and mainDiv which is hidden and encloses the content of the page which is to be protected. The onload event with the function yesImage is hooked to the image tag - when the event triggers, the image is done loading and the visibility of the two DIV tags is swapped.
With this, our content is efficiently protected - should the image be 'killed' by a banner blocker, the event is never triggered. As CSS is automatically executed, the user also will not have a chance to render the content visible (unless he saves the file to disk and modifies the HTML).
The idea behind the "please wait" message containing the link is to let the customer who does not get to see the content due to blocking go to a page where he will find a courteous explanation of why he did not get to see anything. On sites with only a few banner ads (such as AspHeute) most visitors will probably not be upset.
Implementation in ASP
I implemented the desired functionality in bannerfunctions.asp which can be included into any file to be protected.
An important prerequisite for us is that the names of the DIV tags are not to be set as givens. This suggests that we might adapt the functions of the German-only article Generierung eines sicheren Passworts somewhat:
<script language="vbscript" runat="server"> Function GenerateRandom(ByVal Laenge) Dim intI, strRandom strRandom = "" For intI = 1 to Laenge strRandom = strRandom & GenerateCharacter() Next GenerateRandom = strRandom End Function Function GenerateCharacter() Dim intRnd, strRnd Randomize Do intRnd = Int(Rnd * 60) If intRnd >=52 Then strRnd = CStr(intRnd - 51) ElseIf intRnd >= 26 Then strRnd = Chr(Asc("A") + intRnd - 26) Else strRnd = Chr(Asc("a") + intRnd) End If Loop Until (strRnd <> "0" And strRnd <> "l" _ And strRnd <> "I") GenerateCharacter = strRnd End Function </script>
By calling the function GenerateRandom we obtain a random string of characters we can use as names for DIV tags, variables and functions as well. GenerateRandom first shows up in the functions ShowWaitMessage and PreCreateSections.
<% Dim m_nSections, m_arrSections(), m_strFunctionName, m_nNumberOfImages Dim m_strWaitSection m_nSections = -1 m_nNumberOfImages = 0 Function ShowWaitMessage() Dim strMessage m_strWaitSection = "div" & GenerateRandom(12) strMessage = "<div id=""" & m_strWaitSection & """>" & vbCrlf strMessage = strMessage & Please wait while the page is being loaded. " strMessage = strMessage & "Should you experience problems, " & _ "<a href=""xplain.htm"">please klick here</a>." strMessage = strMessage & vbCrlf & "</div>" & vbCrlf ShowWaitMessage = strMessage End Function Sub PreCreateSections(ByVal nSections) Dim i m_nSections = nSections ReDim m_arrSections(nSections) For i = 0 To (nSections-1) m_arrSections(i) = "div" & GenerateRandom(10) Next m_strFunctionName = "set" & GenerateRandom(15) End Sub
The function BeginSection marks the beginning of a content section, while EndSection marks its end. Why hide several content sections at all? Well, we won't want to make it too easy for blockers to strip out our code, won't we?
A Banner-Enforcing Page
Enough of preparatory work - now what does the code look like that we have to insert into a page that is to be protected? An example is bannerpage.asp:
<% Option Explicit %> <html> <head> <title>Bannerpage</title> </head> <body> <!--#include file="bannerfunctions.asp"--> <%=ShowWaitMessage()%> <%PreCreateSections(2)%> <%=BeginSection(1)%> <p>This content is only diplayed after the Banner has loaded - together with the Banner.</p> <img src="http://ads.softartisans.com/servead.asp?s=11&b=1" <%=GetImageFunction()%>> <%=EndSection()%> <%=BeginSection(2)%> <p>Further text, merely intended to be a demo.</p> <%=EndSection()%> <%=GetDisplayFunction%> </body> </html>
The HTML then looks as follows:
With each request of the page the IDs of the DIV tags, the function name and the variable storing the number of images change. Mixed with a number of content sections this is a tough one to crack for banner blockers.
The script presented of course isn't flawless - the lengths of the names of the DIV tags, variables and function should change randomly. One problem, however, cannot be solved by this script, even with the cleverest modifications: the banner blocker sends a placeholder image instead of the banner ad.
Downloading the Code
Click here to start the download.