javascript - jQuery 将 iframe 写入 XLS 导致 iPhone 上的沙箱访问冲突

Question

我有一个按钮输入附加到一个将 iframe 写入 DOM 的 jQuery 操作。 iframe 指向一个 PHP 脚本，该脚本组装一个 Excel 文件以进行强制下载。

此按钮在桌面硬件上运行良好，但适用于 iPhone 的最新版本的 Mac OS X 导致此脚本向浏览器控制台抛出 Javascript 错误，并且似乎无法将 iframe 插入 DOM。我在 iOS v10.3.3 和 v11.0.1 上复制了错误。

iOS v10.3.3 抛出以下 Javascript 错误:

SecurityError (DOM Exception 18): Sandbox access violation: Blocked a frame at "https://www.[REDACTED].com" from accessing a frame at "https://www.[REDACTED].com". The frame being accessed is sandboxed and lacks the "allow-same-origin" flag. in https://www.[REDACTED].com/path/jquery/jquery.min.js on line 3

iOS v11.0.1 抛出以下内容:

SecurityError (DOM Exception 18): Blocked a frame with origin "https://www.[REDACTED].com" from accessing a frame with origin "x-apple-ql-id://256b58b2-0821-4779-810b-5493faa49e07". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "https". Protocols must match. in https://www.[REDACTED].com/modules/jquery/jquery.min.js on line 3

这是我正在使用的 Javascript。

var LOCAL = {
    execReport : function()
    {
        // Get form inputs
        var t = $('select[name="t"] option:selected').val();
        var s = $('select[name="s"] option:selected').val();

        // Write the iframe into the DOM
        var iframe = $('<iframe></iframe>', {
            'src' : '/xls/observationsReport.php?gid=' + majGroup.gid + '&season=' + s + '&t=' + t,
            'id' : 'reportIframe',
            'width' : '1',
            'height' : '1',
            'frameborder' : '0',
            'scrolling' : 'no',
            'sandbox' : 'allow-same-origin'
        }).appendTo('body').on('load', function() {
            // Wait for the iframe to finish loading
            var response = $.parseJSON($('#reportIframe').contents().find('body').html());

            // Show any errors that happened
            if (response && response.error)
            {
                // If the report assembly threw an error, display it here
                // This is NOT related to the Javascript error I am experiencing!
            }
        });
    }
};

Answer 1

您需要为 X-Frame-Options 设置标题在你的 observationsReport.php允许同源。

这个 header 的目的是告诉浏览器他们是否应该允许使用框架来加载页面内容。您的 jQuery 代码不足以克服此限制。

或者如 MDN 所说:

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

鉴于您使用的是 PHP，我猜您的 Web 服务器托管在 Apache 上，并且在上面的链接上有一个 Configuring Apache部分:

To configure Apache to send the X-Frame-Options header for all pages, add this to your site's configuration:

Header always set X-Frame-Options SAMEORIGIN

第二个错误看起来可能与您访问页面的方式有关。我会尝试:

1. 完全限定您的本地页面:

   'src' : 'https://www.[REDACTED].com/xls/observationsReport.php?'

2. 然后删除协议(protocol)相关部分:

   'src' : '//www.[REDACTED].com/xls/observationsReport.php?'