2016前端学习(四)

跨域

写过Ajax一般都知道,通过XHR实现Ajax通信的一个主要限制就是跨域安全策略

当然,有些开发中必然少不了跨域开发的问题,所以就出现了CORS

1、CORS

CORS (Cross-orgin Resource Sharing) 跨域资源共享。

CORS的基本思想是,使用自定义的HTTP头部信息让浏览器跟服务器沟通,从而决定请求或相应的成功或失败。

有那么两个跨域可能造成的危害

CSRF (Cross-site Resource Forgery) 跨站点请求伪造
XSS (Cross-site Scripting) 跨站点脚本

当然,目前主流的浏览器都支持XHR的CORS,但是需要服务端的配合修改。那么,机智的前端们总会想出写完美解决的方法,例如JSONP。

2、JSONP

JSONP (JSON with padding) 填充式JSON 或者说参数式JSON。

JSONP是目前用的比较广泛的跨域技术。

JSONP的原理是动态添加script标签,并处理返回的json数据。例如 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
* jsonp function
*
* @param {string} url
* @param {string} callback
*/
function jsonp (url, callback) {
"use strict";

var _script = document.createElement('script'),
_head = document.getElementsByTagName('head')[0];

_script.src = url + '?callback=' + callback;
_head.appendChild(_script);
}


jsonp('http://pr.10years.me/webschool', 'jsonpCallback');
window.jsonpCallback = function (res) {
"use strict";

// do something
console.log(res);
};

注意点: 传入的callback为string类型。。

当然, JSONP也存在不足:
1、因为JSONP是从不同域加载,所以如果不是信任的站点可能存在不安全的现象
2、要确定JSONP请求是否失败并不容易(虽然说HTML5有了script的onerror属性,但是目前浏览器支持情况并不是很好。貌似只能通过很恶心的轮训来判断是否加载成功。)

3、Comet

Comet 服务器推送, 分为长轮询 和流。

4、Web Scokets

… 更多请自行Google了解