- 什么是同源策略
- 同源策略是浏览器的一个功能(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);
})
//当前页面下接受信息后输出此事件的信息
本博客版权归 本人和饥人谷所有，转载需说明来源
网友评论