Ajax_05之跨域请求-白红宇

Ajax_05之跨域请求

阅读量：5050 次

发布时间：2019-06-12

本文共 6120 字，大约阅读时间需要 20 分钟。

1、跨域请求：

Cross Domain Request：跨域名的HTTP请求，浏览器从某个域名下的资源访问了另一域名下的另一资源（协议、域名或是端口号不同）；

①浏览器允许跨域请求的情形：

②禁止跨域请求的情形：

XHR——浏览器默认出于安全考虑，禁止XHR跨域请求；

③相关名词及解决方案：

a、相同域：两个具有相同的协议（如：http）、相同的端口（如：80）、相同的host（主机名），即为相同域，否则构成跨域；

b、file协议：用于访问本地计算机中的文件；

c、同源策略：跨域之间的脚本是隔离的，一个域中的脚本不能访问、操作另一个域的绝大部分属性和方法；同源策略应对一些特殊情况做处理，例：限制file协议下脚本的访问权限，本地的HTML文件在浏览器中是通过file协议打开的，若脚本能通过file协议访问到硬盘上的其他任意文件，就会出现安全隐患；

d、单向跨域之JSONP：JSON with Padding；

原理：由于HTML中的script标签可以加载执行其它域的javascript，所以可以通过script标记动态加载其它域的资源；

实现：在pageB中以javascript的形式声明pageA所需的数据，然后在pageA中用script标签将 pageB加载进来，JSONP在此基础上加入回调函数，pageB加载完后会执行pageA中定义的函数，所需数据以参数形式传递给该函数；

限制：JSONP适合在受信任的双方传递数据，否则易被第三方脚本篡改页面内容，截获敏感数据；

代码：

function handleResponse(response){

console.log('The responsed data is: '+response.data);

}

var script = document.createElement('script');

script.src = 'http://www.baidu.com/json/?callback=handleResponse';

document.body.insertBefore(script, document.body.firstChild);

/*handleResonse({"data": "zhe"})*/

//原理如下：

//当我们通过script标签请求时

//后台就会根据相应的参数(json,handleResponse)

//来生成相应的json数据(handleResponse({"data": "zhe"}))

//最后这个返回的json数据(代码)就会被放在当前js文件中被执行

//至此跨域通信完成

e、单向跨域之flash URLLoader：

原理：flash有自己的安全策略，服务器可以通过crossdomain.xml文件声明能被哪些域的SWF文件访问，SWF也可以通过API确定自身能被哪些域的SWF加载，跨域访问时，可借助flash发送HTTP请求；

实现：先修改域中crossdomain.xml，将其加入白名单，然后通过Flash URLLoader发送HTTP请求，通过Flash API将响应结果传递给javascript；

限制：不支持IOS；

f、单向跨域之Access Control：

原理：浏览器发送跨域的HTTP请求，请求包含一个Access-Control-Allow-Origin的HTTP响应头部，该响应头声明了请求域的可访问权限；

实现：给被跨域访问的资源添加响应消息头部，设定允许来自某个域名下的页面访问当前页面：header('Access-Control-Allow-Origin:http://xxx.xx');

限制：少数浏览器支持（Firefox、Chrome通过XMLHttpRequest，IE8通过XDomainRequest发送请求）；

g、单向跨域之window.name:

原理：当window的location变化，重新加载，name属性依然保持不变；

实现：在pageA中用iframe加载其它域的pageB，在pageB中用javascript把需要传递的数据赋值给window.name，iframe加载完成后，pageA修改iframe的地址为同域的一个地址，即可读出window.name的值；

代码：

请求代理：

<head>

function proxy(url, func){

var isFirst = true,

ifr = document.createElement('iframe'),

loadFunc = function(){

if(isFirst){

ifr.contentWindow.location = 'http://a.com/cs1.html';

isFirst = false;

}else{

func(ifr.contentWindow.name);

ifr.contentWindow.close();

document.body.removeChild(ifr);

ifr.src = '';

ifr = null;

}

};

ifr.src = url;

ifr.style.display = 'none';

if(ifr.attachEvent) ifr.attachEvent('onload', loadFunc);

else ifr.onload = loadFunc;

document.body.appendChild(iframe);

}

</script>

</head>

<body>

proxy('http://www.baidu.com/', function(data){

console.log(data);

});

</script>

</body>

响应：

window.name = '要传送的内容';

</script>

h、单向跨域之server proxy：

原理：在数据提供方没有提供对JSONP或window.name协议的支持，也没有对其它域开放访问权限时，可使用server proxy（服务器代理）方式抓取数据，跨域的HTTP请求在服务器端进行，客户端不用产生跨域的Ajax请求；

实现：在服务器配置一个代理，将Ajax请求绑定到这个代理路径下，然后由这个代理发送Http请求去访问文件；

限制：该跨域方式不需要和目标资源签订协议，带有侵略性，另需对该代理实施一定程度的保护，如限制他人使用或使用频率；

i、双向跨域之document.domain：

原理：同域策略认为域和子域属于不同的域，修改document的domain属性为同一host，可以在域和子域或不同子域间通信；

实现：将不同子域document的domain属性修改为同一host，浏览器会认为它们处于同一域下，此时即可互相调用对方的method来通信；

代码：

请求：

document.domain = 'a.com';

var ifr = document.createElement('iframe');

ifr.src = 'http://www.script.a.com/b.html';

ifr.display = none;

document.body.appendChild(ifr);

ifr.onload = function(){

var doc = ifr.contentDocument || ifr.contentWindow.document;

//在这里操作doc，也就是b.html

ifr.onload = null;

};

响应：

document.domain = 'a.com';

j、双向跨域之FIM：

原理：Fragment Identiter Messaging，父窗口与iframe可以相互读写URL，URL中“#”号及其后面的字符被称为frag，它一般用于浏览器锚点定位，HTTP请求中不会携带frag，每个window通过改变其他window的location来发送消息，并通过监听自己的URL变化来接收消息；

限制：这种方式通信会产生不必要的浏览器历史记录，且有些浏览器不支持onhashchange事件，需要用轮询来获知URL的改变，另URL在浏览器下有长度限制，制约了每次传送的数据量；

k、双向跨域之Flash LocalConnection：

原理：Flash API中有LocalConnection类，该类允许两个SWF之间进行通信，SWF可以播放在独立的Flash Player或者AIR中，也可以嵌套在HTML页面或者PDF中；

实现：在不同域的HTML页面各自嵌套一个SWF来相互传递数据；

限制：数据量有40kb的大小限制，且过程复杂，实用性不强；

l、双向跨域之window.postMessage：

HTML5定义的新方法，可跨window通信，在较旧浏览器中无法使用；

代码：

请求：

window.onload = function() {

var ifr = document.getElementById('ifr');

var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'效果一样

// 若写成'http://c.com'就不会执行postMessage了

ifr.contentWindow.postMessage('I was there!', targetOrigin);

};

</script>

响应：

window.addEventListener('message', function(event){

// 通过origin属性判断消息来源地址

if (event.origin == 'http://a.com') {

alert(event.data); // 弹出"I was there!"

alert(event.source); // 对a.com、index.html中window对象的引用

// 但由于同源策略，这里event.source不可以访问window对象

}

}, false);

</script>

m、双向跨域之Cross Frame：

原理：FIM的变种，借助空白iframe，不会产生多余浏览器历史记录，也不需要轮询URL的改变；域中pageA和空白代理页proxyA，另一个域pageB和其空白代理页proxyB，pageA向pageB发送消息时页面创建隐藏的iframe，iframe的src指向proxyB，并把message作为URL frag；pageB和proxyB是同域，iframe加载完成后，pageB可以获得iframe的URL，解析出message，并移除iframe；反向同理；

限制：Opera无法使用，但可使用window.postMessage；

n、动态创建script：

function loadScript(url, func) {

var head = document.head || document.getElementByTagName('head')[0];

var script = document.createElement('script');

script.src = url;

script.onload = script.onreadystatechange = function(){

if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){

func();

script.onload = script.onreadystatechange = null;

}

};