Mar 10, 2008

Crafting An Effective Hotlink Response, Part 1

It's inevitable, people are going to hotlink your website content.

"That's the beauty of the Internet baby, you can steal whatever you need!"
c*rterman
Continue reading to learn about theory and my research or jump right to the response gallery.

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.
These are all valid responses given the proper context. This page is about option 2.2.2.2; that is: crafting the most vile, offensive, disrupting image response as possible in an attempt to effectively dissuade hotlink offenders. While certainly the most juvenile option, it is also the one of last resort after all the other options have inevitably failed. For discussions of other options, ask google.

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.

    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?

    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.

  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

Often all that is required is for you to publicly address a person's private misdeed, and they will be shamed (and socially pressured) to change their ways. Sadly, online, this doesn't appear effective.

Polite Threats

Culture-Specific Offensive

Language

  • "fuck off" (favicon-sized)
  • "what the fuck" in russian. One of the sites hotlinking me is a .ru domain; I thought i'd try offending them in Russian. I have no idea if the translation is accurate.

Middle Finger

Traditional Annoyances

Advertisement

Perhaps impersonating an advertisement will annoy them. Site owners may notice...
For one's own site
Faux real advertisements

Errors

Perhaps we can annoy/confuse viewers by showing them an image that is associated with errors

Pest

Logic Bomb

Science fiction abounds with logic bombs, weapons against conscious computers designed to trigger an infinite loop or other destructive behavior. How about trying the same with the human brain?

Optical Illusions

Due to the way human vision works, it is possible to construct images to fool the mind into perceiving something incorrectly. Unfortunately these images need to be pretty large. Someday I may come up with a small example, but IU haven't been able to find/construct one.

Intentionally Unintelligible Image Contents

Humans naturally attempt to make sense of any images presented to them. How about constructing an intentionally damaged/unintelligible image?

...the problem with these annoyances is that they are too subtle. The sites that often include these images are often cluttered, trashy forum sites anyways, strewn with image garbage. These will likely not be noticed amid the clutter.

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

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.

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:

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.

Unpleasant Human Bodily Functions

TODO: plenty

Parasites

Shock

At first I attempted to harness infamous internet shock pictures; their content and resulting notoriety helps make it clear these are not the intended images and should provoke a response. I cropped, shrunk and down-sampled the photos to get them under 1k.

Standard Shock Images

These are offensive and efficient, but their small size and static nature leave something to be desired.

Gore

Disturbing images of mangled bodies. TODO:

Taboo Symbols

Swastika

There are few symbols more identifiable and reviled in the west than the Nazi swastika.

Cultural Taboo

Homosexuality

Penis

  • a penis hotlink image. frankly the other stuff hasn't been working so well, so I took a little inspiration from Fight Club and tried splicing in a picture of an erect penis. people seem to notice.
  • Mr. Penis. sends the same message in possibly a slightly friendlier way.
  • penis icon. meant for replacing a hotlinked favicon.ico

Combinations of Taboos

Miscellaneous

I tried a myriad of different images; you can browse them
Hopefully after peeking at some of the images above you are shocked, offended, even neaseous. That is the point. The purpose of the images is to convey that feeling.

I hope my research and experimentation can help you in dissuading your own hotlinkers.

Comments

Ryan Flynn is a programmer and problem solver.