Using Ajax with Cookies - javascript

I am trying to create a drag and drop interface for my website that integrates with Imgur. The problem is that I am trying to use ajax with cookies. I have gotten it to work without signing in, but I need the pictures to be under my account. In theory my code should work, but in practice for some reason the ajax requests/cookies aren't working. What am I doing wrong? Thanks :D
My code: http://jsfiddle.net/msm595/9arFd/
My username and password aren't in there (although i was testing with a dummy account anyway).

https://developer.mozilla.org/en/http_access_control#Requests_with_credentials
You are using cross domain plus credentials. Then the server has to response with:
Access-Control-Allow-Origin: http://jsfiddle.net/msm595/9arFd/
and not with:
Access-Control-Allow-Origin:*
Wildcards are not allowed in this case.
You may want to test with Chrome, it shows both headers and gave me this message:
XMLHttpRequest cannot load http://api.imgur.com/2/signin. Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.`
That's all I can say, imgur has to explicitly allow your JS solution. You may need a piece of code running on server's side not having cross domain issues.

Related

Cross Origin Post Request

I'm trying to send a post request to a different site, specifically Zoho.eu, to enable me to login with one click. Effectively I want to POST to the login URL, my username, password etc etc.
I have ran into the Cross origin problem and I have looked at many different solutions such as JSONP, the iFrame method, CORS etc but all of these require me to have access to the third party backend which I don't have.
How do I get around this problem? I understand I can use a proxy somehow to enable me to avoid the cross origin problem but I'm not sure?
Thanks in advance.
If I understand you correctly then the short answer is you can't.
A proxy won't help you to create a session in the user's browser and login. When using a proxy you are doing the requests in behalf of the user from your server, and can't set the required session values to the user's cookies for the target domain.
This is intentional. The whole concept of Same-origin policy/CORS was invented so that others will not be able to do something in behalf of a users in a domain they don't own.
I would consider OAuth, it might be the right way for you to implement this kind of cross-domain login flow.
One easy solution (which is only a temporary fix, you will have to find a more permanent solution for production code) is to hard code the name of the server from where the request is coming in your server controller code and allow access from it.
CORS protection is intented.
Zoho provides cleaner way to authentication to their site with OAuth integration. That is cleaner way to integrate.
Documented clearly here on the steps,
https://www.zoho.com/crm/help/api/using-authentication-token.html
Any other mode of authentication is not allowed and may be blocked by Zoho.
Hope it helps.

How to ajax to different domain

This question have been bothering me for a while. So here is the story. There is another domain name which consist of a php file that produce json result :
lets say http://www.otherdomain.com/token.php and it will produce:
{"token":"123455"}
I want to ajax from mywebsite.com to get and act on the response given. The problem is otherdomain.com is not own my me and I can't modify the content in it or whatsoever.
So I have searched for several answer on stackoverflow and will explain why this doesn't work.
set the CORS header.
It didnt work because the domain is not own by me and i can't do anything about it.
Use my server as a proxy to request the data. (This is workable for a few times, but when the visitor on my site get more and more there will be more data sent from single ip to the site which is from my server which then might triggered 403 error)
Use plugin on chrome or firefox. (This option is okay if i am the only one who using this website)
Use JsonP. It shown in jQuery getJSON works locally, but not cross domain but the answer shows you need to modify the response data on the otherdomain.com file and since i dont own the domain, I cant do anything.
You may not use your option number 4 correctly. jsonp is especially made for cross domain requests. So, jsonp is your solution. If you stuck, then look at google maps or other services, they have working jsonp examples.

Request external domain and not care about the response content without using cors or proxy or anything outside of javascript

So a couple of days ago i was looking for something like this and had actually found it but never found a use for it. I know its listed somewhere on mozilla's site but i forget what the function is called.
In anycase i wish to request an external domain that doesn't have cors and does not requir external help from things like proxy's. its a rather recent function added to javascript as when i read about it (before i forgot the name) it was listed as expiremental technology. It's supposedly a safe alternative to CORS the only catch is unlike cors you are not allowed to view the response.
What i want to use it for is to basically see if the status code returned is 404 or 200 so i can tell users whether a specific site is having issues and since the ammount of sites that would be requested is huge if i do it server side id prefer to have it done in a clients browser only on specific pages.
I think you could get by with sending a HEAD HTTP request.

Setting request header, in a URL?

We have a webservice that is mainly intended to be called from javascript, via jquery's $.ajax(). When we call methods from javascript, we set a security token in a request header. If it's not there, or if it doesn't validate, we return an unauthorized error.
And that's all working fine.
But now we're faced with returning image files. So instead of having javascript call $.ajax(), we're embedding an image tag in the DOM:
<img src='http://mywebservice/imagescontroller/getAnImage?imageid=123'/>
And when we do that, we don't have our security token in the request header. I can think of two "easy" fixes. 1., we simply allow anonymous access to our image URLs, or 2., we pass the security token as a URL parameter.
The first choice is, of course, not a good idea. The second is straightforward enough. But before I settle on this approach, I was wondering if there was some easy way of setting request headers on these sorts of requests, that I was missing.
Ideas?
Easy fix: Use session cookies. That is a cookie without a expiry date. It will automatically transmit with each request and go away as soon as the users closes the browser, or you delete the cookie via javascript.
You simply store your token there and get it delivered for free to your server code.
Have some demo stuff here:
How do I set/unset cookie with jQuery?
If you run the services on another domain, you will need to use CORS to make the AJAX running - otherwise your AJAX will run into the Same Origin Policy. With CORS you can even make the cookies work.
See here: CORS request - why are the cookies not sent?
If you do not want to use CORS, you could also incorporate the service domain into your own via reverse proxying. This will solve the SOP problem as well as make the use of cookies possible. Setting up a reverse proxy within Apache is pretty straight forward.

Javascript API hindered by Cross Domain API calls

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.

Categories