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）：沙箱访问冲突：阻止“https://www.[REDACTED].com”的框架访问“https://www.[REDACTED].com”的框架。正在访问的框架是沙箱，并且缺少“allow-same-origin”标志。在第3行的https://www.[REDACTED].com/path/jquery/jquery.min.js

iOS v11.0.1引发以下内容：

SecurityError（DOM Exception 18）：阻止具有原点的帧 “https://www.[REDACTED].com”访问具有原点的框架 “X-苹果-QL-ID：// 256b58b2-0821-4779-810b-5493faa49e07”。框架请求访问具有“https”协议，正在访问该帧有一个协议“https”。协议必须匹配。在第3行https://www.[REDACTED].com/modules/jquery/jquery.min.js

这是我正在使用的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

您需要在observationsReport.php上设置X-Frame-Options的标头，以允许相同的来源。

此标题的目的是告诉bowsers他们是否应该允许使用框架来加载页面内容。您的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

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

完全限定您的本地网页：

'src' : 'https://www.[REDACTED].com/xls/observationsReport.php?'
然后删除协议相关部分：

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

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

1 个答案: