

How Google +1 Widgets "Break Out" of their IFRAMEs - alanh
http://stackoverflow.com/questions/7313037/how-do-google-1-widgets-break-out-of-their-iframe/7313430#7313430

======
hartror

      <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    

Given this is the code you paste on the page I think it is pretty obvious to
anyone who bothers to look.

The CSRF information is great however!

------
Stratoscope
Google +1 widgets _don't_ "break out" of their iframes. They're not in iframes
in the first place.

As the first SO response points out, the widget is JavaScript code that runs
in the host page, so it can easily create and manipulate any kind of DOM
element anywhere in that page. Of course there may be iframes among those
elements, but the JS code isn't limited to that.

~~~
alanh
They _are_ in <iframe>s. Just not one <iframe>, and the code is not originally
included via <iframe>.

But yeah, since it creates the illusion of breaking out, the submission title
has the phrase in quotes.

~~~
Stratoscope
That's right, the bulk of the gadget may run in one or more iframes. I just
meant that they do load a script element into the host page.

Once you do that you can do anything to the page, and you can also use one of
several methods to have this script communicate with scripts inside the
iframes that it creates.

------
joshfraser
Another advantage of using an iframe (besides cross-domain communication) is
that you don't have to reset every CSS style you need. When you insert
JavaScript into a page it inherits all the crazy CSS already on the page which
can cause all sorts of problems. Iframes have their own context and give you
an easy way to avoid that problem.

~~~
alanh
Yup.

Interesting tidbit: HTML5 suggests the `seamless` attribute for <iframe>
elements, which would cause those CSS styles to actually affect the contents
of the <iframe> (and some other changes, like links affecting the location of
the parent window). [http://www.w3.org/TR/html5/the-iframe-element.html#the-
ifram...](http://www.w3.org/TR/html5/the-iframe-element.html#the-iframe-
element)

(Of course, you meant to say “when you insert typical content DOM nodes”, not
“insert Javascript”.)

~~~
joshfraser
that is what I meant to say. thanks for clarifying.

------
lurchpop
Twitter and Facebook also have script tags sitting on most websites so
technically those scripts could do whatever they wanted to your page. I
believe it's possible, however, to create LIKE and TWEET buttons using direct
iframe tags with no need for a lib. That's the method i prefer.

