JQuery writing iframe in XLS causes sandbox violation on iPhone

Question

I have a button input attached to a jQuery action that writes an iframe to the DOM. The IFrame points to a PHP script that compiles an Excel file to load strength.

This button works fine on desktop hardware, but the latest Mac OS X versions for iPhone cause this script to throw a Javascript error in the browser console and doesn't seem to insert an iframe in the DOM. I replicated the bug in iOS v10.3.3 and v11.0.1.

iOS v10.3.3 throws the following Javascript error:

SecurityError (DOM Exception 18): violation of access to the sandbox: the frame is locked at https: // www. [REDACTED] .com "from access to the frame with the value https: // www. [REDACTED] .com ". Access to the frame is sandboxed and the flag "allow-same-origin" is missing. at https: // www. [REDACTED] .com / path / jquery / jquery.min.js on line 3

iOS v11.0.1 throws the following:

SecurityError (DOM Exception 18): the frame with the source " https: // www. [REDACTED] .com " from accessing the frame with the source "X-apple-QL identifier: // 256b58b2-0821-4779-810b-5493faa49e07 is blocked " The access request frame has the https protocol, the frame that is accessed has the https protocol. The protocols must match. at https: // www. [REDACTED] .com / modules / jquery / jquery.min.js on line 3

Here is the Javascript I'm working with.

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

You need to set the headers for X-Frame-Options to observationsReport.php to allow the same origin.

The purpose of this header is to tell the bowsers if they should allow the frame to be used to load the contents of the pages. Your jQuery code is not enough to overcome this limitation.

Or, as MDN points out:

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

Given that you are using PHP, I assume that your web server is hosted with Apache, and the link above has the Configuring Apache section:

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

Header always set X-Frame-Options SAMEORIGIN

The second error looks as if you could access the page. I would try:

• Fully qualify your local page:

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

• Then remove the protocol part:

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