网站建设公司推广,做网站要求什么条件,wordpress采集豆瓣插件,如何免费制作一个公司网站同源策略浏览器最基本的安全规范——同源策略(Same-Origin Policy)。所谓同源是指域名、协议、端口相同。不同源的浏览器脚本(javascript、ActionScript、canvas)在没明确授权的情况下#xff0c;不能读写对方的资源。同源策略规定了浏览器脚本互操作web数据的基本原则#x… 同源策略浏览器最基本的安全规范——同源策略(Same-Origin Policy)。所谓同源是指域名、协议、端口相同。不同源的浏览器脚本(javascript、ActionScript、canvas)在没明确授权的情况下不能读写对方的资源。同源策略规定了浏览器脚本互操作web数据的基本原则若没有这一基本原则那么某域下DOM元素被另一方任意操作、篡改导致页面显示失控某域下的cookie等与该域相关的数据片段可以随意读取导致与该域密切相关的浏览器cookie片段可能失真恶意网站能随意执行Ajax脚本偷取隐私数据导致该域下核心业务数据被抓取。同源策略在实施中面临的问题默认的同源策略 限制了脚本互操作其他域的能力大棒一挥 关闭了A站脚本正常访问B站数据的需求。有以下变通方法实现CORS (Cross-Origin Resource Sharing)使用JSONP (JSON Padding)建立一个本地代理服务器这样先同源访问由代理服务器转发请求“方案1:CORS是w3C对于跨域请求推出的明确方案方案2、3均是Hack行为。CORS跨域请求方案W3C推出的跨域请求方案让web服务器明确授权非同源页面脚本来访问自身以Response特定标头Access-Control-*******-体现目前现代浏览器均认可并支持这些标头。CORS特定HTTP标头为浏览器提供了授权脚本跨域访问其他域名页面数据的通道。常规的带Cookie Ajax跨域请求const invocation new XMLHttpRequest();
const url http://bar.other/resources/credentialed-content/;
function callOtherDomain(){if(invocation) {invocation.open(GET, url, true);invocation.withCredentials true; // Ajax请求默认不会发送凭据 这里设定在Ajax跨域请求中发送凭据invocation.onreadystatechange handler;invocation.send(); }
}
CORS规范浏览器发起CORS或POST请求浏览器会自动携带Origin标头指示请求来自于哪个站点Web服务器实现跨域访问授权逻辑, 授权结果在Response中以Access-Control--******* 标头体现“最常见的Access-Control-Allow-Origin标头包含 * / Origin /null三种响应值当请求是携带凭据的跨域请求不可囫囵吞枣地指定为*通配符而必须指定特定Origin浏览器会遵守Access-Control--*******-- 标头值所施加的跨域限制GET /resources/access-control-with-credentials/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtmlxml,application/xml;q0.9,*/*;q0.8
Accept-Language: en-us,en;q0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q0.7,*;q0.7
Connection: keep-alive
Referer: http://foo.example/examples/credential.html
Origin: http://foo.example
Cookie: pageAccess2HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:34:52 GMT
Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
X-Powered-By: PHP/5.2.6
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Set-Cookie: pageAccess3; expiresWed, 31-Dec-2008 01:34:53 GMT
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 106
Keep-Alive: timeout2, max100
Connection: Keep-Alive
Content-Type: text/plain[text/plain payload]
以上表示了一个常见的携带cookie跨域Ajax Get请求其中Access-Control-Allow-Credentials: true指示浏览器可以将跨域请求的Response结果暴露给页面。预检Preflight对于非简单Ajax请求通常是GET以外的HTTP方法或者某些MIME类型的POST用法CORS规范要求发起预检请求。“不过预检请求不需要你手动发起浏览器会自动使用OPTIONS请求方法从服务器请求支持的方法然后在服务器“批准”时使用实际的HTTP请求方法发送实际请求。下图显示 浏览器判断 非简单请求的逻辑图下面使用POST动作发起Ajax跨域请求同时自定义request headerX-PINGOTHER该请求触发浏览器预检行为const invocation new XMLHttpRequest();
const url http://bar.other/resources/post-here/;
const body ?xml version1.0?personnameArun/name/person;function callOtherDomain(){if(invocation){invocation.open(POST, url, true);invocation.setRequestHeader(X-PINGOTHER, pingpong);invocation.setRequestHeader(Content-Type, application/xml);invocation.onreadystatechange handler;invocation.send(body); }
}
程序员调试CORS的苦恼跨域请求发生在A---B 两站作为某一方开发人员调试CORS相对麻烦。经过本StackOverFow工程师的检索curl 工具可优雅高效模仿Ajax跨域请求# http://example.com 向谷歌站点发起一个跨域Get请求
curl -H Origin: http://example.com --verbose \ https://www.googleapis.com/discovery/v1/apis?fields
从浏览器Network将请求以cUrl格式拷贝出来改改。总结浏览器同源策略限制对象是浏览器脚本存在跨域请求的场景某些方案是Hack行为W3C推出的CORS 是标准的跨域请求方案思路是在服务端Response标头体现 授权, 浏览器遵守该授权标头。对于非简单的脚本跨域请求浏览器会自动发起 Option请求预检 大部分时候无需关注提供curl 工具帮助高效、优雅调试CORS。后续会聊聊浏览器的另一个有用的安全策略Cookie SameSite策略尽请关注.https://developer.mozilla.org/en-US/docs/Web/HTTP/CORShttps://stackoverflow.com/questions/12173990/how-can-you-debug-a-cors-request-with-curl/12179364#12179364https://curl.haxx.se/docs/manpage.html推荐阅读● 修复搜狗、360等浏览器不识别SameSiteNone 引起的单点登录故障● MongoDB副本集自动故障转移机制、客户端监控● HTTP Strict Transport Security (HSTS) in ASP.NET Core● 解读docker swarm能力实战演练Docker Swarm集群编排● 全网最深刻的ASP.NET Core跨平台技术内幕● AspNetCore结合Redis实践消息队列● TPL Dataflow组件应对高并发,低延迟要求 转载是一种动力分享是一种美德 ~~..~~如果你觉得文章还不赖您的鼓励是原创干货作者的最大动力让我们一起激浊扬清。长按二维码关注我们
