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

Question

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.

Assamese

Answer 1

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.

Malda

Great stuff – I appreciate your comment re: XSS, which makes lots of sense. Yet I’m still not sure about something. The content in question looks like it’s not within the <iframe>, which you suggest may be true (and explain how it’s possible). But it doesn’t seem to be that this is the case, from inspecting the DOM. And it would expose my name and Gmail address to malicious parents (unless wrapped in a second iframe)! – Assamese

@Alan H. Yeah they are doing some bizarre stuff with dynamic iframes. Do you click on the +1 you'll get the the window where you add a comment. If you load up firebug and inspect that element then you'll get an iframe src for plusone.google.com/u/0/_/+/fastbutton?url=... This iframe contains the CSRF token for submitting to google+. – Malda

In some cases, you may avoid Cookie's hijacking by setting them with httponly. – Collogue

@Collogue yeah but that doesn't stop XHR's. – Malda

Answer 2

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.

Necrose

As Rook explained in his answer, the <iframe> is used to prevent site using the Google +1 widget code from using CSRF attack to click the link by itself (and artificially improving site's +1 rating). That's the part where Google is not trusting you. – Amphidiploid