A pure JavaScript CORS alternative/polyfill. No server configuration required -
just add a proxy.html on the domain you wish to communicate with. This
library utilizes XHook to hook all XHR, so XDomain should work in
conjunction with any library.
- Simple
- Library Agnostic
- Cross domain XHR just magically works
- No need to modify the server code
- No need to use IE's silly XDomainRequest Object
- Easy XHR access to file servers:
- Amazon
- Dropbox
- Includes XHook and its Features
proxy.htmlfiles (slaves) may:- White-list domains
- White-list paths using regular expressions (e.g. only allow API calls:
/^\/api/)
- Highly performant
- Development xdomain.js 16KB
- Production xdomain.min.js 7.5KB (1.8KB Gzip)
All except IE6/7 as they don't have postMessage
Note: It's important to include XDomain before any other library.
When XDomain loads, XHook replaces the current window.XMLHttpRequest.
So if another library saves a reference to the original window.XMLHttpRequest
and uses that, XHook won't be able to intercept those requests.
-
On your slave domain (
http://xyz.example.com), create a smallproxy.htmlfile:<!DOCTYPE HTML> <script src="http://jpillora.com/xdomain/dist/0.5/xdomain.min.js" master="http://abc.example.com"></script>
-
Then, on your master domain (
http://abc.example.com), point to your newproxy.html:<script src="http://jpillora.com/xdomain/dist/0.5/xdomain.min.js" slave="http://xyz.example.com/proxy.html"></script>
-
And that's it! Now, on your master domain, any XHR to
http://xyz.example.comwill automagically work://do some vanilla XHR var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://xyz.example.com/secret/file.txt'); xhr.onreadystatechange = function(e) { if(xhr.readyState === 4) alert(xhr.responseText); }; xhr.send(); //or if we are using jQuery... $.get('http://xyz.example.com/secret/file.txt').done(function(data) { console.log("got result: ", data); });
Tip: If you enjoy being standards compliant, you can also use data-master and data-slave attributes.
The following two snippets are equivalent:
<script src="http://jpillora.com/xdomain/dist/0.5/xdomain.min.js" master="http://abc.example.com"></script><script src="http://jpillora.com/xdomain/dist/0.5/xdomain.min.js"></script>
<script>
xdomain({
masters: {
'http://abc.example.com': /.*/
}
});
</script>So, we can then add more masters or (slaves) by simply including them
in the object, see API below.
If object contains:
-
Then
xdomainwill load as a masterEach slave must be defined as:
origin->proxy fileAn object is used to list slaves to reinforce the idea that we need one proxy file per origin.
The Quick Usage step 2 above is equivalent to:
<script src="http://jpillora.com/xdomain/dist/0.5/xdomain.min.js"></script> <script> xdomain({ slaves: { "http://xyz.example.com": "/proxy.html" } }); </script>
From vers. 0.5.8, you can also specify multiple slaves with the attribute "slave", separating the URLs with a comma:
<script src="/dist/0.5/xdomain.min.js" slave="http://xyz.example.com/proxy.html,http://ghi.example.com/proxy.html"></script>
-
Then
xdomainwill load as a slaveEach master must be defined as:
origin->allowed path(RegExp)originwill also be converted to a regular expression by escaping all non alphanumeric chars, converting*into.+and wrapping with^and$.Requests that do not match both the
originand thepathregular expressions will be blocked.So you could use the following
proxy.htmlto allow all subdomains ofexample.com:<script src="/dist/0.5/xdomain.min.js" data-master="http://*.example.com"></script>
Which is equivalent to:
<script src="/dist/0.5/xdomain.min.js"></script> <script> xdomain({ masters: { "http://*.example.com": /.*/ } }); </script>
Therefore, you could allow ALL domains with the following
proxy.html:<script src="/dist/0.5/xdomain.min.js" master="*"></script>
Though this is NOT recommended.
- XDomain will create an iframe on the master to the slave's proxy.
- Master will communicate to slave iframe using postMessage.
- Slave will create XHRs on behalf of master then return the results.
XHR interception is done seemlessly via XHook.
Use the HTML5 document type <!DOCTYPE HTML> to prevent your page
from going into quirks mode. If you don't do this, XDomain will warn you about
the missing JSON and/or postMessage globals and will exit.
Q: But I love CORS
A: You shouldn't. You should use XDomain because:
-
IE uses a different API (XDomainRequest) for CORS, XDomain normalizes this silliness.
-
The CORS spec is not as simple as it seems, XDomain allows you to use plain XHR instead.
-
On RESTful JSON API server, CORS will generating superfluous traffic by sending a preflight OPTIONS request on all requests, except for GET and HEAD.
-
Not everyone is able to modify HTTP headers on the server, but most can upload a
proxy.htmlfile. -
Google also uses iframes as postMessage proxies instead of CORS in it's Google API JS SDK:
<iframe name="oauth2relay564752183" id="oauth2relay564752183" src="https://accounts.google.com/o/oauth2/postmessageRelay?..."> </iframe>
Q: The browser is still sending a CORS request.
A: Double check your slaves configuration against the examples.
If your slaves configuration is correct, double check that you're
including XDomain before window.XMLHttpRequest is referenced anywhere.
The safest way to fix it is to include XDomain first, it has no dependancies,
it only modifies window.XMLHttpRequest. If you can't, break where xhr.send()
is called and if you're using the original XMLHttpRequest,
xhr.constructor == window.XMLHttpRequest will be false.
See CONTRIBUTING for instructions on how to build and run XDomain locally.
v0.5.0 - Upgraded to XHook v1.
v0.4.0 - Now setting request body, duh.
v0.3.0 - Moved to vanilla, using XHook to hook XHR instead of $.ajax
v0.2.0 - Removed PortHole, using pure postMessage, IE6/7 NOT supported
v0.1.0 - Alpha
Copyright © 2013 Jaime Pillora <[email protected]>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.