首页澳门新葡亰官方网站 › WEB跨域能源分享:Cross-origin Resource Sharing(COLacrosseS),cross-origincors

WEB跨域能源分享:Cross-origin Resource Sharing(COLacrosseS),cross-origincors

跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享,corscross-origin

     
在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求。浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本。但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染。主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求。(同源策略,
即JavaScript或Cookie只能访问同域下的内容)。跨域的解决方案有多重JSONP、Flash、Iframe等,当然还有CORS(跨域资源共享,Cross-Origin
Resource Sharing)今天就来了解下CORS的原理,以及如何使用。

一、CORS概述

跨源资源共享标准通过新增一系列 HTTP
头,让服务器能声明那些来源可以通过浏览器访问该服务器上的各类资源(包括CSS、图片、JavaScript
脚本以及其它类资源)。另外,对那些会对服务器数据造成破坏性影响的 HTTP
请求方法(特别是 GET 以外的 HTTP
方法,或者搭配某些MIME类型的POST请求),标准强烈要求浏览器必须先以
OPTIONS 请求方式发送一个预请求(preflight
request),从而获知服务器端对跨源请求所支持 HTTP
方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP
请求方法发送那个真正的请求。服务器端也可以通知客户端,是不是需要随同请求一起发送信用信息(包括
Cookies 和 HTTP 认证相关数据)。

二、CORS原理

例如:域名A( Web
应用程序中通过<img>标签引入了域名B(:

Access-Control-Allow-Origin:
(或者Access-Control-Allow-Origin:

三、CORS跨域请求控制方法

1.http请求头

Origin:
普通的HTTP请求也会带有,在CORS中专门作为Origin信息供后端比对,表明来源域。

Access-Control-Request-Method: 接下来请求的方法,例如PUT, DELETE等等

Access-Control-Request-Headers:
自定义的头部,所有用setRequestHeader方法设置的头部都将会以逗号隔开的形式包含在这个头中

2.http响应头

然后浏览器再根据服务器的返回值判断是否发送非简单请求。简单请求前面讲过是直接发送,只是多加一个origin字段表明跨域请求的来源。然后服务器处理完请求之后,会再返回结果中加上如下控制字段

Access-Control-Allow-Origin:
允许跨域访问的域,可以是一个域的列表,也可以是通配符"*"。这里要注意Origin规则只对域名有效,并不会对子目录有效。即
是无效的。但是不同子域名需要分开设置,这里的规则可以参照同源策略

Access-Control-Allow-Credentials:
是否允许请求带有验证信息,XMLHttpRequest请求的withCredentials标志设置为true时,认证通过,浏览器才将数据给脚本程序。

Access-Control-Expose-Headers:
允许脚本访问的返回头,请求成功后,脚本可以在XMLHttpRequest中访问这些头的信息

Access-Control-Max-Age:
缓存此次请求的秒数。在这个时间范围内,所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据,非常有用,大幅优化请求次数

Access-Control-Allow-Methods: 允许使用的请求方法,以逗号隔开

Access-Control-Allow-Headers: 允许自定义的头部,以逗号隔开,大小写不敏感

四、浏览器支持情况

在大部分现代浏览器中有所支持,支持(部分支持)CORS协议的浏览器有IE8+,
Firefox5+, Chrome12+, Safari4+,移动端几乎全支持。

图片 1

注:Internet Explorer 8 、9使用 XDomainRequest 对象实现CORS。

五、CORS使用案例

案例环境:客户端使用jQuery,服务端WebApi(2.2)。因本人使用.net语言,所以服务端就使用webApi来演示了。 

首先新建一个webApi项目,这里就不截图一步步介绍了,然后使用Nuget安装支持cors的扩展组件,

Install-Package Microsoft.AspNet.WebApi.Cors

然后打开App_Start问价夹下的WebConfig.cs配置文件类,在Register方法中配置一个全局的cors,为了方便我将一些参数配置到web.config配置文件中

图片 2

图片 3

如果不想使用全局的CORS,可以在某个方法或者ApiController上这样配置:[EnableCors(origins:
"*", headers: "*", methods:
"*")],可以使用具体的参数,多个参数以逗号分隔,不用说,肯定英文逗号。origins 域名要带上http的顶级域名。需要添加
using System.Web.Http.Cors;

 

一般请求来说,客户端的AJAX请求不需要做任何改变,只需要服务端稍作改变即可。

客户端js代码:     apiRootPath是我预先设置的api的顶级域名。

$.ajax({
    url: apiRootPath + "api/Account/Register",
    type: "post",
    data: {
        "UserName": mobile,
        "Password": pwd
    },
    dataType: "json",
    success: function (data) {
        if (data.State == true) {
            RegSuccess(mobile, pwd);
        } else {
            $("#errorText").html(data.Message);
            $("#registerBtn").text("注册");
        }
    }
});

 

因为我配置了全局的CORS方法,而且服务端没有特别之处了,和普通的网站(不跨越)写法一致,这里就不予贴出了。

如果需要对请求进行身份验证,怎么办?我们一cookies实现这个验证。

$.ajax({
    url: apiRootPath + "api/Account/Login",
    type: "post",
    data: {
        "UserName": userName,
        "Password": password
    },
    crossDomain: true,
    xhrFields: {
        withCredentials: true
    },
    dataType: "json",
    success: function (data) {
        if (data.State == true) {
            MLogin(userName, password);
        } else {
            $("#loginBtn").text("登录");
            $("#errorText").html(data.Message);
        }
    }
});

注意这个两句话:crossDomain: true,xhrFields: {withCredentials: true}

六:安全隐患

 如果程序猿偷懒将Access-Control-Allow-Origin设置为:Access-Control-Allow-Origin:
* 允许任何来自任意域的跨域请求,那么久存在被 DDoS攻击的可能。

and待补充。。。

七、如有不足,欢迎指出并补充。

 

转载请注明出处,谢谢。

 

Resource
Sharing)跨域资源共享,corscross-origin
在我们日常的项目开发时使用AJAX,传统的Ajax请求只能...

二:window.postMessage

如果两个网页不同源,就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口,它们与父窗口无法通信。
HTML5为了解决这个问题,引入了一个全新的API:跨文档通信
API(Cross-document messaging)。
这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。
举例:
父窗口http://aaa.com向子窗口http://bbb.com发消息,调用postMessage方法就可以了。

var popup = window.open('http://bbb.com/', 'title');
popup.postMessage('Hello World!', 'http://bbb.com/');

postMessage方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin),即"协议

  • 域名 + 端口"。也可以设为*,表示不限制域名,向所有窗口发送。

子窗口向父窗口发送消息的写法类似:

window.opener.postMessage('Nice to see you', 'http://aaa.com/');

父窗口和子窗口都可以通过message事件,监听对方的消息。

window.addEventListener('message', function(e) {
  console.log(e.data);
},false);

message事件的事件对象event,提供以下三个属性。

  • event.source:发送消息的窗口
  • event.origin: 消息发向的网址
  • event.data: 消息内容

下面的例子是,子窗口通过event.source属性引用父窗口,然后发送消息。

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
   event.source.postMessage('Nice to see you!', '*');
}

event.origin属性可以过滤不是发给本窗口的消息。

window.addEventListener('message', receiveMessage);
function receiveMessage(event) { 
  if (event.origin !== 'http://aaa.com/') return; 
  if (event.data === 'Hello World') { 
      event.source.postMessage('Hello', event.origin); 
  } 
  else { 
      console.log(event.data); 
  }
}

WEB跨域资源共享:Cross-origin Resource Sharing(CORS),cross-origincors

跨域资源共享(CORS):浏览器同源策略中的同源指协议+域名+端口三者完全一致,其中任何一个不同即为跨域

1. 浏览器同源策略是隔离潜在恶意文件的安全机制,限制信息传递和使用的边界,不是信息的保密机制。<img><script><link>以及表单提交都可实现跨域请求,但可能会不同程度受同源策略的限制,因浏览器不同而异;
2. 跨域资源共享(CORS)是一个W3C标准,是在客户端和服务端同时遵循的情况下执行的,整个CORS通信过程,都是浏览器自动完成,在编码上与同源资源共享并无不同(CORS交互中使用WithCredentials除外);
3. 如果客户端不支持跨域资源共享(CORS),则信息的传递和使用将可能受同源策略限制,但服务端返回的任然是正常的HTTP响应;
4. IE未将端口号加入到同源策略的组成部分之中,Chrome 和 Firefox不允许从 HTTPS 的域跨域访问 HTTP。

图片 4

下表给出了相对:

URL 结果 原因
http://store.company.com/dir2/other.html 成功  
http://store.company.com/dir/inner/another.html 成功  
https://store.company.com/secure.html 失败 不同协议 ( https和http )
http://store.company.com:81/dir/etc.html 失败 不同端口 ( 81和80)
http://news.company.com/dir/other.html 失败 不同域名 ( news和store )

**规避浏览器同源策略**:以下列举了一些常见的可用方法

1. document.domain:不同子域通过设置相同的document.domain父级域来共享cookie 和 DOM (iframe)
   document.domain = "company.com:8080";

2. 片段识别符(fragment identifier):在使用iframe场景中,父子页通过URL #后的fragment来跨域传递数据
   window.onhashchange = function () {
      var message = window.location.hash;
      // ...
   }

3. window.name:无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。window.name容量很大,可以放置非常长的字符串
   var data = document.getElementById('myIframe').contentWindow.name;

4. window.postMessage(跨文档通信Cross-document Messaging):这是HTML5新增的API
   var popup = window.open('http://bbb.com', 'title');
   popup.postMessage('Hello World!', 'http://bbb.com');

5. jsonp:最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小;

6. WebSocket:它使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不支持同源政策,只要服务器支持,就可以通过它进行跨源通信;

7. Proxy Server:在本域之内增加Proxy Server节点负责域外数据的访问代理

8. CORS:此处不再赘述

跨域资源共享(CORS)请求:通常CORS请求可分为两类,一类是简单请求,另一类则是预检请求。无论何种请求类型,只要服务端响应中未包含正确的首部如Access-Control-Allow-Origin:

简单请求简单请求与普通请求相比,多了请求首部字段Origin,形如Origin:
:
或者 *。简单请求须满足所有下述条件:

使用下列方法之一:

GET

HEAD

POST

Content-Type :仅POST方法的Content-Type值等于下列之一才算作简单请求:

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

Fetch 规范定义了对 CORS
安全的首部字段集合,不得人为设置该集合之外的其他首部字段。该集合为:

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width

    图片 5

预检请求:需预检的请求必须首先使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求,如果服务端同意,再发送实际请求,这样可以避免跨域请求对服务器的用户数据产生未预期的影响。预检请求须满足所有下述条件:

  • 使用了下面任一 HTTP 方法:
    • PUT
    • DELETE
    • CONNECT
    • OPTIONS
    • TRACE
    • PATCH
  • 人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为:
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type (but note the additional requirements below)
    • DPR
    • Downlink
    • Save-Data
    • Viewport-Width
    • Width
  •  Content-Type 的值不属于下列之一:
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

 图片 6

 

跨域资源共享(CORS)附带身份凭证:默认情况下CORS不会在请求中附带 HTTP
cookies 和 HTTP 认证信息,故需要将 withCredentials 标志设置为 true,如下

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';

function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}

但是,如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true 或者 服务器设置 Access-Control-Allow-Origin 的值为“*”,浏览器任然将不会把响应内容返回给请求的发送者。

图片 7

  • 跨域资源共享(CORS)
    HTTP首部
    :CORS所定义的首部包括响应首部和请求首部,这些首部大多包含同一前缀Access-Control-*,Origin除外。更多解释可参考 HTTP访问控制(CORS)
  • 参考

    1. 浏览器的同源策略

    2. 浏览器同源政策及其规避方法

    3. 跨域资源共享 CORS 详解

    4. HTTP访问控制(CORS)

Resource
Sharing(CORS),cross-origincors 跨域资源共享(CORS)
:浏览器同源策略中的同源指协议+域名+端口三者完全一致,...

题目1: 什么是同源策略

同源策略是指浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。

本域是指:

  • 协议相同
  • 域名相同
  • 端口相同

同源策略的目的是为了保证用户信息的安全,防止恶意的网站窃取数据。

什么是跨域?跨域有几种实现形式

5.跨域的方法

转载本站文章请注明出处:澳门新葡亰官方网站 http://www.radioritmo-bl.com/?p=449

上一篇:

下一篇:

相关文章