Anatomy of a Web Beacon

This article is intended to help you understand what a web beacon is and how it works.

Web Beacon

A web beacon is a standard web request for a resource (usually through the hijacking of an image request) that has been created to function as a data communication vehicle.

<img> tag

To help us understand a web beacon better, let's first look at a how a normal HTML image tag works.

Here is a typical pixel image tag:

The browser's rendering engine parses the image line of HTML and will add the image object to the web page's DOM.

DOM is the acronym for Document Object Model and it’s the browsers representation of the web page.  It is basically a series of parent/child hierarchies where everything you can see on the page has a unique mailing address and each element belongs to a parent that belongs to a parent all the way back to the document root.

If the image in question has not already been cached by the browser, the browser’s fetching engine will request it over the internet and hopefully the server that is hosting that image will respond with the image.

Once the image is obtained (either from cache or the fetching engine ) the browser's rendering engine will then display it on the page.

This back and forth is typically repeated multiple times with each new load of the page with most pages have lots of visible images.

Hijacking Images

So how do we hijack a normal request for an image and turn it into a web beacon?  There are two ways:

• Making the image invisible. (1x1 transparent image or non-rendered image object)
• Loading up the request URL query string with data that we want to send to the vendor.

Why hijacking?  This technique allows the marketing vendor access to the data (via their image request URL) they need to save and process it as necessary.

This technique may appear counter-intuitive since the initial intention to the request approach (asking for an image) materializes in proving resources (the data).

And that's how a web beacon works!