Operation n

pdp recently released, “Backdooring Images” where he discusses reasonably well-known but a relatively un-used technique whereby an attacker can store code in an image file.

The browser’s “trust” of imaging on the web is rather frightening and somewhat disturbing. This post discusses “hacking with images on the web”. Alot of the initial work in this post was done by pdp.

Introduction to Web Images

Images represent information in terms of dimensions, form and colour. Because of these characteristics, they are widely used in many rich graphical environments. As a part of the rich graphical environment family, the browser supports images at its base. Since the beginning of the modern browser, images have been widely used and of course abused.

First lets have a quick look how images are implemented in the browser context.

Images in the Browser

The browser supports many types of images. They are usually defined by IMG tags which are part of a number of graphical elements available in the SGML/HTML/XHTML families of markup languages.

IMG tags are very simple in nature so we are not going to spend much time on how to implement them. A simple example of an image tag is as follows:

<img src="http://localhost/test.jpg"/>

The example above simply loads test.jpg from localhost and shows it inside the current document.

Like many other elements in DOM, image tags support several special event methods:

Method - Description

• onAbort - triggers when the user aborts the download of an image
• onBlur - triggers when the user looses the focus an image
• onClick - triggers when the user clicks on the image
• onError - triggers when an error occures
• onFocus - triggers when the image receives focus
• onLoad - triggers when the image loads

These event methods are the core of user-image Interaction Design principles available in the browser.

Assigning events is as simple as creating a new attribute inside an image tag. For example:

<img src="http://localhost/test.jpg" onload="image_loads(this)"/>
<script>
function image_loads(img) {
alert(img.src);
}
</script>

The snippet above executes “image_loads” function as soon as the image starts loading. The result: An alert box showing the location of the image.

Creating images with IMG tags is quite straight forward but this method is for static content. Sometimes this is not the most desirable approach, especially when dealing with dynamic documents.

Loading images dynamically can be achieved in several ways; each one produces various degrees of flexibility. Probably the simplest way is to create an image element via the document DOM as follows:

var img = document.createElement('img');
img.src = 'http://localhost/test.jpg';
document.body.appendChild(img);

The code above dynamically creates an image inside the current document. Upon execution, the image will load as soon as the document body receives the new element as a child.

JavaScript is fairly flexible and as such allows us other methods of dynamically loading images. For example, an image can be loaded with the special “Image” object. This can be achieved with the following snippet of code.

var img = new Image();
img.src = 'http://localhost/test.jpg';
document.body.appendChild(img);

Note: This is the port scanning technique jssWebImage uses, which was originally taken from AttackAPI

The above-mentioned techniques are used differently: The first one will not load the content of the image unless it is included in the document structure via document.body.appendChild(img), the second uses the Image object to load the image regardless of the document structure.

It is the flexibility and “trust” that browser images provide that has allowed for some rather deviant behaviour.

To follow:

1. Port Surfing with Images
2. Server Fingerprinting
3. Firefox Extension Scanning
4. CSRF Attacks with Image objects

To be continued…