public
Last active

Subdomain tunneling with jQuery and document.domain

  • Download Gist
subdomain.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
/**
* Replace $.ajax on your subdomain with a copy taken
* from your base domain. All jQuery AJAX actions go
* through $.ajax (i.e. $.get, $.post), so it's all good.
*/
(function() {
var iframe,
onload,
queue = [],
 
// This has to be set both here and in iframe.html
document.domain = 'example.com';
// Back up this page's copy of $.ajax
window.$._ajax = window.$.ajax;
 
// We'll first replace $.ajax with a thin wrapper that both
// loads our iframe tunnel and saves invocations until the
// iframe is ready
 
$.ajax = function(params) {
 
if (!iframe) {
 
// tunnel.html should be a bare bones html page that
// includes a copy of jQuery, and sets document.domain
// to 'example.com'
iframe = $('<iframe>')
.attr('src', 'http://example.com/tunnel.html')
.load(onload)
.appendTo('head')[0];
}
 
// Save calls to $.ajax, execute when we're ready
queue.push(params);
};
 
function onload() {
// Our prize: a version of $.ajax that can communicate safely
// with our base domain
window.$.ajax = iframe.contentWindow.jQuery.ajax;
 
// Flush queued $.ajax calls
$.each(queue, function(_, params) {
$.ajax(params);
});
 
queue = null;
}
})();

This seems to break deferreds. Any suggestions on how someone would use them with this?

I actually haven't used deferreds with this code, so I'm not familiar with the trouble you're having. Normally I'd poke around and figure it out, but I'm kind of swamped at the moment.

Thanks anyway. I can't seem to get this working in chrome. I'm stilling getting "Access-Control-Allow-Origin" errors. Does the iframe have to be served from the domain you're trying access?

Does the iframe have to be served from the domain you're trying access?

Yes, definitely. Did you read the original article? http://benv.ca/2011/3/7/subdomain-tunneling-with-jquery-and-document-domain/

yeah, sorry I mean sub-domain. But looks like no matter what I try, doing POST to the subdomain isn't going to work for me.

Since we're not using https I'll just switch to jsonp and GET.

I have it backwards, I have code on my primary domain, that needs to post to the subdomain.

IE doesn't seem to like this solution... Have you experienced any trouble using IE?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.