How Google +1 Widgets "Break Out" of their IFRAMEs • Hacker News Board

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#11

Post by joshfraser » Tue, Sep 06, 2011, 7:07 AM UTC

alanh wrote: post #9

joshfraser wrote: post #7

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.

Yup. Interesting tidbit: HTML5 suggests the `seamless` attribute for elements, which would cause those CSS styles to actually affect the contents of the (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... (Of course, you meant to say “when you insert typical content DOM nodes”, not “insert Javascript”.)

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

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#12

Post by paulbaumgart » Tue, Sep 06, 2011, 8:50 AM UTC

joshfraser wrote: post #7

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.

Related: if you're only using the iframe for the CSS reset, you can also just document.write its contents, so the client doesn't need to do a separate request and the iframe is on the same origin as its parent frame. Example: https://github.com/cappuccino/cappuccino/blob/master/AppKit/...

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#13

Post by lurchpop » Tue, Sep 06, 2011, 10:55 AM UTC

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.

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#14

Post by ristretto » Tue, Sep 06, 2011, 12:09 PM UTC

lurchpop wrote: post #13

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.

You can still use the iframe version of the facebook like button, but they've removed the relevant documentation.

Still i think all these buttons are malicious and a privacy nightmare. I 'd rather the browser vendors decided to standardize an extra sharing button, just like they effectively standardized the search field.

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#15

Post by colinr » Tue, Sep 06, 2011, 1:06 PM UTC

joshfraser wrote: post #7

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.

Although one major disadvantage I've discovered recently is that if you embed an iframe (with a no-cache response header, i.e. Facebook's like button) it stops Firefox adding the page to the back-forward cache. Same with Webkit if the protocols don't match. https://developer.mozilla.org/en/using_firefox_1.5_caching

I wonder how much extra bandwidth Facebook has wasted worldwide by doing this? Twitter allows caching for 30 mins at least, good enough for back/forward caching to be useful.