Unsafe JavaScript attempt to access frame, when try to upload file with ajax

Question

My goal is to upload file with ajax-way. I use this javascript library http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm

1. There is a link on my page like "Upload" button on example page.
2. When I click it, "Open file" dialog is open.
3. I choose file and form is automatically submitted.

This is my javascript code.

var upload_btn = $('#upload-opml');
  new AjaxUpload(upload_btn.attr('id'), {
    action: upload_btn.attr('href'),
    name: 'opml',
    onComplete: function (file, response) {
      //
  }
});

This is server code in Ruby on Rails.

def upload_opml
    render :text => 'hello'
end

Headers, taken from Firebug.

>> Response headers
Server  nginx/0.7.62
Date    Wed, 09 Jun 2010 19:03:28 GMT
Content-Type    text/html; charset=utf-8
Connection  keep-alive
Etag    "5d41402abc4b2a76b9719d911017c592"
X-Runtime   18
Content-Length  5
Cache-Control   private, max-age=0, must-revalidate
Set-Cookie  _RssWebApp_session=BAh7CDoPc2Vzc2lvbl9pZCIlMzJhMTQ0ZWZhOGM3YmIwODFhZmFmNjkwYTI1YWQ2ZjQ6EF9jc3JmX3Rva2VuIjEvZHVzdm1NOVlMTUF6bEw3cGRFT2I3RzZvcVJZUU42bCtMNS9PVVYrNHdBPToMdXNlcl9pZGkG--13f1950a9530591881404fbfab7b1246f98f0d81; path=/; HttpOnly

>> Request headers
Host    readbox.cz
User-Agent  Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9.2) Gecko/20100115 Firefox/3.6
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language ru,en-us;q=0.7,en;q=0.3
Accept-Encoding gzip,deflate
Accept-Charset  windows-1251,utf-8;q=0.7,*;q=0.7
Keep-Alive  115
Connection  keep-alive
Referer http://readbox.cz/view
Cookie  _RssWebApp_session=BAh7CDoPc2Vzc2lvbl9pZCIlMzJhMTQ0ZWZhOGM3YmIwODFhZmFmNjkwYTI1YWQ2ZjQ6EF9jc3JmX3Rva2VuIjEvZHVzdm1NOVlMTUF6bEw3cGRFT2I3RzZvcVJZUU42bCtMNS9PVVYrNHdBPToMdXNlcl9pZGkG--13f1950a9530591881404fbfab7b1246f98f0d81; login=1; APE_Cookie=%7B%22frequency%22%3A11%7D; show-tsl=0

But in Firefox I get an error

!:@8?BC http://readbox.cz (document.domain=http://readbox.cz) >B:070=> 2 @07@5H5=88 =0 ?>;CG5=85 A2>9AB20 HTMLDocument.readyState 87 http://readbox.cz (document.domain =5 1K; CAB0=>2;5=).
[Break on this error] if (doc.readyState && doc.readyState != 'complete') {

In Google Chrome

Unsafe JavaScript attempt to access frame with URL http://readbox.cz/subscriptions/upload_opml from frame with URL http://readbox.cz/view#/posts/all. Domains, protocols and ports must match.
/javascripts/ajaxupload.js?1276107673:574
Uncaught TypeError: Cannot read property 'readyState' of undefined

Domain readbox.info points to 127.0.0.1. It's for development.

Answer 1

I had the same problem and I fix it editing the ajaxupload library, with this commit:

https://github.com/felipelalli/ajax-upload/commit/9307f5eb6ded1ec63eac828a7ef4b8187acb9617

I already sent a pull request to the author.

I had this problem when I was using the sandbox developer environment (opensocial for Orkut). I just check now if "doc" is undefined. The upload works fine, but the callback now has no answer (the answer is undefined).

I don't know exactly what is the cause, but I think it is some kind of limitation of the dev environment.

If you want to download the fix, please check it out: https://github.com/felipelalli/ajax-upload/commits/3.9.1