Feross.org

Mozilla just landed a really cool new extension to the CSS background-image property in the Firefox 4 nightlies. The new extension allows you to use arbitrary DOM elements as background images. The syntax looks like this:

#iWantBackground {
    background: -moz-element(#sourceElementID);
}

-moz-element lets you use virtually any element as a background, including iframes and canvas elements. I wanted to play around with it a bit, so I hacked a quick demo of an iframe with a live-updating reflection. It borrows heavily from the code in this excellent article.

Demo
(Works in Firefox 4)

I know that lots of my readers aren’t running the latest Firefox nightly, so here’s a screenshot of what the reflection effect looks like:

Here’s the code I wrote:

    <style type="text/css" media="screen">

        body {
            background: #000;
        }

        #main {
            margin: 30px auto 0 auto;
            width: 800px;
        }

        #source {
            display: block;
            width: 800px;
            height: 480px;
            border: 0;
        }

        #reflection {
            margin-top: 5px;
            background: -moz-element(#source) bottom left no-repeat;
            -moz-transform: scaleY(-1);
            height: 200px;
            border: 0;
            mask: url(#reflection-mask);
        }

    </style>

    <div id="main">
        <iframe id="source" src="http://en.wikipedia.org/wiki/Color"></iframe>
        <div id="reflection"></div>
    </div>

    <!-- SVG from http://hacks.mozilla.org/2010/08/mozelement/ -->
    <svg>
      <mask id="reflection-mask" maskContentUnits="objectBoundingBox">
        <rect x="-0.1" width="1.2" height="1" fill="url(#reflection-gradient)"/>

      </mask>
      <linearGradient id="reflection-gradient" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
        <stop stop-color="white" stop-opacity="0.6" offset="0"/>
        <stop stop-color="white" stop-opacity="0" offset="100%"/>
      </linearGradient>
    </svg> 

Also, I decided to add a new hacks section to my blog to keep track of all the random code I write.

Related Posts

1. Detect Proxy Usage in Firefox
2. Konami Code

I recently read about an interesting browser information leak on ha.ckers.org and decided to code up a proof-of-concept.

It allows a malicious website to detect whether the user is browsing through a proxy or not by using image tags. Proxies are often used by corporations, political dissidents, and privacy conscience Internet users because they can provide additional security or anonymous Internet browsing.

Here’s how the exploit works:

Firefox uses square brackets [ ] to denote IPv6 addresses, but this notation also works to describe IPv4 addresses (I’m not sure exactly why).

So, if we embed an image with src=”http://[74.207.246.197]/pic.jpg” into a page, Firefox automatically resolves [74.207.246.197] into the IP address 74.207.246.197.

However, if the user is browsing through a proxy, this automatic resolution doesn’t happen. Instead, Firefox asks the proxy to do a DNS lookup for the “domain” [74.207.246.197], which obviously fails since it’s not a valid domain name.

Most proxies don’t know how to handle the bracketed domain, so the DNS lookup fails. I’ve tested this on Tor (popular proxy for anonymous Internet browsing), PHP Proxy and CGI Proxy (the top two web-based proxies), and Proxify (popular commercial web proxy).

So, if the image fails to load, we know that the user is browsing through a proxy. Add some Javascript to detect when the image fails to load and you’ve got a working proxy detector.

Demo
(Works in: Firefox 3+. Update: Looks like it works in Safari 5, too.)

This, of course, assumes that the user is not blocking cross-domain requests. Also, my implementation requires Javascript to be enabled, but that’s not a necessity.

Here’s the code I wrote:

<script type="text/javascript" charset="utf-8">
    function setUsingProxy() {
        proxy = document.getElementById('proxy');
        proxy.style.display = 'block';
        no_proxy = document.getElementById('no_proxy');
        no_proxy.style.display = 'none';

    }
</script>

<div id="proxy" style="display:none;">
    You are accessing the Internet through a proxy (corporate proxy, VPN, or <a href="http://www.torproject.org/">Tor</a>).
</div>

<div id="no_proxy">
    You are accessing the Internet directly. No proxy.
</div>

<img src="http://[74.207.246.197]/organize.jpg" style="height:0;width:0;display:none;" onerror="setUsingProxy()">

This attack only affects Firefox, as far as I can tell.

Credit for the idea: Ha.ckers – Quick Proxy Detection

Related Posts

1. Using CSS3 to add reflection to an iframe
2. Post to Tweetie from Google Reader

Every system has two sets of rules: The rules as they are intended or commonly perceived, and the actual rules (“reality”). In most complex systems, the gap between these two sets of rules is huge.

Sometimes we catch a glimpse of the truth, and discover the actual rules of a system. Once the actual rules are known, it may be possible to perform “miracles” — things which violate the perceived rules.

Hacking is most commonly associated with computers, and people who break into or otherwise subvert computer systems are often called hackers. Although this terminology is occasionally disputed, I think it is essentially correct — these hackers are discovering the actual rules of the computer systems (e.g. buffer overflows), and using them to circumvent the intended rules of the system (typically access controls). The same is true of the hackers who break DRM or other systems of control.

Writing clever (or sometimes ugly) code is also described as hacking. In this case the hacker is violating the rules of how we expect software to be written. If there’s a project that should take months to write, and someone manages to hack it out in a single evening, that’s a small miracle, and a major hack. If the result is simple and beautiful because the hacker discovered a better solution, we may describe the hack as “elegant” or “brilliant”. If the result is complex and hard to understand (perhaps it violates many layers of abstraction), then we will call it an “ugly hack”. Ugly hacks aren’t all bad though — one of my favorite personal hacks was some messy code that demonstrated what would become AdSense (story here), and although the code was quickly discarded, it did it’s job.

Hacking isn’t limited to computers though. Wherever there are systems, there is the potential for hacking, and there are systems everywhere. Our entire reality is systems of systems, all the way down. This includes human relations (see The Game for an very amusing story of people hacking human attraction), health (Seth Roberts has some interesting ideas), sports (Tim Ferriss claims to have hacked the National Chinese Kickboxing championship), and finance (“too big to fail”).

We’re often told that there are no shortcuts to success — that it’s all a matter of hard work and doing what we’re told. The hacking mindset takes there opposite approach: There are always shortcuts and loopholes. For this reason, hacking is sometimes perceived as cheating, or unfair, and it can be. Using social hacks to steal billions of dollars is wrong (see Madoff). On the other hand, automation seems like a great hack — getting machines to do our work enabled a much higher standard of living, though as always, not everyone sees it that way (the Luddites weren’t big fans).

Important new businesses are usually some kind of hack. The established businesses think they understand the system and have setup rules to guard their profits and prevent real competition. New businesses must find a gap in the rules — something that the established powers either don’t see, or don’t perceive as important. That was certainly the case with Google: the existing search engines (which thought of themselves as portals) believed that search quality wasn’t very important (regular people can’t tell the difference), and that search wasn’t very valuable anyway, since it sends people away from your site. Google’s success came in large part from recognizing that others were wrong on both points.

In fact, the entire process of building a business and having other people and computers do the work for you is a big hack. Nobody ever created a billion dollars through direct physical labor — it requires some major shortcuts to create that much wealth, and by definition those shortcuts were mostly invisible to others (though many will dispute it after the fact). Startup investing takes this hack to the next level by having other people do the work of building the business, though finding the right people and businesses is not easy.

Not everyone has the hacker mindset (society requires a variety of personalities), but wherever and whenever there were people, there was someone staring into the system, searching for the truth. Some of those people were content to simply find a truth, but others used their discoveries to hack the system, to transform the world. These are the people that created the governments, businesses, religions, and other machines that operate our society, and they necessarily did it by hacking the prior systems. (consider the challenge of establishing a successful new government or religion — the incumbents won’t give up easily)

To discover great hacks, we must always be searching for the true nature of our reality, while acknowledging that we do not currently possess the truth, and never will. Hacking is much bigger and more important than clever bits of code in a computer — it’s how we create the future.

Or at least that’s how I see it. Maybe I’ll change my mind later.

See also: “The Knack” (and the need to disassemble things)

From: Paul Buchheit’s blog

Related Posts

1. Konami Code
2. Richard Stallman Comes to Stanford
3. You filled your room with balloons! Why?

This is how my iPhone looked after I shattered the screen. Such a sad sight...

And then I fixed my iPhone.

Continue Reading ≫

Related Posts

1. Stanford iPhone App Final Project – iBoard
2. Konami Code
3. Why Is This Website Called Google?
4. Facebook Launch Night

Because I’m grownup now, and it’s my turn to decide what that means.

(Thanks to XKCD for giving me something to do with my extra 123 balloons.)

Related Posts

1. Awesome Logo Mashups
2. Josh Keyes
3. Ridin’ Dirty with Chamillionare & Quincy Jones III
4. Cult of Done