Understanding 3rd party iframes security?

Question

Facebook and others offer little iframe snipplets that I can put in my site. Example:

<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>

What I'd like to know is, if I put this code inside my side, could the code they load into my page access the DOM of my page? I see some security isssues if so.

Likewise facebook allows me to put an iframe into their site, this is how facebook applications work. Could I then mine any data off any page that contains my iframe?

Note I used facebook as an example here, but many companies do the same thing so this quesiton is not specific to facebook in any way so I am not tagging it as such.

Also can the parent page access the DOM of the iframe?

Answer 1

Actually there are specific rules of inheritance for iframes. This is apart of the same-origin policy, and I highly recommend reading the entire Google Browser Sec Handbook.

Answer 2

I do know the parent page can access the DOM of the iframe. Recently we had a project at work where we had a site which needed to be 508 compliant. The iframe was not and although screen readers are handling iframes much better, the content within this iframe was not compliant. We loaded jquery library into our site, and then also loaded code into our site to manipulate the iframe (only after it loads) and at that point mashup the iframes content to be accessible.

To give you an idea of how we did it here is a sample of our jquery. (Used a lot of finds and replaces but you get the idea, you could do other things. )

$('iframe').load(function() {
    var f = $(this).contents();
    f.find('#sysverb_back').remove();
    f.find('a.column_head').each(function(){
        $(this).attr('title', $(this).text());
    });         
    f.find('img[title]:not([alt])').each(function(){
        $(this).attr('alt',$(this).attr('title')); 
    }); 
    f.find('input').filter(function() {
        return this.id.match(/sys_readonly\..+|ni\..+/);
    }).each(function() {
        $(this).before('<label for="'+this.id+'" style="display:none;">'+this.id+'</label>');
    });

});

});

Although I do not know if you can from the iframe access the parent DOM.