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

Question

我有一个附加到jQuery操作的按钮输入,它将iframe写入DOM.iframe指向一个PHP脚本,它汇编了一个用于强制下载的Excel文件.

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

iOS v10.3.3引发以下Javascript错误:

的SecurityError(DOM异常18):沙盒访问冲突:在阻止框架" :// WWW [删除] .COM HTTPS.在访问的帧", " HTTPS:// WWW [删除] .COM ".正在访问的框架是沙箱,并且缺少"allow-same-origin"标志.在HTTPS:// WWW [删除]的.com /路径/ jquery的/ jquery.min.js第3行

iOS v11.0.1引发以下内容:

SecurityError(DOM例外18):阻止具有原点" https:// www.[删除] .com "的帧访问具有原点"x-apple-ql-id:// 256b58b2-0821-4779-810b-的帧" 5493faa49e07" .请求访问的帧具有"https"协议,被访问的帧具有"https"协议.协议必须匹配.在 HTTPS:// WWW [删除]的.com /模块/ jquery的/ jquery.min.js第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以允许相同的来源。

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

或者正如 MDN 所说：

X-Frame-Options HTTP 响应标头可用于指示是否允许浏览器在 、<frame>或<iframe>中呈现页面<object>。网站可以使用它来避免点击劫持攻击，确保其内容不嵌入到其他网站中。

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

要配置 Apache 发送所有页面的 X-Frame-Options 标头，请将其添加到站点的配置中：

Header always set X-Frame-Options SAMEORIGIN

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

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

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

2. 然后删除协议相关部分：

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