同源策略
限制一个源的文档和js和另一个源的文档和js进行资源交互,是一种必要的安全措施。//是为了防止CSRF攻击--------利用用户的请求发起恶意的攻击
注意
1.端口:在ie浏览器中未将端口纳入同源策略检测中
2 授信范围(Trust Zones):两个相互之间高度互信的域名,如公司域名(corporate domains),则不受同源策略限制。
同源源的定义
如果两个URL的‘协议’,‘域名’,‘端口’相同则被定义为同源,路径是可以不同的。
同源策略是如何阻止跨域请求的?
客户端发送请求-------被允许
服务器处理请求-------被允许
服务器响应请求-------被允许
浏览器获取响应回来的数据-------被同源策略拦截
同源策略限制不同源的交互
1 跨域的写操作:比如你想在你的页面中写一个其他网页的链接这明显是被允许的<a href='http://www.xxxxx.com'></a> 大部分情况下都是被允许的
2 跨域资源嵌入:比如说你想在你的网页中直接使用网上的图片,音乐,视频等资源你可以直接写入它的url地址就行了没有必要下载到本地 大部分情况是被允许的
3 跨域的读操作:比如说你想读取一个你随意打开的网站的数据,一般情况下是无法做到的超级无敌的大哥除外 但常可以通过内嵌资源来巧妙的进行读取访问。比如JSONP
利用JSONP进行跨域的读取
1 用原生的javascript写一个极简的JSONP:
document页面 :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function json(data) {
console.log(data);
}
</script>
<script src="json.js"></script>
</body>
</html>
javascript页面
json({
uname: '张三',
age: 18,
gender: 'male'
});
我们使用src属性避开了同源策略的限制,从窗户翻了进来但是要注意的是锁并没有向你打开。如果你试图在network页面当中寻找该资源你会发现你无法在XMLHttpReques的tab被找到而是在js的tab找到它 这就说你你并没有发起ajax请求
缺点:只能发起GET请求。为什么这么说?当我们看JSONP的源码时会发现它的本质就是创建一个script标签加上src属性和api的地址将script标签插入head标签内。然鹅这种非正规的hack技术是由缺陷的scr只能发起get请求。这也就是为什么jsonp安全问题可以被保证他只能发起get请求无法对服务器端代码或者内容做更改
其他的库的JSONP
jQuery用$.ajax()对jsonp进行了封装。其本质是:
动态的生成script的标签嵌入老head标签内,请求完成后删除创建的script标签。优点:使得页面更加的美观 不会突然的多出几个script标签,使代码的可读性增加。