I have a button input attached to a jQuery action that writes an iframe into the DOM. The iframe points to a PHP script that assembles an Excel file for force download.
This button works fine on desktop hardware, but recent versions of Mac OS X for the iPhone cause this script to throw a Javascript error into the browser console and appears to be failing to ever insert the iframe into the DOM. I replicated the error on iOS v10.3.3 and v11.0.1.
iOS v10.3.3 throws the following Javascript error:
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 throws the following:
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
Here is the Javascript I am 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! } }); } }; 1 Answers
Answers 1
You need to set the headers for X-Frame-Options on your observationsReport.php to allow same origin.
The purpose of this header is to tell bowsers if they should allow a frame to be used to load a pages content. Your jQuery code is not sufficient to overcome this restriction.
Or as the MDN puts it:
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.
Given you are using PHP I am guessing your Web Server is hosting with Apache and on the link above there is a Configuring Apache section:
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
The second error looks like it may be do to how you are accessing the page. I would try:
Fully qualifying your local page:
'src' : 'https://www.[REDACTED].com/xls/observationsReport.php?'Then remove the protocol-relative part:
'src' : '//www.[REDACTED].com/xls/observationsReport.php?'
0 comments:
Post a Comment