通信

2017-08-21

什么是同源策略或者限制？
前后端如何通信？（前后端通信方式了解、知识面）
如何创建Ajax？（借助第三方库原生js实现框架背后原理）
跨域通信的集中方式？

什么是同源策略或者限制？

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

那么什么是源？

所谓的源包含三个部分，即协议、域名、端口。

有什么限制？

Cookie、LocalStorage、IndexDB无法读取。
DOM无法获取，比如document.body。
Ajax请求不能发送，Ajax只能同源发送。

前后端如何通信？

Ajax
Websocket
CORS

如何创建Ajax?

XMLHttpRequest对象工作流程
兼容性处理（只有高级浏览器才支持，老版IE/Firefox不支持）
事件的触发条件
事件的触发顺序

 /**
  * [function 对象浅复制]
  * @param  {[type]} dst [description]
  * @param  {[type]} obj [description]
  * @return {[type]}     [description]
  */
 util.extend = function (dst, obj) {
     for (var i in obj) {
         if (obj.hasOwnProperty(i)) {
             dst[i] = obj[i];
         }
     }
 };

/**
 * [json 实现ajax的json]
 * @param  {[type]} options [description]
 * @return {[type]}         [description]
 */
 util.json = function (options) {
     var opt = {
         url: '',
         type: 'get',
         data: {},
         success: function () {},
         error: function () {},
     };
     util.extend(opt, options);
     if (opt.url) {
         var xhr = XMLHttpRequest
            ? new XMLHttpRequest()
            : new ActiveXObject('Microsoft.XMLHTTP');
         var data = opt.data,
             url = opt.url,
             type = opt.type.toUpperCase(),
             dataArr = [];
         for (var k in data) {
             dataArr.push(k + '=' + data[k]);
         }
         if (type === 'GET') {
             url = url + '?' + dataArr.join('&');
             xhr.open(type, url.replace(/\?$/g, ''), true);
             xhr.send();
         }
         if (type === 'POST') {
             xhr.open(type, url, true);
             xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
             xhr.send(dataArr.join('&'));
         }
         xhr.onload = function () {
             if (xhr.status === 200 || xhr.status === 304) {
                 var res;
                 if (opt.success && opt.success instanceof Function) {
                     res = xhr.responseText;
                     if (typeof res ==== 'string') {
                         res = JSON.parse(res);
                         opt.success.call(xhr, res);
                     }
                 }
             } else {
                 if (opt.error && opt.error instanceof Function) {
                     opt.error.call(xhr, res);
                 }
             }
         };
     }
 };
 export default util;

跨域通信的几种方式？

JSONP
Hash (hash改变页面不刷新)
postMessage (HTML5)
webSocket (不受同源策略限制)
CORS（支持跨域通信的Ajax，变种的Ajax,浏览器在识别用ajax发送了一个跨域请求时，它会在请求的http头中加一个origin来允许跨域通信）

那么JSONP(JSON with Padding)的工作原理是什么？如何实现？

在postMessage,CORS出现之前，前端们一直使用JSONP来做跨域通信。那么如何实现的呢？直白的说，它就是通过JS中Script标签的异步加载来实现的。举个例子，一个页面的域名是www.aaa.com，看页面的script标签加载的资源域名一般不是www.aaa.com，所有的网站js的地址和网站域名都是跨域的。但是它不影响js加载，这也是JSONP实现的最初的基本原理。

进一步理解，AJAX 无法跨域是受到“同源政策”的限制，但是带有src属性的标签（例如<script>、<img>、<iframe>）是不受该政策限制的，因此我们可以通过向页面中动态添加<script>标签来完成对跨域资源的访问，这也是 JSONP 方案最核心的原理。

通常我们使用<script>都是引用的静态资源（主要是 js 文件），其实它也可以用来引用动态资源（php、jsp、aspx等），后台服务被访问后返回一个“JavaScript函数调用”形式的字符串，由于是字符串，因此在后台的时候不会起到任何作用，但到了前台，放入<script>标签之内，就成了一个合法的 JavaScript 函数调用，实参是我们真正需要的数据，被调用的回调函数也已经实现了，因此就会顺利的被调用。

/**
  * [function 判断是否为函数]
  * @param  {[type]} source [description]
  * @return {[type]}        [description]
  */
 util.isFunction = function (source) {
     return '[object Function]' === Object.prototype.toString.call(source);
 };
/**
  * [function 获取一个随机的5位字符串]
  * @param  {[type]} prefix [description]
  * @return {[type]}        [description]
  */
 util.getName = function (prefix) {
     return prefix + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
 };
/**
  * [function 在页面中注入js脚本]
  * @param  {[type]} url     [description]
  * @param  {[type]} charset [description]
  * @return {[type]}         [description]
  */
 util.createScript = function (url, charset) {
     var script = document.createElement('script');
     script.setAttribute('type', 'text/javascript');
     charset && script.setAttribute('charset', charset);
     script.setAttribute('src', url);
     script.async = true;
     return script;
 };

 /**
  * [function jsonp]
  * @param  {[type]} url      [description]
  * @param  {[type]} onsucess [description]
  * @param  {[type]} onerror  [description]
  * @param  {[type]} charset  [description]
  * @return {[type]}          [description]
  */
 util.jsonp = function (url, onsuccess, onerror, charset) {
     var callbackName = util.getName('tt_player');
     window[callbackName] = function () {
         if (onsuccess && util.isFunction(onsuccess)) {
             onsuccess(arguments[0]);
         }
     };
     var script = util.createScript(url + '&callback=' + callbackName, charset);
     script.onload = script.onreadystatechange = function () {
         if (!script.readyState || /loaded|complete/.test(script.readyState)) {
             script.onload = script.onreadystatechange = null;
             // 移除该script的 DOM 对象
             if (script.parentNode) {
                 script.parentNode.removeChild(script);
             }
             // 删除函数或变量
             window[callbackName] = null;
         }
     };
     script.onerror = function () {
         if (onerror && util.isFunction(onerror)) {
             onerror();
         }
     };
     document.getElementsByTagName('head')[0].appendChild(script);
 };
 
<script type="text/javascript">
  // 创建ajax【参考网址】https://segmentfault.com/a/1190000006669043
  // 参考jsonp.js
</script>

<script src="http://www.abc.com/?data=name&callback=jsonp" charset="utf-8"></script>

<script type="text/javascript">
  // jsonp({
  //     data: {
  //
  //     },
  // });
</script>

JSONP有什么优缺点?

JSONP 最大的优点就是兼容性非常好，其原理决定了即便在非常古老的浏览器上也能够很好的被实现。

JSONP 的主要缺点有两个，一是只能 GET 不能 POST，因为是通过<script>引用的资源，参数全都显式的放在URL里，和 AJAX 没有半毛钱关系。二是存在安全隐患，动态插入<script>标签其实就是一种脚本注入，XSS听过没？需要多留个心眼。

Hash如何实现？

// 利用hash，场景是当前页面 A 通过iframe或frame嵌入了跨域的页面 B,需要A向B发送消息

// 在A中伪代码如下：
var B = document.getElementsByTagName('iframe');
var sendData = JSON.stringify({test: 'test'});
B.src = B.src + '#' + 'data=' + sendData;
// 在B中的伪代码如下
window.onhashchange = function () {
    var data = window.location.hash; //hash 会拿到所有的拼接，需要特殊处理
    // todo
};

postMessage

原理：HTML5允许窗口之间发送消息
限制：浏览器需要支持HTML5，获取窗口句柄后才能相互通信
这是一个安全的跨域通信方法，postMessage(message, targetOrigin)也是HTML5引入的特性。

可以给任何一个window发送消息，不论是否同源。第二个参数可以是*但如果你设置了一个URL但不相符，那么该事件不会被分发。看一个普通的使用方式吧：

1
2
3

// URL: http://a.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('Hello, bar!', 'http://b.com');

// URL: http://b.com/bar
window.addEventListener('message',function(event) {
    console.log(event.data);
});

注意IE8及小于IE8的版本不支持addEventListener，需要使用attachEvent来监听事件。参见：事件处理中的this：attachEvent, addEventListener, onclick

websocket

// Websocket【参考资料】http://www.ruanyifeng.com/blog/2017/05/websocket.html

var ws = new WebSocket('wss://echo.websocket.org');

ws.onopen = function (evt) {
  console.log('Connection open ...');
  ws.send('Hello WebSockets!');
};

ws.onmessage = function (evt) {
  console.log('Received Message: ', evt.data);
  ws.close();
};

ws.onclose = function (evt) {
  console.log('Connection closed.');
};

CORS

fetch用来实现CORS通信。

// CORS【参考资料】http://www.ruanyifeng.com/blog/2016/04/cors.html
// url（必选），options（可选）
// 重点   mode: 'cors'  经过测试 必须是相同协议 http或者https

fetch("http://azu.github.io/promises-book/json/comment.json", {
  method: "GET",
  mode: 'cors'
}).then(function(res) {
  console.log(res)
  if (res.ok) {
    alert("Perfect! Your settings are saved.");
  } else if (res.status == 401) {
    alert("Oops! You are not authorized.");
  }
}, function(e) {
  alert("Error submitting form!");
});

详见

项目github