internet explorer - Fine Uploader fails in Facebook iframe -

i have built facebook app requires image upload functionality , implement i'm using fine uploader.

the facebook app built wordpress , working fine. wordpress website (which app) going live on facebook in iframe , it's here things getting interesting.

when test app on local machine works (all browsers). when test app outside iframe on staging environment works (all browser). however, when test app in test page on facebook (iframe) image upload fails, in ie.

for reference show server , client code:

public static function upload_receiver() {     $uploader = new qqfileuploader();     $uploader->allowedextensions = array("jpg", "jpeg");     $uploader->sizelimit = 2024 * 1024;      $wp_upload_dir = wp_upload_dir();     $wp_upload_url = $wp_upload_dir['baseurl'];     $wp_upload_base = $wp_upload_dir['basedir'];      $upload_dir = $wp_upload_base;     $upload_filename = md5(mt_rand())/*.'_'.$uploader->getname()*/.".jpg";      $result = $uploader->handleupload( $upload_dir, $upload_filename );      // create wordpress image thumbs.     $img_target = "{$upload_dir}/{$upload_filename}";      $wp_filetype = wp_check_filetype( $img_target );      $attachment_data = array(         'post_mime_type' => $wp_filetype['type'],          'guid' => $img_target,         'post_title' => preg_replace('/\.[^.]+$/', '', $upload_filename ),         'post_name' => preg_replace('/\.[^.]+$/', '', $upload_filename ),         'post_content' => '',         'post_status' => 'inherit',     );      $attachment_id = wp_insert_attachment( $attachment_data, $img_target );      $meta = wp_generate_attachment_metadata($attachment_id, $img_target);      wp_update_attachment_metadata($attachment_id, $meta);         $result['attachmentid'] = $attachment_id;     $result['imageurl'] = htmlspecialchars( get_image_url_from_attachment_id($attachment_id, "thumb-small") );      header("content-type: text/plain");     echo json_encode( $result );      die(); } 

and client:

var el = $('#upload'); var el_img = el.find('span');  el.fineuploader( {     uploadertype: 'basic',     button: el,     multiple: false,     request: {         endpoint: '<?php echo site_url("/wp-admin/admin-ajax.php") ?>',         params: {             action: 'upload_receiver'                    }     },     validation: {         allowedextensions: ['jpeg', 'jpg']     },     debug: false } ).on('upload', function(event, id, filename, response) {     $('.loader').show();     $('.upload_button_container').hide();  } ).on('complete', function(event, id, filename, response) {      // in ie "response.success" false in fb iframe. other     // times "response.success" true , properties created on     // server exist.      $('.loader').hide();     $('.upload_button_container').show();      if( response.error )     {         alert( response.error );         return;     }      // display image coming in result.     $(".img_upload_container img").attr('src', response.imageurl).show();      // store wordpress attachment id form submission.     $("form input[name=bc_attachment_id]").val( response.attachmentid ); }); 

i have been banging head on past few hours , i've run out of ideas of might causing issue.

edit:

ie9 console output:

log: [fineuploader] processing 1 files or inputs...  log: [fineuploader] sending upload request 0  sec7111: https security compromised res://ieframe.dll/forbidframing.htm  sec7111: https security compromised res://ieframe.dll/errorpagetemplate.css  sec7111: https security compromised res://ieframe.dll/errorpagestrings.js  sec7111: https security compromised res://ieframe.dll/httperrorpagesscripts.js  sec7111: https security compromised res://ieframe.dll/red_x.png  sec7111: https security compromised res://ieframe.dll/bullet.png  sec7111: https security compromised res://ieframe.dll/background_gradient.jpg  log: [fineuploader] received response 0  [fineuploader] error when attempting access iframe during handling of upload response (error: access denied. )  log: [fineuploader] iframe loaded  [fineuploader] error when attempting parse form upload response (error: access denied. )  

as suspected, problem domain of parent window not match domain of iframe containing response. security violation, , there no simple way access contents of iframe since on different domain. sort of access prohibited browser. bit tricky around this, fine uploader provides way.

you need enable cors feature in fine uploader. best option, , should solve problem. fine uploader added support cross-domain requests (version 3.3). particularly useful in ie, iframes involved. essentially, configure response import javascript file post message parent window containing response. how fine uploader overcomes cross-domain issue. wrote a detailed blog post on cors support in fine uploader, , how can enable , handle cross-domain requests sent fine uploader in server side code.

if read post , follow server-side instructions, seems should fine.

note seems issue need overcome in ie9 , older, in case. here's high-level summary of need do:

1. turn on cors support in fine uploader (client-side).
2. server-side: identify non-xhr upload requests looking @ x-requested-with header on request.
3. if request not sent via xhr, return response, content-type of "text/html", starts <script> tag imports "iframe.xss.response.js" file known location (anywhere). after script tag in response, include normal valid json portion of response.

hope helps.