网站上的视频直播是怎么做的呢,小程序商城排名,下载wordpress程序,资溪县建设局网站# 目录 为什么有同源策略#xff1f; 需要解决的问题CORS跨域请求方案 preflightwithCredentials附#xff1a;高效、优雅地调试CORS实现为什么有同源策略#xff1f; 同源策略Same Origin Policy 是一种约定#xff0c;是浏览器最核心的安全功能#xff1a;该策略允许在… # 目录 为什么有同源策略 需要解决的问题CORS跨域请求方案 preflightwithCredentials附高效、优雅地调试CORS实现为什么有同源策略 同源策略Same Origin Policy 是一种约定是浏览器最核心的安全功能 该策略允许在源自同一站点的页面上运行的脚本在没有特定限制的情况下访问彼此的数据但阻止脚本访问存储在不同域中的数据。 所谓同源是指域名、协议、端口相同。 同源策略主要是为了安全如果浏览器没有同源限制那么 ① 某域下的Cookie等与该域相关的密切数据可以任意读取 ② 不同域下DOM任意操作篡改 ③ 恶意网站能随意执行Ajax脚本偷取隐私数据 针对以上第③点举个栗子 用户正在访问银行网站B但未注销。然后用户转到另一个站点A该站点在后台运行一些恶意JavaScript代码该代码从银行站点B请求数据。由于用户仍然登录银行站点恶意代码可以执行用户在银行站点B上执行的任何操作。 例如它可以获得用户上次交易的列表创建新交易等。这是因为浏览器可以基于银行站点的域向银行站点发送和接收会话cookie。 访问恶意站点的用户以为他访问的站点无法访问银行会话cookie。虽然恶意网站下JavaScript确实无法直接访问银行会话cookie但它仍然可以通过银行网站的会话cookie向银行网站发送和接收请求。 同源策略在实施中需要解决的问题: 同源策略限制 通过脚本访问不同域的数据大棒一挥 关闭了正常访问外部域名数据的可能。 有以下变通方法 实现CORS (Cross-Origin Resource Sharing) 使用JSONP (JSON Padding) Use postMessage method 建立一个本地代理服务器这样先同源访问由代理服务器转发请求 CORS跨域请求方案 CORS是一个服务器允许放松同源策略的W3C标准服务器可以显式允许同源请求并且拒绝其他的非同源访问。 CORS标准描述了新的HTTP标头它为浏览器提供了一种仅在获得许可时才能请求远程URL的方法。尽管服务器可以执行某些验证和授权但浏览器通常负责支持这些标头并遵守它们所施加的限制。 Request headers OriginAccess-Control-Request-MethodAccess-Control-Request-HeadersResponse headers Access-Control-Allow-OriginAccess-Control-Allow-CredentialsAccess-Control-Expose-HeadersAccess-Control-Max-AgeAccess-Control-Allow-MethodsAccess-Control-Allow-Headers举个橘子: CORS规范 ① 浏览器使用XmlHttpRequest发起跨域Ajax请求浏览器会自动携带Origin请求 ② 服务器有一套自己的的CORS逻辑这个逻辑会在服务端响应头Access-Control--*******--中体现 举例 Access-Control-Allow-Origin: */Origin/null // 该响应头会3种可能值 ③ 浏览器会遵守Access-Control--*******-- 响应头对应值所施加的限制 GET /resources/public-data/ 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/access-control/simpleXSInvocation.html
Origin: http://foo.exampleHTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61
Access-Control-Allow-Origin: *
Keep-Alive: timeout2, max100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xmlBODY 预检Preflight 对于可以修改数据的Ajax和HTTP请求方法通常是GET以外的HTTP方法或者某些MIME类型的POST用法CORS规范要求浏览器“预检”请求 使用HTTP OPTIONS请求方法从服务器请求支持的方法由浏览器发起然后在服务器“批准”时使用实际的HTTP请求方法发送实际请求。 上图描述了浏览器是是怎样决定使用【简单请求】还是 【预检XHR请求】 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); }
}......
// 以上使用POST 发送了一个xml同时自定义了一个request header X-PINGOTHER 该跨域请求必定会触发浏览器预检行为 携带凭据跨域 默认情况下浏览器在XMLHttpRequest请求中不会发送凭据 凭据包括HTTP cookies 和 Http认证信息比如 Authorization头)。 访问的外站API需要授权这时就涉及携带凭据跨域 const invocation new XMLHttpRequest();
const url http://bar.other/resources/credentialed-content/;function callOtherDomain(){if(invocation) {invocation.open(GET, url, true);invocation.withCredentials true; // 该标记设定在XMLHttpRequest中发送凭据invocation.onreadystatechange handler;invocation.send(); }
} 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-Origin响应头指定一个Origin而不能再用 * 通配符。
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Set-Cookie: pageAccess3; expiresWed, 31-Dec-2008 01:34:53 GMT // 设置新的Cookie
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 106
Keep-Alive: timeout2, max100
Connection: Keep-Alive
Content-Type: text/plain[text/plain payload] 需要注意 以上携带请求凭据跨域若响应头Access-Control-Allow-Origin被指定为“*” 请求将报错 也就是说 在携带凭据跨域的时候服务器响应头不允许使用囫囵吞枣的* 通配符。 虽然浏览器提示报错实际上浏览器会取得Response但是浏览器会遵守CORS规范阻止你的代码访问响应体。 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials。 https://stackoverflow.com/questions/46737291/cors-error-but-data-is-fetched-regardless The browser itself runs into no error in getting the response. But your code runs into an error because it’s trying to access a response that’s not there — because the browser isn’t exposing the response to your code. 附一种高效、优雅地调试CORS实现的方法 https://stackoverflow.com/questions/12173990/how-can-you-debug-a-cors-request-with-curl/12179364#12179364 CORS规范很大程度体现了服务端对资源的安全策略 作为后端开发人员调试CORS规范不是一个简单的事情 直观上需要搭建跨域服务器、构建AJAX脚本请求。 使用Curl命令来调试CORS规范 好嗨哟。 Curl是一个利用URl规则在命令行下工作的文件传输工具可以说是一款强大的http命令行工具。 https://curl.haxx.se/docs/manpage.html 下面curl命令演示了在某网站跨域Post请求外站api时 触发的预检options请求 curl https://A.com/api/3.0/drilldown/query -X OPTIONS -H Access-Control-Request-Method: POST -H Origin: http://www.example.com.cn -H User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36 -H Access-Control-Request-Headers: content-type --verbose -X 请求动词 -H 指定请求头 --verbose 输出详细内容 结果如下 以上从为什么怎么做更高效的完成 三方面讲述了CORS希望对大家有所帮助。 作者JulianHuang 感谢您的认真阅读如有问题请大胆斧正觉得有用请下方或加关注。 本文欢迎转载但请保留此段声明且在文章页面明显位置注明本文的作者及原文链接。 转载于:https://www.cnblogs.com/JulianHuang/p/10337980.html
