Same origin policy

Question

Maybe some of you can help me get a better understanding of the javascript same origin policy.

The same origin policy is defined as following (http://en.wikipedia.or

Answer 1

Accessing data between services, is not the same as calling a JavaScript function defined on one domain, from another domain.

In other words, I think you're confusing "same origin policy" (which prevents, for example, one tab in my browser from calling a JS function defined on a site in another tab of my browser) with JS getting data from a URL (e.g. stock prices from yahoo).

Answer 2

You can get Yahoo Finance using JSONP, so that is most definitely what you are using.

An example URL is...

http://d.yimg.com/autoc.finance.yahoo.com/autoc?query=Apple&callback=YAHOO.Finance.SymbolSuggest.ssCallback

When the request has loaded, it will call the callback you define in the GET param. This allows you to work around same origin policy, provided the service has support for JSONP.

Alternatively, some people use their server as a proxy.

Answer 3

CORS (Cross-Origin Resource Sharing) is a standard way to allow cross-domain AJAX calls.

It's quite simple. For example, if the HTTP header Access-Control-Allow-Origin: * is added to a page (using PHP for example) then JavaScript from any domain will be able to read the page using AJAX. If such a header is not present then the same-origin policy will prevent the page from being read by AJAX calls from a different domain.

Using CORS, the owner of a page (for example a page that exposes specific data or an API) can expose that page (and that page only) for others to call from their own domains. The principle is that if the owner of a page explicitly says "it's OK for other to access my stuff" then CORS will allow it. Otherwise, the same-site policy is assumed.

See: http://www.w3.org/TR/cors/

Answer 4

Here's what you need to do: JSONP.

Because of said policy you can't make an AJAX request to yahoo, but there are workarounds. Namely, the script tag, which can make a request to anywhere.

For example, say you want to do the request to yahoo when a user clicks the "GO" button. You need to add an event handler to catch the user's click event then add a new script tag to the head section of the DOM. The URL of the script tag is important, it must have a callback param in it, e.g.:

http://helloasdf.cloudfoundry.com/get.tokens?callback=xss

Note callback can be any arbitrary function name. The response will be:

xss(["asdf"])

meaning that the xss function in your code will be passed ["asdf"].

Or w/ yahoo's API;

http://d.yimg.com/autoc.finance.yahoo.com/autoc?query=GS&callback=YAHOO.Finance.SymbolSuggest.ssCallback

notice the callback=YAHOO.Finance.SymbolSuggest.ssCallback it will call that function when the request returns:

YAHOO.Finance.SymbolSuggest.ssCallback({"ResultSet":{"Query":"gs","Result":[{"symbol":"GS","name": "The Goldman Sachs Group, Inc.","exch": "NYQ","type": "S","exchDisp":"NYSE","typeDisp":"Equity"},{"symbol":"^GSPC","name": "S&P 500 INDEX,RTH","exch": "SNP","type": "I","typeDisp":"Index"},{"symbol":"GSS","name": "Golden Star Resources, Ltd.","exch": "ASE","type": "S","exchDisp":"AMEX","typeDisp":"Equity"},{"symbol":"^GSPTSE","name": "S&P/TSX Composite index (Interi","exch": "TOR","type": "I","exchDisp":"Toronto","typeDisp":"Index"},{"symbol":"GSK","name": "GlaxoSmithKline plc","exch": "NYQ","type": "S","exchDisp":"NYSE","typeDisp":"Equity"},{"symbol":"GSX","name": "Gasco Energy Inc.","exch": "ASE","type": "S","exchDisp":"AMEX","typeDisp":"Equity"},{"symbol":"OIL","name": "iPath S&P GSCI Crude Oil TR Index ETN","exch": "PCX","type": "E","typeDisp":"ETF"},{"symbol":"GSIC","name": "GSI Commerce Inc.","exch": "NMS","type": "S","exchDisp":"NASDAQ","typeDisp":"Equity"},{"symbol":"GST","name": "Gastar Exploration, Ltd.","exch": "ASE","type": "S","exchDisp":"AMEX","typeDisp":"Equity"},{"symbol":"GSI","name": "General Steel Holdings, Inc.","exch": "NYQ","type": "S","exchDisp":"NYSE","typeDisp":"Equity"}]}})

Here is an example of the js you need to dynamically add the script tag:

 var headLoc = document.getElementsByTagName("head").item(0);
 var scriptObj = document.createElement("script");
 var token="localstring"
 var url="http://helloasdf.cloudfoundry.com/get.tokens?callback=xssCallback";
  // Add script object attributes
  scriptObj.setAttribute("type", "text/javascript");
  scriptObj.setAttribute("charset", "utf-8");
  scriptObj.setAttribute("src", url);
  scriptObj.setAttribute("id", 'asf12');

  headLoc.appendChild(scriptObj);

I've documented the process more here: http://eggie5.com/22-circumvent-same-origin-policy