javascriptinternet-explorer-9fine-uploader

Fine Uploader - No valid message received from loaded iframe, IE9 only


Experiencing the "No valid message received from loaded iframe" error on an existing implementation while attempting to upload using IE9 and FineUploader 4.2.2, had similar issues with IE8 which related to my code not setting uuid correctly which was successfully resolved.

Those fixes are still in place; IE8 works and you can track the UUID from the post to the response (shown below) also FineUploader still works with IE8, IE11, Chrome & Firefox. Didn't have an IE10 reference point.

Can replicate the issue on IE9 v9.0.8112.16421 (stock Win7 IE9 VM from Modern.ie)

After selecting a file manually two requests are captured by the F12 developer tools - image is POSTed to my handler which returns a success response followed by a GET for "iframe.xss.response.js", which succeeds.

Turned on the debug setting in case it provided some more insight, sanitised results included below - stripped a few internal variables but otherwise unedited, headers were pasted from the F12 developer tools so may look a little strange.

Imagine I'm just missing something simple, but always a small chance it's a known issue fixed in a later release.

Update 02/10

Tested against FineUploader v5.3.2 and still experience the same error being logged by "registerPostMessageCallback" (line 5001, fine-uploader.js), placed a breakpoint inside "corsMessageReceiver.receiveMessage" which wasn't being reached.

Added some alerts to "iframe.xss.response.js" and the test for if (match) {...} is failing, but document.body.innerHTML definitely has content.

Request

Request POST /Upload HTTP/1.1
Accept  text/html, application/xhtml+xml, */*
Accept-Language en-GB
User-Agent  Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Content-Type    multipart/form-data; boundary=---------------------------7df14d340118
Accept-Encoding gzip, deflate
Content-Length  781830
Connection  Keep-Alive
Cache-Control   no-cache

-----------------------------7df14d340118
Content-Disposition: form-data; name="qquuid"

5489a37c-1cde-4c32-9faa-f9c2532b9ba1
-----------------------------7df14d340118
Content-Disposition: form-data; name="qqfilename"

Koala.jpg
-----------------------------7df14d340118
Content-Disposition: form-data; name="qqfile"; filename="Koala.jpg"
Content-Type: image/jpeg

<Binary File Data Not Shown>
---------------------------7df14d340118--

Response

Response    HTTP/1.1 200 OK
Cache-Control   private
Content-Type    text/html; charset=utf-8
Server  Microsoft-IIS/7.5
Access-Control-Allow-Origin *
Access-Control-Allow-Methods    GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers    Content-Type, cache-control, x-requested-with
Access-Control-Allow-Credentials    false
Date    Fri, 25 Sep 2015 10:16:03 GMT
Content-Length  268

{
  "pageList": [],
  "name": "Koala.jpg",
  "newUuid": "2930",
  "size": 762,
  "thumbnailUrl": null,
  "pageCount": 0,
  "success": true,
  "uuid": "5489a37c-1cde-4c32-9faa-f9c2532b9ba1"
}<script src="/js/fineuploader-4.2.2/iframe.xss.response.js"></script>

Console

LOG: [FineUploader 4.2.2] Detected valid file button click event on file 'Koala.jpg', ID: 0. 
LOG: [FineUploader 4.2.2] Retrying upload for 'Koala.jpg' (id: 0)... 
LOG: [FineUploader 4.2.2] Sending upload request for 0 
LOG: [FineUploader 4.2.2] Received iframe load event for CORS upload request (iframe name 0_2523c193-b1ad-4ff4-bf71-59608e848560) 
[FineUploader 4.2.2] No valid message received from loaded iframe for iframe name 0_2523c193-b1ad-4ff4-bf71-59608e848560 
LOG: [FineUploader 4.2.2] iframe loaded 

Solution

  • Resolved. Issue was due to line breaks in the handler's JSON response and "iframe.xss.response.js" using a regular expression which didn't expect line breaks.

    Two potential solutions here;

    Search iframe.xss.response.js for the following line;

    var match = /(\{.*\})/.exec(document.body.innerHTML);
    

    If you're not familiar with regular expressions this will match a block of zero or more characters inside curly brackets, but "characters" doesn't include newlines so if your JSON includes them it fails to return a match.

    Updating the line to read as below runs the capture correctly.

    var match = /(\{(.|\r|\n)*\})/.exec(document.body.innerHTML);
    

    This pattern will match a block of zero or more characters + newlines (both cr and lf) inside curly brackets - tested with IE8 & IE9 without any obvious issues.