了解第三方iframe的安全性？

Question

Facebook等网站提供了一些小的iframe代码片段，我可以将它们放入我的网站中。例如：

<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>

我想知道的是，如果我把这段代码放在我的网站上，那么他们加载到我页面的代码能否访问我的页面DOM？如果可以的话，这会存在一些安全问题。

同样地，Facebook允许我在他们的网站上放置一个iframe，这就是Facebook应用程序的工作原理。那么我是否可以从包含我的iframe的任何页面中获取任何数据？

请注意，我在这里使用Facebook作为示例，但许多公司也会做同样的事情，因此这个问题与Facebook无关，所以我不将其标记为Facebook。

另外，父页面能否访问iframe的DOM？

- Winforms

Answer 1

实际上，iframe的继承规则有具体的规定。这是同源策略的一部分，我强烈建议阅读整个Google浏览器安全手册。

- rook

Answer 2

我知道父页面可以访问iframe的DOM。最近我们在工作中有一个项目需要符合508标准的网站，但是iframe没有遵守这个标准。虽然屏幕阅读器对iframe的处理越来越好，但是iframe内部的内容仍然无法符合标准。我们在网站中加载了jquery库，并且在iframe加载后加载了代码来操作iframe，并在此时混合iframes内容以便使其可访问。

以下是我们使用的jquery样例，许多查找和替换的操作，但你可以得到这个想法，还可以做其他事情。

$('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>');
    });

});

虽然我不确定您是否可以从iframe访问父DOM。

});

（无需翻译）

- Chris

---

访问父级DOM是我看到的安全问题，我同意允许访问子iframe内容。 - Winforms

@Winforms 不应该这样做，因为攻击者可以在他们的网站上放置一个<iframe>到gmail，并在您访问他们的网站时读取您的电子邮件。 - rook

Answer 3

我假设这是跨域iFrame，因为如果您自己控制它，风险会更低。

我一直在试图自己解决这个问题。

• 如果您的网站被包含在iframe中，则Clickjacking / XSS是一个问题。
• 受损的iFrame可以显示恶意内容（想象一下，iFrame显示登录框而不是广告）。
• 包含的iframe可以进行某些JS调用，如警报和提示，这可能会使您的用户感到烦恼。
• 包含的iframe可以通过location.href重定向（天啊，想象一下3p框架将客户从bankofamerica.com重定向到bankofamerica.fake.com）。
• 3p框架内的恶意软件（java / flash / activeX）可能会感染您的用户。

请注意，如果您的浏览器支持，html5的"sandbox"属性可以解决许多这些问题，您也可以通过X-FRAME-OPTIONS防止您的网站被包含为iFrame。

- Joe Zack