Simple bypass for simple "adwalls" #WebGeek

A typical content-hiding "adwall" prompting
users to register before accessing content.

It's quite common these days to arrive at a web page only to be greeted by a content-hiding layer with ads or messages prompting you to perform some action before you can access the web page.  

I employ a handy trick that bypasses many of these popover "adwalls" using nothing but my web browser and a few well-informed mouse clicks...

"Paywalls" versus "Adwalls"
Some websites require paid subscriptions to get past their "paywall" -- these are usually difficult to bypass.

Many non-paywall sites use less sophisticated "popover" techniques to present advertisements or to prompt you for information before letting you see the web page.  These are the sites that my trick often helps with.

 

The trick explained in three sentences or less
Simple adwalls work by adding a layer of content over enough of the normal web page content that you can't get to what you want to see until the adwall layer goes away.  We can often get around this by simply deleting the unwanted layer.  Depending on the web browser used, you can identify and delete the adwall layer with just a few mouse clicks.

Hey, why not just use an "ad-blocker"?
Sure, there are plenty of viable ad-blocker options you can add to your PC or web browser that can automatically help (to various degrees).  Sometimes, though, installing software or web browser plugins may not an option (when using someone else's PC, using a system at the library, etc.)  In those cases a manual "delete the adwall layer" method may be your best option.

Delete the adwall layer: step-by-step
Here's a step-by-step example with screenshots showing a real-world case of bypassing a simple "user registration" adwall.  This includes an example where there is both a popover layer *and* a content-obfusication technique employed to make the web page text unreadable.  We'll address both.

Step 1:  This article is nearly readable with partially-obfusicated text
but is stuck behind a popover "user registration" box.

Step 1 is to visually identify the popover box that we want to
get rid of as we'll need to visually identify it again in step 3.

 

Step 2:  Using the Chrome web browser, right-click on the popover box
(the one we want to get rid of) and select the "Inspect element" option

 

Step 3:  In the code explorer box, move the mouse upwards over each
line of code until you find the piece of code that results in *just*
the offending popover box to be highlighted in blue.

   

 

Step 4:  Right-click the line of code identified in step 3
and select the "Delete node" option.

   

 

Step 5:  Aha!  The popover box is now gone with only three mouse clicks.

However, we see that this website also blurred the text to the point of
being rather difficult to read.  Let's see what we can do about that...

 

Step 6:  Just as we did in step 2, right-click on the area we want to modify
(the blurred text) and select the "Inspect element" option.

  

  

Step 7:  Just as we did in step 3, move the mouse up over each
line of code until you find the line that causes *just* the
blurred text area to be highlighted in blue.

Examining the line of code identified in step 7 we see an inline STYLE attribute with the following values:

  color: transparent;
  text-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 5px;

This style definition is a basic technique to blur text.  It creates a shadow of the text and also makes the original text transparent leaving behind only the blurry shadow.  Tricky!  To fix this we simply need to give the text some color and get rid of the shadow.  Fortunately the Chrome web browser lets us easily do this on the fly...

 

Step 8:  Edit the line of code identified in step 7 by double-clicking
the "style" attribute and changing the contents to "color: black".
You can either delete the "text-shadow" portion (as shown in the
screenshot) or change all the "text-shadow" values to "0".

   

Ta-da!  No more popover and no more blurred text.

Total effort:  6 mouse clicks and a simple text edit.

   

So there you are:  two web browser tricks (deleting items and altering inline code) to impress your friends with.  Hopefully this gives you a solid idea of how to go about bypassing simple popover layers.  I probably use this technique at least once a week and am always rewarded by a small sense of satisfaction and a measure of relief when I don't have to fool with an adwall.

Have any similar techniques you like to use?  Please share in the comments!