同源政策答案

【问题标题】：Same origin policy同源政策
【发布时间】：2011-08-17 08:25:02
【问题描述】：

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

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

在计算领域，同源策略是许多浏览器端编程语言（例如 JavaScript）的重要安全概念。该策略允许在来自同一站点的页面上运行的脚本无特定限制地访问彼此的方法和属性，但禁止跨不同站点的页面访问大多数方法和属性。

我已经使用 url 将 GWT 应用程序部署到 Google App Engine

http://metalsandstocks.appspot.com

由于 GWT 将所有 java 编译成 javascript，这意味着我的应用程序被部署为 javascript。由于这是一个 ajax 应用程序，我假设它需要遵守同源策略。该应用程序使用 ajax 调用不同的域 (http://finance.yahoo.com) 以获得实时股票报价以显示给用户。该应用程序按描述工作，但它的域与它要求更新的域不同。这个应用程序是否违反了同源政策？为什么或为什么不？

【问题讨论】：

标签： javascript same-origin-policy

【解决方案1】：

CORS（跨域资源共享）是允许跨域 AJAX 调用的标准方式。

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

使用 CORS，页面（例如公开特定数据或 API 的页面）的所有者可以公开该页面（并且仅限该页面），以供其他人从他们自己的域调用。原则是，如果页面所有者明确表示“其他人可以访问我的东西”，那么 CORS 将允许它。否则，将采用同一站点策略。

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

【讨论】：

【解决方案2】：

您可以使用 JSONP 获取 Yahoo Finance，这绝对是您正在使用的。

一个示例网址是...

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

当请求加载完毕后，它会调用你在 GET 参数中定义的回调。这允许您解决同源策略，前提是该服务支持 JSONP。

另外，有些人使用他们的服务器作为代理。

【讨论】：

【解决方案3】：

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

换句话说，我认为您将“同源策略”（例如，它阻止我的浏览器中的一个选项卡调用在我浏览器的另一个选项卡中的站点上定义的 JS 函数）与 JS 获取数据混淆了来自 URL（例如来自 yahoo 的股票价格）。

【讨论】：

【解决方案4】：

这是您需要做的：JSONP。

由于上述政策，您无法向雅虎发出 AJAX 请求，但有一些变通方法。即脚本标签，可以向任何地方发出请求。

例如，假设您想在用户单击“开始”按钮时向 yahoo 发出请求。您需要添加一个事件处理程序来捕获用户的点击事件，然后将一个新的脚本标签添加到 DOM 的 head 部分。 script 标签的 URL 很重要，它必须有一个回调参数，例如：

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

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

xss(["asdf"])

意味着你代码中的xss函数会被传递["asdf"]。

或使用雅虎的 API；

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

注意 callback=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&amp;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

【讨论】：