JSONP_跨域

同源策略

通常来说，浏览器处于安全方面的考虑 ，只允许本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不允许读写对方的资源。

• 同协议：比如都是http或者https
• 同域名：域名相同包括子域也相同（如a.com、b.a.com、c.a.com）三者为不同的域名。两个域名对应相同的ip，但他们也存在跨域问题。
• 同端口： 默认情况下都是80端口。
• 对于当前页面来说，页面存放js的域不重要，重要的是加载该js的页面所载什么域。

跨域的几种实现形式及各自原理、使用方法

跨域：跨域就是实现不同域的接口可以进行数据交互

• JSONP
  JSONP 是JSON with padding（填充式JSON或参数式JSON）的简写。html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口。
  JSONP是通过动态<script>元素来使用的，用来达到异步的目的。使用时可以为src属性指定一个跨域的URL。JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般是在请求中指定的，而数据就是传入回调函数中的JSON数据。一个典型的JSONP请求如下：
  http://freegeoip.net/json/?callback=handleResponse
  JSONP优点在于简单易用，能够直接访问响应文本，支持浏览器与服务器之间的双向通信。不过JSONP需要后端支持并提供接口，是从其他域中加载代码执行，很可能会在响应中夹带一些恶意代码。
  JSONP跨域展示

• CORS
  CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。CORS兼容IE10+ 。
  CORS代码展示

• 降域
  降域是相对于iframe元素而言的 。
  一般来说域名为http://b.test.com/b的网页以iframe的形式嵌在域名为http://a.test.com/a的网页中，浏览器发现该请求不符合同源策略，正常情况下不能进行跨域访问，但是当我们在两个页面中分别设置documet.domain = test.com的时候（注意观察这个方法有一个限制就是 域名中必须有相同的部分），B页面就可以访问到A页面中的资源了，比如下面的代码:
  降域代码展示

• postMessage()
  window.postMessage()是HTML5的新方法，可以使用它来向其它的window对象发送数据，无论这个window对象是属于同源或不同源，IE8+支持。

otherWindow.postMessage(message, targetOrigin);

• otherWindow
  其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
• message
  要传递的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化.
• 通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的orign属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
  postMessage使用展示

1
1
1
1
1
1
1
1
11