在iframe中加载子域,同时避免使用document.domain进行跨域框架

时间:2019-04-09 15:54:32

标签: javascript wordpress iframe x-frame-options

我有一个包含多个WooCommerce安装的Wordpress多站点。我正在尝试通过iFrame获取安装过程中所有区域的仪表板报告:

  • en.foo.com
  • au.foo.com
  • eu.foo.com

在仪表板主页面上,我使用以下代码注入所需的iFrame:

jQuery(document).ready(function($) {
        /*If the user is on the main dashboard...*/
        if(window.location.href.indexOf("https://foo.com/wp-admin/network/") > -1) {
            console.log('Admin Dashboard - Activating global iFrame stats');
            /*Create area for iFrames*/
            $('#dashboard-widgets').after('<div class="iframe-container"><strong>Cross Network Stats (US, UK, AU, EU)</strong></div>');
            /*United States*/
            /*Add US iFrame (on same domain - working)*/
            $('.iframe-container').append('<div><strong style="font-size: 2em;">United States:</strong><br><br><iframe src="https://foo.com/wp-admin/edit.php?post_type=shop_order" width="100%" height="450px"></iframe></div>');
            /*United Kingdom*/
            /*Add UK iFrame (on subdomain - not working)*/
            $('.iframe-container').append('<div><strong style="font-size: 2em;">United Kingdom:</strong><br><br><iframe src="https://en.foo.com/wp-admin/edit.php?post_type=shop_order" width="100%" height="450px"></iframe></div>');
        }
    });

第一个iFrame可以正常工作,但是第二个iFrame却无法正常工作,因为它位于iFrame中,并会产生X-Frame安全错误:


  

X-Frame-Options拒绝加载:   https://en.foo.com/wp-admin/edit.php?post_type=shop_order不   允许跨域框架。


我读到可以通过使用'document.domain'来避免这种情况。因此,我在全局管理员页脚中的页脚中注入了以下代码:

echo '<script>document.domain = "foo.com";</script>';

但是,我仍然遇到与以前相同的问题。

通过jQuery调用iFrame时,是否需要将document.domain作为javascript函数触发?

1 个答案:

答案 0 :(得分:0)

您必须更改Content-Security-Policy标头。

Content-Security-Policy: frame-ancestors 'self' *.foo.com

This answer更深入。