JSONP_跨域

什么是同源策略

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

所谓同源是指"协议+域名+端口" 三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

本域指的是

• 同协议：如都是http或者https
• 同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
• 同端口：如都是80端口

例子

• http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)

不同源的例子：

• http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
• http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
• http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)

需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域

什么是跨域？跨域有几种实现形式

广义的跨域：

1. 资源跳转： A链接、重定向、表单提交
2. 资源嵌入：、

   服务器会在传给浏览器前将JSON数据填充到回调函数（onBack）中。浏览器得到的回应已不是单纯的数据叙述而是一个脚本。在本例中，浏览器得到的是：

   onBack({"Name": "小明", "Id" : 1823, "Rank": 7})
   

   后端node.js代码示例：

   var querystring = require('querystring');
   var http = require('http');
   var server = http.createServer();
   
   server.on('request', function(req, res) {
       var params = qs.parse(req.url.split('?')[1]);
       var fn = params.callback;
   
       // jsonp返回设置
       res.writeHead(200, { 'Content-Type': 'text/javascript' });
       res.write(fn + '(' + JSON.stringify(params) + ')');
   
       res.end();
   });
   
   server.listen('8080');
   console.log('Server is running at port 8080...');
   

   2. CORS

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

   此方法的原理是：

   1. 在服务器上添加下面语句，告诉浏览器，除了同源网址外，还接收什么网址访问

   res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");   
   //允许http://a.jrg.com:8080 端口访问
   res.header("Access-Control-Allow-Origin", "*");    //允许所有其他端口访问
   

   3. 降域

   例如有a（a.jinrengu.com）、b（b.jinrengu.com）两个网址，现在需要用a访问b网址，由于两个网址不一样，故不同源，浏览器阻止访问b网址。
   此方案仅限主域相同，子域不同的跨域应用场景。
   原理：实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
   1.）父窗口：(http://a.yuanqianyi.com:8080/a.html)

   
   
   
   
     
   使用降域实现跨域
     
   
       
     
   
     
   
   
   
   
   
   
   
   
   

   2.）子窗口：(http://b.yuanqianyi.com:8080/b.html)

   
   
       哇哇哇哇
       
   
   
   
   
   
   

   4. postMessage跨域

   postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

   1. 页面和其打开的新窗口的数据传递
   2. 多窗口之间消息传递
   3. 页面与嵌套的iframe消息传递
   4. 上面三个场景的跨域数据传递
   • 用法：postMessage(data,origin)方法接受两个参数
   • data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
   • origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
   1. a.html： (http://a.yuanqianyi.com:8080/a.html)

   //向b发送跨域请求
   document.querySelector('.main input').addEventListener('input', function(){
       console.log(this.value)
       window.frames[0].postMessage(this.value,"*")
   })
   //接收b返回的数据
   window.addEventListener("message",function(e){
       document.querySelector('.main input').value = e.data
       console.log(e.data)
   })
   
   
   

   2. b.html：(http://b.yuanqianyi.com:8080/b.html)

   // 接收a的数据请求
   window.addEventListener("message",function(e){
       document.querySelector('input').value = e.data
       console.log(e.data)
   })
   
   //发送数据给a
   document.querySelector('input').addEventListener('input', function(){
       window.parent.postMessage(this.value,"*")
       window.parent.document.querySelector('input').value = this.value;
   })
   

   参考1
   参考2