Question

I have been working with jQuery recently and ran into a problem where I couldn't include it in a userscript because XmlHttpRequest uses the same origin policy. After further testing I found that most browsers also support the Cross-Origin Resource Sharing access control defined by W3C as a workaround for issues with same origin policy. I tested this by hosting the jQuery script on a local web server that included the Access-Control-Allow-Origin: * http header, which allowed the script to be downloaded using XmlHttpRequest so that it could be included in my userscript. I'd like to use a hosted version of jQuery when releasing the script, but so far testing with tools like http://www.seoconsultants.com/tools/headers I have not found any sites that allow cross-origin access to the jQuery script. Here is the list I have tested so far:

Are there any other hosted versions of jQuery that do allow cross origin access? I know that jQuery is usually loaded via a script tag (sometimes a dynamically created script tag), but in this specific case I have to use XmlHttpRequest and Eval to make sure it gets loaded into the correct scope. Google Chrome supports user scripts but does not support @require, which means the only way to use jquery in a user script in Google Chrome is to embed it into the .user.js file or load and eval it via an XmlHttpRequest. Embedding is a less than optimal solution, and while Chrome Extensions allow you to include the jQuery js files in extensions I would prefer to stick with user scripts since they are much simpler and can work in more than just one browser. I have already submitted tickets with both the Google Ajax APIs and jQuery teams to allow cross domain access to the CDN, but my guess is that I'll just have to host it myself for now.

Was it helpful?

Solution

Since you asked this question, the Google CDN has added these headers as requested. A quick GET of https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js yields the header:

access-control-allow-origin:*

So add a script tag like this and you're good to go:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" crossorigin="anonymous" type="text/javascript"></script>

OTHER TIPS

I had this same issue, and my solution ended up being to host the file myself. With my own hosting, I could allow cross-domain requests for the jQuery script.

I tried to jump through a lot of hoops to work around this, and spent too many hours trying to hunt down and try script hosts that allowed cross-domain access. Eventually, though, I came to the conclusion that if I'm going to rely on some unknown hosted version of the script, I might as well host it myself, because I trust myself more than the hosts I was considering.

Amazon Cloudfront allows you to set the Access-Control-Allow-Origin header. Basically, if you host jQuery yourself then stick a Cloudfront CDN in front of it, Cloudfront will relay any headers you set back to the client:

your jQuery -> Cloudfront jQuery -> Client Browser
[header set]   [header set]         [header set]

The Cloudfront CDN is set up per Amazon user; the disadvantage of this compared to say the hosted Google APIs is that first-time visitors to your site won't have loaded up jQuery by visiting another site (and therefore benefit from the caching.)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top