JavaScript XMLHttpRequest breaks when accessed from alternate domain name - javascript

I have two domain names that point to my website, nathannifong.com, and uncc.ath.cx.
Javascript on the site occasionally needs to pull down resources with XMLHttpRequest. All URLs of resources in client scripts refer to nathannifong.com, and when a user comes to the site by uncc.ath.cx, the scripts fail because of cross domain secuity policy in JavaScript.
What should I change so that users can come to the site by any domain name, but the XMLHttpRequests still work?

If you are using the Domain Name in the URL's to make a ajax request, remove it hence the domain is automatically mapped to the one the user is using and you will not have the cross domain issues.

xhr is contrained by the same origin policy and will not work cross domain - for that use jsonp as already mentioned.

According to The CodeProject, JSONP would be a way of accomplishing this. I've not used it myself, however, but it might be worth taking a look there.

You could look at window.location to determine the page's domain, and then use that to load the request? That way you'd be sure that the request was going to the right domain. You could also look into JSONP, but only for GET requests.

Related

Making an app accessible via two domains for same-origin AJAX request

Before you tell me about Access-Control-Allow-Origin and whitelisting, assume for the sake of argument that I can't touch the HTTP headers.
This is a hypothetical question.
My question:
let's say I have an app available at a domain and I want to send a POST request from another domain, but I own both domains.
let's also say, for the sake of argument, that I'm not at liberty to adjust CORS settings
So I can make an ajax request from website.com to app.website.com. but I have a second website, website2.com, which would also like to make an ajax request to app.website.com
If I were to create two CNAME records for app.website.com so that app.website2.com would point to the same app, could I then make an ajax request from either domain without necessitating the setting of Access-Control headers?
As far as I can tell, the only problem would be a possible SEO penalty from Google for not having a canonical URL for app.website.com, which is irrelevant as in my thought experiment it's basically just an endpoint.
Anybody illuminate me?
If you comply to the same hostname restriction (including the subdomain) then you can indeed use a CNAME to allow both domains to point to the same server.
If your question is about whether the name resolution of the CNAME is of importance for the CORS, then answer is "no it is not considered" and thus you can use this trick.
The Same-Origin Policy judges by hostname (as part of the origin), not physical server.
You can't do that.
To put it differently, if you use shared hosting, you must not get access to anyone else on that shared server.
Instead, you can use JSONP.

Avoiding AJAX cross domain limitations

Is it possible to avoid AJAX cross domain request limitation if JS file with $.getJSON is loaded from the same server (domain) as URL in AJAX request?
Let's say I have a webservice on serverA.com which needs to be called from pages on few other domains e.g. subdomain.serverA.com, serverB.com etc.
JS is placed on serverA.com and included on multiple pages on different domains with absolute URL:
<script src="http://serverA.com/ajax.js" />
while page URL is e.g. http://serverB.com/page.html
In such case, $.getJSON('http://serverA.com/service/',... will avoid cross domain limitations or not?
In other words, browsers are looking at page URL or JS source URL when evaluating same-origin policy for AJAX requests?
It sounds like you're asking "Can I get round the cross domain limitations of javascript?"
The answer is "yes", by using JSONP
There's a lot of good information here:
Basic example of using .ajax() with JSONP?
Ways to circumvent the same-origin policy
jQuery - How to remove cross domain limitation
If that's not the question you're asking then you may need to clarify it a little.
In other words, browsers are looking at page URL or JS source URL when evaluating same-origin policy for AJAX requests?
The same origin policy is based on the URL of the HTML document the script is running on, not the URL of the script itself.
Is it possible to avoid AJAX cross domain request limitation if JS file with $.getJSON is loaded from the same server (domain) as URL in AJAX request?
Yes, but not because the JS file is loaded from there. The URL of the script is irrelevant.
Instead of JSONP, I would recommend Cross Origin Resource Sharing.
The owner of the service, just need to add a header that gives the (static, dynamic or open) list of authorized origins.

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.

Call JavaScript function from remote server

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

How can i get around the same origin policy?

I need to use AJAX to get the content of another page located on a different server from the one the AJAX is loaded from. The AJAX needs to send a POST request then return the result. how can i do this?
Set up proxy on your own server. Have your server call theirs and return the result.
if you control both servers, you can use one of the HTTP header fields for cross-origin resource sharing:
http://www.petefreitag.com/item/703.cfm
https://developer.mozilla.org/En/HTTP_access_control
There is no way to go around that policy. This policy is there for very good reasons.
That is also no problem as long as you're in control over the web application. You could simply redirect the call to the other server from your webserver and pass the result. This would work out like a proxy.
If you want to do that on the client and cross browser, you need some cooperation from the other server.
Either by:
1) using JSONP (inject a script tag with a callback function)
Only GET calls are possible though.
Security is an issue as the script has access to all resources in that page(data, cookies, ...).Here's a post that explain how to sandbox them and keep the data in your page safe.
2) POST looks possible using Kris Zip's window.name technique
If the cooperation from the other server is impossible, the server proxy as described in other answers is, to my knowledge, the only option left.

Categories