同源策略

Question

也许你们中的一些人可以帮助我更好地理解JavaScript同源策略。

同源策略的定义如下（来源于：http://en.wikipedia.org/wiki/Same_origin_policy）：

在计算机中，同源策略是一种重要的安全概念，适用于许多基于浏览器的编程语言，例如JavaScript。该策略允许来自同一站点的页面上运行的脚本无需特定限制即可访问彼此的方法和属性，但防止跨站点的页面访问大多数方法和属性。

我已经将一个GWT应用程序部署到了Google App Engine，并使用以下URL进行访问： http://metalsandstocks.appspot.com 由于GWT将所有Java代码编译为JavaScript代码，这意味着我的应用程序是以JavaScript形式部署的。由于这是一个Ajax应用程序，因此我认为它必须遵守同源策略。该应用程序使用Ajax调用不同域名（http://finance.yahoo.com）以获取实时股票报价并显示给用户。该应用程序按照描述工作，但其域名与调用更新的域名不同。该应用程序是否违反了同源策略？为什么？

- GimmeShelter

Answer 1

CORS (跨源资源共享) 是一种允许跨域 AJAX 调用的标准方法。

很简单。例如，如果在页面中添加 HTTP 头 Access-Control-Allow-Origin: *（例如使用 PHP），那么任何域中的 JavaScript 都可以使用 AJAX 读取该页面。如果没有这样的头，则同源策略将阻止来自不同域的 AJAX 调用读取该页面。

使用 CORS，页面所有者（例如公开特定数据或 API 的页面）可以将该页面（仅该页面）暴露给其他人从他们自己的域调用。原则是，如果页面所有者明确表示“其他人可以访问我的内容”，则 CORS 将允许。否则，假定为同站点策略。

参见：http://www.w3.org/TR/cors/

- Oliver Moran

Answer 2

您可以使用JSONP获取雅虎财经信息，所以这绝对是您正在使用的方法。

一个示例URL是...

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

当请求加载完成后，它将调用您在GET参数中定义的回调函数。如果服务支持JSONP，则可以绕过同源策略。另外，一些人使用他们的服务器作为代理。

- alex

Answer 3

访问服务之间的数据，并不同于从另一个域中调用定义在一个域中的JavaScript函数。

换句话说，我认为你混淆了“同源策略”（例如，我的浏览器中的一个标签页无法调用在另一个标签页中定义的站点上的JS函数）和JS从URL获取数据（例如来自雅虎的股票价格）。

- jefflunt

Answer 4

以下是您需要做的事情：JSONP。

由于政策原因，您无法向雅虎发出AJAX请求，但有解决方法。即脚本标记，它可以向任何地方发出请求。

例如，假设您希望在用户单击“GO”按钮时对雅虎进行请求。您需要添加事件处理程序以捕获用户的单击事件，然后将新的脚本标记添加到DOM的头部部分。脚本标记的URL很重要，它必须具有回调参数，例如：

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

注意回调函数可以是任意的函数名称。响应将会是：

xss(["asdf"])

这意味着您代码中的xss函数将接收到["asdf"]。

或使用Yahoo的API；

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

注意回调函数YAHOO.Finance.SymbolSuggest.ssCallback，当请求返回时将调用该函数：

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"}]}})

这是一个关于编程的内容，翻译如下：

这里是你需要动态添加脚本标签所需的js示例：

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

我在这里更详细地记录了该过程：http://eggie5.com/22-circumvent-same-origin-policy

- eggie5