html form action cross domain target iframe

Question

I'm trying to setup an html form with input type file in it. I want to upload this file via post request to a server listening to the same host but different port. My form target is an iframe, which on load receives data with an _id of the newly uploaded file. The problem is that I'm receiving "Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin " http://192.168.0.105:3001 " from accessing a frame with origin " http://192.168.0.105:3011 ". Protocols, domains, and ports must match." Sample code with some unnecessary hard coding is provided below

'<form id="{id}_form" action="http://192.168.0.105:3011/private/profile_picture/upload" enctype="multipart/form-data" method="post" target="{id}_uploadframe">',
'<span id="{id}_wrapper" class="file-wrapper">',
    '<input id="{id}_real" type="file" accept="image/*" name="photo" />',
    '<span class="button">{0}</span>',
'</span>',
'</form>',
'<iframe id="{id}_uploadframe" name="{id}_uploadframe" class="mc-hidden"></iframe>'


Ext.fly( this.id + '_uploadframe' ).on( 'load', function( evt, el )
{
    var data = el.contentDocument.body.innerHTML;
    try
    {
        data = Ext.JSON.decode( data, true );
    }
    catch( ex )
    {
        data = {};
    }

    ........

    if( data && data.success === true )
    {
        if (me.cbUpload) {
            me.cbUpload(data);
        }
        .......
    }, this );
}


Ext.fly( this.id + '_real' ).on( 'change', function( evt, el )
{
    ....

    var form = document.getElementById( me.id + '_form' );
    form.submit();

    ....

});

I know I violate the cross domain policy, but is there any easy way to bypass or hack it?

Answer 1

If you control the other URL you can use PHP there to fix it:

header('Access-Control-Allow-Origin: *');

or

header('Access-Control-Allow-Origin: http://permitted_domain.com');

If you do not, it would have to happen without frames!

Answer 2

Well my servers are both node servers. In both I have a similar configurations:

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://192.168.0.105:3011');

    // THE OTHER ONE IS CONFIGURED SIMILAR
    res.setHeader('Access-Control-Allow-Origin', 'http://192.168.0.105:3001');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    next();
});

This doesn't seem to help a bit.

Answer 3

Setting document.domain to the same value in both documents should make this work.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin :

“A page may change its own origin with some limitations. A script can set the value of document.domain to a subset of the current domain. If it does so, the shorter domain is used for subsequent origin checks.” […]

“The port number is kept separately by the browser. Any call to the setter, including document.domain = document.domain causes the port number to be overwritten with null . Therefore one cannot make company.com:8080 talk to company.com by only setting document.domain = "company.com" in the first. It has to be set in both so that port numbers are both null .”