Extjs fileupload - cross-origin frame

Question

I have a fileupload field in my from in Extjs application. Where I am trying to load files to the server by following code:

var form = Ext.getCmp('ProcImpNewSugFileForm').getForm();
var fileNameStr = Ext.getCmp('ProcImpNewSugFileUpload').getValue().split("\\");
if(fileNameStr){
var filename = fileNameStr[fileNameStr.length-1];
if(form.isValid()){
    form.submit({
        url: '/PISRFileUploader.php',            
        waitMsg: 'Uploading your file...',                
        success: function (formPanel, action, result) {
            Ext.Msg.alert('Msg',"Success: "+action.response.responseText);
        },
        failure: function (formPanel, action, result) {
            Ext.Msg.alert('Msg',"Failure: "+action.response.responseText);
        }
    });
   }
}

But when I try to upload any file. The file is getting loaded to the server but the response is coming like this:

    Failure: {success:false,message:"Blocked a frame with origin 'http://localhost' from accessing a cross-origin frame."}

Thanks in Advance!

cheftao · Answer 1 · 2014-05-29T14:55:04.163

This is a Ext js bug identified by Uberdude in the Sencha Forum.

Description of the problem :

When you make an Ext.Ajax.request with a form containing a file input to be uploaded, or manually set the isUpload option to true, rather than doing a proper Ajax request Ext submits the form in the standard HTML way to a dynamically generated hidden . The json response body is then read out of the iframe to create a faked-up Ajax response. A problem arises if the page making the upload Ajax request has changed its document.domain property, e.g. a page at home.example.com includes resources from static.example.com which it wishes to manipulate with javascript without violating the browser's same-origin-policy, so both set their document.domain to "example.com". If home.example.com then makes an upload Ajax request to a url on the home.example.com server, the iframe into which the response is written will have its document.domain as "home.example.com". Thus when the ExtJS code within Ajax.request on the home.example.com page tries to extract the document body from the iframe, it will be blocked by the same-origin-policy and the response passed to the callback functions will incorrectly have empty responseText.

Work Around : 1. Pass the document.domain to the server when making the upload request. 2. In your server response, add the document.domain in your response text/html.

response.setHeader('Content-Type', 'text/html'); response.write('document.domain = "' + params.__domain + '";'); response.write(JSON.stringify({msg: 'Welcome ' + params.name})); response.end('');

Detail :

Please refer to : http://www.sencha.com/forum/showthread.php?136092-Response-lost-from-upload-Ajax-request-to-iframe-if-document.domain-changed

score 1 · Answer 2 · edited May 23 '17 at 11:52

This is an improvement of cheftao answer.

If you need to work with different domains (e.g. localhost with a different port), follow these steps:

on the client side, before submitting the form, renew the document domain and then submit it with the form data:

  document.domain = document.domain;
  myForm.submit({
    params: {
      domain: document.domain
    },
    ...
  });

on the server side, respond with content-type text/html and with the following string (this example is done with ExpressJS):

var domain = req.body.domain,
    script = '<script type="text/javascript">document.domain = "' + domain + '";</script>',
    body = '<body>' + JSON.stringify({success: true}) + '</body>';

res.send('<html><head>' + script + '</head>' + body + '</html>');

Update: 19/05/2016

Actually, the best solution is to do reverse proxy, avoiding this kind of problems.

What do you mean by "reverse proxy"? Do you have a link to something? — harryBundles, Jul 17 '17 at 10:48

score 1 · Answer 3 · edited Jan 07 '16 at 05:03

Adding additional comments to Wilk's answer.

If your host and destination are on different port then use below solution.

In the index.html file use the below line under head :

<script type=text/javascript>document.domain =document.domain;</script>

and in your response along with header Content-Type:'text/html' and the response

'<html><head><script type=text/javascript>document.domain =document.domain;</script></head><body>{success: true}</body></html>'

Success message is hard coded here, you can use any custom message based on your input.

Thanks, Santrupta

Extjs fileupload - cross-origin frame

3 Answers3

Linked