How do Google+ +1 widgets break out of their iframe?

Somehow, hovering over a Google+ plus-one widget can introduce a tooltip-type deal that is clearly larger than the <iframe> element in which it is contained. I’ve inspected the DOM to confirm this.*

So:

1. What? How!?

2. Is this not a massive opportunity for clickjacking, if used maliciously? (Imagine someone doing a MITM for these social widgets!)

*Update: What I saw was that the tooltip-y message was in a second, dynamically created iframe.

The Google +1 widget is JavaScript that runs on your website that is building an iframe. This JavaScript widget is running within the context of your website and therefore is not constrained by the Origin Inheritance Rules for iframes. Therefore this JavaScript widget can set whatever DOM events it wants on the parent site even though it appears to be just a simple iframe.

Another thing, why is Google using an iframe? Why not just generate a div on the page? Well because the link originates from the iframe, a CSRF (cross-site request forgery) token can be embedded in the request and the parent site cannot read this token and forge the request. So the iframe is an anti-CSRF measure that relies upon the Origin Inheritance rules to protect itself from a malicious parent.

From an attack perspective this is more like XSS (cross-site scripting) than UI-Redress. You are giving Google access to your website and they could hijack your users' cookie's or perform XmlHttpRequests against your website if they so choose (but then people would sue them for being malicious and wealthy).

In this situation you HAVE to trust Google, but Google doesn't trust you.

There are ways of mitigating the privacy impact of these web-bugs.

Google uses iFrames to prevent "leaky standard DIVs." Their closure library dialog does the same thing. It is probably just so that other content cannot bleed into the +1 button. http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/dialog.html.