同源策略

同源策略是浏览器保护用户安全上网的重要措施,协议、域名、端口号三者相同即为同源。

不同源下,浏览器不允许js操作Cookie、LocalStorage、DOM等数据或页面元素,也不允许发送ajax请求,同源下则不受影响。

下图是在Chrom控制台中发送ajax跨域请求的报错信息:

 

图片中黄色部分提示响应被阻止,说明在跨域的情况下,请求依然发送到了服务器且服务器返回了数据,只是被浏览器拦下了。

对于跨域问题可以使用CORS来解决,使用CORS时,HTTP请求分为两种情况:简单请求与复杂请求。

简单请求

满足以下三点即为简单请求:

  • HTTP请求方法为GET、POST或HEAD
  • HTTP请求头只能包含Accept, Accept-Language, Content-Language, Content-TypeLast-Event-ID
  • ContentType的值只能为以下三种:
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

复杂请求

除简单请求之外即为复杂请求。浏览器在发送复杂请求前会先发送Preflight request(预检请求),即发送OPTIONS请求。注意是浏览器发送的,用户无感。

 

 

预检请求头包含两个特定字段:

  • Access-Control-Request-Method
    表示后续请求会用到的HTTP方法,该字段必选
  • Access-Control-Request-Headers
    后续请求中所设置的请求头部信息,注意,这里不包含浏览器默认设置的头部字段,如:User-Agent。该字段可不发送。

服务器会检查对预检请求中的OriginAccess-Control-Request-MethodAccess-Control-Request-Headers字段值,并返回正常的HTTP响应。
浏览器根据返回信息判断后续请求是否符合服务器端跨域要求,不符合则抛出错误信息。通过预检请求后,则发送后续请求,此时和简单请求无差别。

服务器配置CORS的几个字段

  • Access-Control-Allow-Origin
    必选,设置允许哪些源访问服务器资源
  • Access-Control-Allow-Methods
    必选,设置允许哪些HTTP方法
  • Access-Control-Request-Headers
    设置HTTP请求头中包含哪些字段,如果浏览器请求包括Access-Control-Request-Headers字段,则必选

以上三个字段为常用字段,其余字段配置参考:CORS policy options

withCredentials与Cookie的跨域问题

Cookie受到同源策略的限制没有那么严格,默认情况下,只要发送请求方所在域与Cookie的Domain值相同即可将cookie发送至服务器端,无需考虑协议和端口号。在默认情况下,客户端发起的HTTP请求会带上目标域的Cookie,但无法携带其它属于其它的域Cookie。

我们可以借助XMLHttpRequest对象的withCredentials属性及CORS的Access-Control-Allow-Credentials二者来实现跨域的Cookie发送和写入。

var xhr=new XMLHttpRequest();
xhr.open('GET','http://www.target.com:8093/api/GetAllProductType');
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
console.log(xhr.response);
}
}
// 这里使用withCredentials属性来发送Cookie
xhr.withCredentials=true;
xhr.send();

注意,在使用withCredentials时,服务器端不能将Access-Control-Allow-Origin的值配置为*,否则客户端会报错:

Access to XMLHttpRequest at ''http://www.target.com:8093/api/GetAllProductType' from origin 'http://www.request.com:8094' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

一个问题

上周在ASP.NET Web API 2中使用CORS,报错:The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed。原因是服务器端配置了两次CORS,导致返回了两个Access-Control-Allow-Origin:*但浏览器只允许一个。

经过排查发现在Web.config文件中也配置了CORS,与代码中的配置重复,注释掉之后问题解决。该问题参考了:stackoverflow上的回答。

小结

同源策略是浏览器为保障用户(数据)安全而对JS功能进行一定限制。毕竟HTML与CSS只负责网页结构与样式,不具备操作页面元素及与服务器交互的功能。

离开浏览器环境后跨域问题也就不复存在。

严格的限制会导致一些不便,故同源策略开了几个口子:

  • Cookie共享
    子域名可以共享父级域名的cookie

  • 嵌入式资源获取
    <script>,<img>,<link>等标签获取资源不受同源策略限制,这也是JSONP实现跨域的原理

常用处理跨域请求的方式有JSONP和CORS:

  • JSONP
    需要前后端协作处理且只支持GET请求
    不是标准规范
    对老式浏览器友好(这里想到了老古董IE:)

  • CORS
    支持GET、POST、PUT、DELETE等多种请求
    服务器端配置简单且不需要前端写额外的代码
    目前主流浏览器均支持CORS规范

推荐阅读

浏览器家族的安全反击战

Enable Cross-Origin Requests (CORS) in ASP.NET Core

前后端分离 | 关于登录状态那些事

Cross-Origin Resource Sharing (CORS)

Cookie中的几个概念

同源策略与CORS的更多相关文章

  1. 浏览器的同源策略及CORS跨域解决方案 DRF

    一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: UR ...

  2. 同源策略、CORS

    一.同源策略 同源策略(Same origin policy) 是一种约定, 它是浏览器最核心也是最基本的安全功能 , 如果缺少了同源策略, 则浏览器的正常功能可能都会受影响 , 可以说web是构建在 ...

  3. 同源策略与CORS跨域请求

    一.同源策略 1.简介 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源 ...

  4. 同源策略 - JSONP - CORS

    1.  Jquery 对象可以通过 .index() 进行取出自当前元素在父级元素中存放的索引: 2. 浏览器的同源策略 -- Ajax 在访问非本网站的时候,在数据返回的时候,会被浏览器拦截 - 后 ...

  5. [CORS:跨域资源共享] 同源策略与JSONP

    Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...

  6. Apache2 同源策略解决方案 - 配置 CORS

    什么是同源策略 现在的浏览器大多配有同源策略(Same-Origin Policy),具体表现如下: 浏览某一网站,例如 http://www.decembercafe.org/.这个网页中的 Aja ...

  7. 关于安全性问题:(XSS,csrf,cors,jsonp,同源策略)

    关于安全性问题:(XSS,csrf,cors,jsonp,同源策略) Ajax 是无需刷新页面就能从服务器获取数据的一种方法.它的核心对象是XHR,同源策略是ajax的一种约束,它为通信设置了相同的协 ...

  8. 同源策略 & 高效调试CORS实现

    # 目录 为什么有同源策略? 需要解决的问题 CORS跨域请求方案 preflight withCredentials 附:高效.优雅地调试CORS实现 ----------------------- ...

  9. 同源策略jsonp和cors

    同源策略: 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...

随机推荐

  1. Java程序员职业生涯规划

    一.规划 工作3年了,感觉自己的技术现在到了一个瓶颈,在做一些重复性的业务性的工作,没有长进,提高太慢:因此停下脚步对自己的职业生涯做了一个规划,并为之努力奋斗: 20-27岁:技术积累阶段在这 5 ...

  2. UVa 11481 Arrange the Numbers (组合数学)

    题意:给定 n,m,k,问你在 1 ~ n 的排列中,前 m 个恰好有 k 个不在自己位置的排列有多少个. 析:枚举 m+1 ~ n 中有多少个恰好在自己位置,这个是C(n-m, i),然后前面选出 ...

  3. ACM_贪心法_queue_Fence Repair

    题目如下,来源POJ Farmer John wants to repair a small length of the fence around the pasture. He measures t ...

  4. Alpha冲刺 - (5/10)

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 过去两天完成了哪些任务 基于ssm框架的前后端交互测试,结合微信小程序demo 展 ...

  5. python实战提升--1

    #python实战提升 1. 如何在列表.字典.集合中根据条件筛选数据? python中for _ in range(10)与for i in range(10)有何区别 下划线表示 临时变量, 仅用 ...

  6. PgAgent安装、配置、运行

    一 安装cmakewget http://www.cmake.org/files/v2.8/cmake-2.8.5.tar.gztar -zxvf cmake-2.8.5.tar.gzcd /root ...

  7. I2C和I2S的区别和使用方法

    I2C(Inter-Integrated Circuit)总线是由PHILIPS公司开发的两线式串行总线,用于连接微控制器及其外围设备.是微电子通信控制领域广泛采用的一种总线标准.它是同步通信的一种特 ...

  8. vue 项目记录.路飞学城(一)

    前情提要: 通过vue 搭建路飞学城记录  一:项目分析 二:项目搭建 1:创建项目 vue init webpack luffy 2:初始化项目 清除默认的HelloWorld.vue组件和APP. ...

  9. win10 + gtx1060 + cuda8.0 + caffe + vs2013 + Tensorflow + PyTorch

    一. 安装cuda8.0 1)先去官网下载cuda8.0  https://developer.nvidia.com/cuda-toolkit 2)下载完之后进行安装,安装时间有点长,请耐心等待,默认 ...

  10. H5拖动火狐自动打开新标签

    写在前面的话:<H5拖动火狐自动打开新标签>原因是为什么百度很多了我就不细说,本文章只说我自己的解决方法... 自定义数据里写个链接,如果火狐自动打开就跳到这个链接 这个页面就写一句话:关 ...