cross-domain ajax request - XD security errors on re-submission

Question

I have managed to get a cross-domain ajax request working. The problem I am having now is that this works on first submission but any subsequent submission without page refresh falls foul of the domain security check in the browser.

I have 2 domains on my local machine; 'www.webservice.dev' and 'www.consume.dev'.

On consume.dev I insert some js hosted on webservice like so.

<script type="text/javascript">
$(function(){
var $scrpt = $('<script />');
$scrpt.attr({
    'type' : 'text/javascript',
    'src':'http://www.webservice.dev/_assets/script/processEvent.js'
});
$('head').append($scrpt);

});
</script>

That script contains:

$(function() {

    var $scrpt = $('<script />');

    $scrpt.attr({
        'type' : 'text/javascript',
        'src' : 'http://www.webservice.dev/_assets/script/jquery/plugins/jquery.form/jquery.form.js'
    });

    $('head').append($scrpt);

    $('<iframe />')
        .attr({
            'id' : 'eventFormTarget',
            'name' : 'eventFormTarget'
        })
        .css( {
            'width' : '1px',
            'height' : '1px',
            'position' : 'absolute',
            'left' : '-9999px',
            'top' : '-9999px'
        })
        .prependTo('body');

    $('#event-form').bind('submit', function(){
        $(this).ajaxSubmit({
            url         : 'http://www.webservice.dev/webservices.php',
            type        : 'POST',
            dataType    : 'html',
            data        : {
                              ajax : 'true',
                              webservice : 'processEvent'
                          },
            error       : function(jqXHR, textStatus, errorThrown) {
                              console.log(jqXHR, textStatus, errorThrown);
                              /*
                               * try{ $('#event-form').trigger('submit'); }catch(e){
                               * console.log(e); };
                               */
                          },
            complete    : function(){

                          },
            iframeTarget : '#eventFormTarget',
            iframe      : true
        });
        return false;
    });

});

Now hopefully you will see from teh script that I add an iframe to the page and use the jquery form plugin to perform the magic. As the post is done through the iframe ajaxSubmit does NOT get the response to process - I handle that elsewhere...

BUT the error response is avaialable.

On first submission of the form nor errors are detected and I can check the result of my processing code on webservice.dev. As soon as another request is sent the error event is triggered yeilding the following in Chrome console (firebug pretty similar):

Unsafe JavaScript attempt to access frame with URL http://www.nmssys.dev/webservices.php from frame with URL http://dev.dev/. Domains, protocols and ports must match. jquery.form.js:904
[jquery.form] Server abort: TypeError: Cannot read property 'readyState' of undefined (TypeError)
Unsafe JavaScript attempt to access frame with URL http://www.nmssys.dev/webservices.php from frame with URL http://dev.dev/. Domains, protocols and ports must match. jquery.form.js:904
[jquery.form] aborting upload... aborted
Object "aborted" "server abort"

You may note in my code I try to cath the error and trigger a further submission. This will succeed but with differing results. In firefox a single further submission seems to succeed, chrome however can make 3-5 further submissions.

I'd dearly like a solution that would prevent all these shananigans. Somethng like removing the iframe and readding - or a refresh of the ajaxsubmit binding...

Any ideas would be gratefully received.

Answer 1

Fixed!!!

I have used the jquery postmessage plugin to captchure the response from the iframe. Once the response has been parsed a simple:

$('iframe').attr('src','');

makes everything all hunky dory again...