同源策略、跨域、jsonp

• 什么是同源策略
• 同源策略是浏览器的一个功能(same-origin-policy)
• 同源就是协议、域名、端口号都相同的URL
• 不同源的客户端脚本在一般授权下不能读写对方的资源。但是可以引用。

a.com/index.html
可以引用b.com/main.js
可以引用b.com/style.css
可以引用b.com/logo.bng
但是a.com里面的b.com/main.js不能对b.com的资源进行读写

• http默认端口80,https默认端口443

例：http://www.a.com/index.html（与以下URL对比）
http://www.a.com/reg.html (同源)
http://1s.a.com/reg.htm(域名不同，不同源)
https://www.a.com/index.htm(协议不同，不同源)
http://www.a.com:8080/reg.html (端口不一致，不同源)

• 什么是跨域？跨域有几种实现形式
• ajax或者iframe指向URL时，只有在域名、端口、协议主页面完全相同时才行，否则就算跨域
• 跨域的解决方式：
  1降域
  2JSONP
  3CORS(Cross-Origin Resoure Sharing,HTTP2方法)
  4postMessage(HTML5 API)
  5其他hack：利用hash、利用window.name
• 降域是什么
• 降域是使两个不同源的URL转变成同源状态。（在iframe状态下）

可以通过降域实现同源的URL：
child1.a.com 与 a.com
child1.a.com 与 child2.a.com
child1.a.com 与 xxx.child2.a.com

• 通过给当前页面和iframe加上document.domain = a.com进行降域处理。
• jsonp 的原理是什么
• jsonp可以看做是一个动态的script，jsonp的使用分为两步
  1在当前html中申明xxx方法，给目标路由发送一个callback=xxx的参数
  2返回路由中JS的内容，调用xxx这个方法

  var script = document.createElement('script');
  script.src = 'http://b.com:8080/jsonp?callback=fn';
  document.head.appendChild(script);
  //document.head.removeChild(script);用于多次使用删除痕迹
//在当前a.com中创建一个script，给引用b.com，并传递一个callback为fn的参数。
fn=req.query.callback
res.send(fn + '(' + JSON.stringify(data)+ ')')
//在路由中返回这个fn(arg),并在a.com下执行，arg参数通过 JSON.stringify(data)转化data这个json对象而来。

• jsonp的问题：
  1只能进行GET请求
  2可被注入（callback=alert(1);）恶意代码

cb = cb.replace(/\(/g, '');
cb = cb.replace(/\)/g, '');
//用正则阻止恶意代码执行

3需要校验身份（Token）

• CORS是什么
• CORS(Cross-Origin Resource Sharing ——跨域资源共享)是HTTP2的方法。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
• 表达的意思是：
  1b.com 声明：我允许 a.com 来访问我
  2a.com 中的 JS 发起对 b.com 的 ajax

XMLHttpRequest.open('get', 'http://b.com:8080/cors', true);
//a.com下向b.com发送请求
res.header("Access-Control-Allow-Origin", "http://a.com:8080");
// res.header("Access-Control-Allow-Origin", "*");接受源无限制
//在b.com下加上请求头部

• postMessage是什么
• postMessage是利用了HTML5的API，在a.com下引用b.com的iframe页面，使用window.frames[0].postMessage(data, '*');向b.com下发送内容，而b.comwindow.parent.postMessage(data, '*');向a.com下发送内容。在a.com与b.com下通过绑定message事件来得到data。

window.addEventListener('message', function(event){
        console.log(event.data);
    })
//当前页面下接受信息后输出此事件的信息

本博客版权归 本人和饥人谷所有，转载需说明来源