Crafting an Effective Hotlink Response

by pizza

It's inevitable

Weigh Our Options

1. Do nothing.
2. Do something.
   1. Communication.
      1. Kindly contact the websites hosting the hotlinks and ask them to remove/modify them.
      2. Threaten the websites hosting the hotlinks with legal action.
   2. Modify the HTTP response.
      1. Send nothing.
      2. Send a modified image back.
         1. Send a clear, gentle indicator that the image is the result of a hotlink, in the hope that the site will notice it and take it down.
         2. Send a carefully crafted image that disrupts the page and/or offends those browsing as much as possible.

Through the Looking Glass

Now that we've decided to substitute hotlink responses with an image of our choosing in place of the original image, what do we send? We're still communicating... so what properties should an effective hotlink image contain?

In essence we are weaponizing an image; we want maximum impact for minimum cost. An assault on the senses.

1. Maximize probability of delivery

   An effective response is one that is heard; we must ensure that the intended recipient is actually capable of viewing the response. In terms of the web this means that the response must be compatible with the browsing software of those viewing the resulting page.

   In terms of image types there are two that are overwhelmingly, widely supported: JPEG and GIF. Many other formats exist (PNG, BMP, etc).

2. Maximum visual impact

   An efficient response should stand out clearly from the surrounding page. We cannot know beforehand exactly what the layout/colors of the page are, so we must make an intelligent guess.

   In order to best determine how to draw attention, let us study the opposite art: camoflage.

   • Theory of camouflage
     • Dazzle camouflage
       • Navy ships in razzle-dazzle costumes
   • Tessellation

   Strategies to maximum visual impact:

   • Large size
   • High color contrast with the containing page
   • Movement

3. Clear message

   Given that our goal is to convince the offending sites to remove the hotlinks, we should give them as much information as possible as to which link it is.

4. Annoying/disturbing to view

   An effective image should be as annoying and/or disturbing, in and of itself, as possible. This will help in goal #1; but will prioritize the removal of the hotlink from the site; lest the site continue serving pages containing this image.

   Annoy

   How does one most effectively annoy?

   • High contrast colors
     • Maze classification
   • Jerky motion
   • Flashing
   • Advertising - We can learn something from existing banner ads, whose job is also maximum visual impact.
     • The 5 Most Annoying Banner Ads

   Disturb

   How does one most effectively disturb? Disturbance is more in the realm of psychology... by definition in order to disturb someone we need to show them something they think is wrong in some way. What systems do people use to decide what is right and wrong? The physical world provides the possible and impossible (for example, we would never see someone walking on the ceiling). Society provides the concept of taboo, cultural conduct guidelines.

   • Taboo examples
   • Cognitive dissonance

5. Disrupt the normal flow of any including page

   An effective response will not only be itself disruptive, but maximize its visual impact by disrupting the including environment as much as possible.

6. As small as possible

   We still have to serve these responses, so we should try and minimize the impact on our own server/bandwidth; serving a small image will also ensure that it loads quickly.

   But how small is small, filesize-wise? What is the smallest an image can be, and what is the relationship between image size, load time and bandwidth?

   Web pages and embedded content is sent via HTTP (HyperText Transfer Protocol), which itself is embedded within TCP/IP (Transfer Control Protocol / Internet Protocol). Most (but not all) TCP/IP is transferred over Ethernet. Ethernet consists of distinct frames of 64 to 1518 bytes. This means that an TCP/IP/HTTP message of <= 1518 bytes should be contained within a single frame; whereas one of 1519 or more bytes would be split into two or more frames.

   	MAC Frame	IP	TCP	HTTP	Data
   bytes	14	20	20-60	~400	~1000

   What does this mean in laymen's terms? It means that there is a diminishing return concerning the efficiency / speed gain regarding an image's size. there is little additional benefit to shrinking an image beyond the point where the HTTP response containing it can fit in a single Ethernet frame. We'll assume for simplicity's sake that the Ethernet, TCP/IP and HTTP headers is ~500 bytes; so that leaves us with approximately 1000 bytes for a most-efficient image payload. As a rule of thumb, each 1000 bytes / ~1k of an image's size translates to a single ethernet frame.

Research

Color

After reading some color theory we decide to throw it all away and go with bright, high-contrast combinations like pink and green and blue and red .

Test Bed

OK, now that we've laid out our goal and priorities, let's try generating some images and then evolving them into efficient responses.

Call Them Out On It

• STOP HOTLINKING image. big and straight-forward. 3k.
• STOP HOTLINKING image, high contrast. 3k.

Polite Threats

• domain asks you to please stop hotlinking. the high-constrast and mangled text makes the image smaller and hopefully adds to the annoyance. this doesn't seem to be effective.

Culture-Specific Offensive

Traditional Annoyances

Visual Assault

Pokémon style

Flashing red and blue has been linked with epileptic episodes in the popular Pokémon television show. Inspired by this I tried a pokémon-style hotlink response. I think this is the most effective so far: it fits within a single ethernet frame, is 300px on each side giving it a formidable size if not resized, and if it is resized it still retains its power. This image, when embedded at full size within a page makes it nearly impossible to read any surrounding text; multiple instances on a single page give me a headache.

Repetitive High-Contrast Patterns

• horizontal stripes, black and clear
• vertical stripes, and and clear
• a closeup of LCD pixels
• checkerboard

Dazzle Camouflage

These I found surprisingly effective; their high contrast and high repetition confuse and disturb viewing, as the human mind tries to make sense of the senseless pattern.

• concentric black and white boxes

Interrupt Page Flow

Next I tried extreme sizes. HTML pages have a "flow" to them; the more complex the page the more it relies on the cooperation of its many components. We try to design a component that will disrupt the natural flow of the page, stretching and distorting it, maybe even pushing parts of it off the screen.

GIF x and y sizes must fit in a 16-bit signed integer, and thus the maximum dimension is ~32,000. So I created images with the minimum and maximum size for each dimension:

• 30000px x 1px tall image designed to stretch page beyond the bottom of the screen
• 1px x 30000px wide image designed to stretch page beyond right edge of monitor

these images are small in filesize and very effective at disrupting page layout, but only as long as the the including page is not specifying the height and/or width attributes; and the images are not being loaded in divs that hide their overflow, which some sites have.

Discomfort

The site of other people under duress or pain.

• ahhh a face screaming
• a man upside down screaming

Unpleasant Human Bodily Functions

• explosive vomiting

Parasites

• a pile of maggots
• maggots on a piece of meat

Shock

Taboo Symbols