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

I'm assuming cross-domain iFrame since presumably the risk would be lower if you controlled it yourself.

I've been trying to figure this out myself

• Clickjacking/XSS is a problem if your site is included as an iframe
• A compromised iFrame could display malicious content (imagine the iFrame displaying a login box instead of an ad)
• An included iframe can make certain JS calls like alert and prompt which could annoy your user
• An included iframe can redirect via location.href (yikes, imagine a 3p frame redirecting the customer from bankofamerica.com to bankofamerica.fake.com)
• Malware inside the 3p frame (java/flash/activeX) could infect your user

Note that the html5 "sandbox" attribute can solve a lot of these problems if your browser supports it, and you can prevent your site from being included as an iFrame as well via X-FRAME-OPTIONS.

Answer 2

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 3

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.