I'm trying to use XHR to access the GitHub HTTP API, and I'm being rather badly defeated by the Same Origin Policy. I'm quite sure that easyXDM is overkill for this, but I don't know what else (if there is anything else) that I can use. Is there some easier way than easyXDM to get from my website to the GitHub API?
Turns out GitHub API supports JSON-P. from http://developer.github.com/v3/#json-p-callbacks:
You can send a callback parameter to any GET call to have the
results wrapped in a JSON function. This is typically used when
browsers want to embed GitHub content in web pages by getting around
cross domain issues.
(emphasis mine)
This is your friend:
http://developer.github.com/v3/#cross-origin-resource-sharing
Related
I need to provide a functionality similar to "Share with Facebook" for my social networking site. Facebook uses nested iframes and also xd_receiver concepts. I want to write a JavaScript API(JS file hosted on my domain), which can be used by different sites to call my web server APIs in order to share, post or recommend on my social networking site. I have a few questions -
Even though I provide the JS API, and diff sites load the JS file using the source, if any API call is made, it will again be a cross domain call(If I am comprehending correctly) and will be rejected on the server?
How to overcome such situation?
Is there any other better mechanism to implement this functionality?
Please suggest so that I can proceed with the implementation.
I think the default way is to use jsonp to get around cross domain limitation. http://en.wikipedia.org/wiki/JSONP. It might require a change in your api though. A user requests your api through the src of a script tag passing in a function callback. Your api would return pass your json response to the function specified.
Do you know why they use iframes and not simple get requests with JSONP/Images/scripts?
The answer is security. I cannot write a script that clicks their button which will automatically "like" the page.
Using plain old JavaScript with a JSONP will allow the developer to automatically click the button. Do you want that to happen?
The requests are made by the browser and not from the JS file, so, your requests will be cross-domain every time they did from another domain site.
Your server will only reject cross-domain requests if you implement a referrer validation.
And you can use JSONP if your API needs custom contents from your site...
To allow cross domain requests, you need to set the following Header in your HTTP Response:
Access-Control-Allow-Origin: *
The implementation will vary depending on the back-end you are using.
If the host in the Origin header of the request is anything but the host of the request, the response must include the listed Origin in the Access-Control-Allow-Origin header. Setting this header to * will allow all origins.
For very specific information on cross origin resource sharing see http://www.w3.org/TR/cors/. If you're not big on reading w3c documents, check out MDN's primer.
Note: Internet Explorer does its own thing with regards to cross domain requests. This answer is a good start if you have issues with IE.
I tried to call JavaScript function exist on some server(server1) from another server(server2) and I got this error:
Unsafe JavaScript attempt to access frame with URL https://server1/ from frame with URL https://server2/ . Domains, protocols and ports must match.
I used JSP, Java, JavaScript and tomcat7, is there any way to solve this problem? any help will be appreciated.
Yes, must add a cross-origin rule to the header of your javascript file, which allows access from your other server.
Otherwise, your Browser doesn´t let you do that.
You can look at the answer of this Question: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin
It should tell you how to do it.
Take a look at easyXDM - it provides an RPC feature allowing you to call methods across the Same Origin Policy.
Take a look at one of the demo's here
As described you are subject to the Same Origin Policy, this is designed to protect users.
Google have a good write-up: http://code.google.com/p/browsersec/wiki/Part2.
There are several typical approaches to working around this:
jquery has a getJson or jsonp type of function. most other js libs have something similar. They use a dynamic Script tag, suitable for GET requests from other domains.
Create a servlet on domain1 that proxies to domain2 - allows unrestricted HTTP methods and use of XmlHTTPRequest.
I've not tried http://easyxdm.net/wp/
There are improvements coming, like cross document messaging in HTML5
I am writing an HTML5 application that is gathering data from a few different sources using JSONP. Anything I'm doing with a GET works perfectly. I'm now trying to POST data, and I've run into an interesting snag. I need to POST data from my application to another, where my application is running from a local machine. I am trying to write a cross-platform capable mobile application (think Pulse/Flipboard), so the code will always be running from a local source. My thought process was as follows:
Use JSONP - JSONP does not allow for posting, it just doesn't work that way (Post data to JsonP)
Rely on CORS - Since the request is coming from a local source using file://, the origin header is null. This causes the request to fail (XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin)
Use another server to bounce the request off of - this would be expensive
All of the browsers I'm targeting are webkit based (iPad, Playbook, Android), so I'm wondering if there are any creaks in the same origin policy code that I can sneak through? Maybe something using iframe or postMessage?
As it would turn out, the easiest way to do this is to post to the target url inside of an iframe. Same origin policy on most browsers allows you to perform an HTTP POST from one domain to another unrelated domain. I solved the problem by adding an iframe to my page, initially set to a local bootstrapping page. Since that page was loaded from the same domain, I am able to control it via script. I used that to post the form to my target site, and polled the results to determine if my call was successful. It's not elegant, but it works.
This Javascript library can almost certainly help you:
http://easyxdm.net/
easyXDM is a Javascript library that
enables you as a developer to easily
work around the limitation set in
place by the Same Origin Policy, in
turn making it easy to communicate and
expose javascript API’s across domain
boundaries.
..
At the core easyXDM provides a
transport stack capable of passing
string based messages between two
windows, a consumer (the main
document) and a provider (a document
included using an iframe). It does
this by using one of several available
techniques, always selecting the most
efficient one for the current browser.
For all implementations the transport
stack offers bi-directionality,
reliability, queueing and
sender-verification.
I am looking forward to create a javascript API that contains most of the functions that facebook Javascript API provides.
FB.api
FB.init
FB.logout
FB.getLoginStatus
FB.login
FB.ui
I can just embed script tag in remote website and need to do all the ajax calls from that page to my server. I am creating an architecture and needs someone help in finishing it with his/her excellent ideas.
Take a look at https://github.com/facebook/facebook-js-sdk/blob/deprecated/src/core/xd.js
They use a combination of rpc workarounds (with a relay file), Flash Local Connection and postMessage, whichever is supported by the browser.
You can also take a look at Cross Site XmlHttpRequest(CORS). From your question, it seems that you can control your server that will respond to the requests. In that case, you can tune the headers to receive requests and respond to cross domain requests.
Then, your embedded script will be able to talk to your server from any web page if you configure the request header in the requests that you make from your embedded script.
I like this method as it is extremely easy to implement. Watch out for browser support though!
They are using JSONP. It's widely used and is supported by javascript frameworks like JQuery.
I have a piece of javascript executing on a jetty server which is sending a XMLHTTPRequest to a scoket on another server(wamp server).
The request gets sent to the socket, however the XHR response seems to be getting blocked.
My only thoughts on this is it may be an issue with XSS(cross site scripting).
Is there a way in which i could enable cross site scripting for this particular request or is there something else i should be doing?
Any help would be greatly appreciated!
That sounds about right. Browser cross-domain policy blocks XHR requests to other domains. Try using the JSONP technique in order to circumvent this.
It may seem odd that cross-domain policy can be so easily circumvented, but that's because when a server exposes a JSONP interface, it is clearly a mutual agreement.
Good luck!
Take a look here, this lets you expose an ajax endpoint across the domain boundary without the use of JSONP - its plain XHR with a little bit of cross domain messaging on top.
For the exact example of cross domain ajax, see this http://consumer.easyxdm.net/current/example/xhr.html
By the way, this is what the Russian version of Facebook (vkontakte, 75+mill users) uses for its API.
You cannot make xmlhttprequests to other servers. You have 2 options
proxy everthing through the server that servs the javascript.
use a <script> tag to pull data off the otherserver using dynamically generated js on that server.
Thanks guys for your response but I actually found that the issue was with same origin policy as I am running both servers from the same host but with different port numbers.
JSONP seems like it may solve the problem, but I am going to try just use the one server now for completeness.
The following article explains my problem under the background heading.
and in column four of the table.
http://taossa.com/index.php/2007/02/08/same-origin-policy/