6

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.org/wiki/Same_origin_policy):

In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.

I have deployed a GWT application to the Google App Engine with url

http://metalsandstocks.appspot.com

Since GWT compiles all java into javascript this means my app is deployed as javascript. Since this is an ajax application I assumed that it would be required to abide by the same origin policy. The app uses ajax to make calls to a different domain(http://finance.yahoo.com)in order to get real-time stock quotes for dispaly to the user. The app works as described yet it has a different domain than the one it calls for it's updates. Does this app violate the same origin policy? Why or why not?

sdleihssirhc
  • 42,000
  • 6
  • 53
  • 67
GimmeShelter
  • 77
  • 1
  • 5

4 Answers4

6

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/

Oliver Moran
  • 5,137
  • 4
  • 31
  • 45
5

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.

alex
  • 479,566
  • 201
  • 878
  • 984
3

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

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).

jefflunt
  • 33,527
  • 7
  • 88
  • 126
0

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

eggie5
  • 1,920
  • 18
  • 25