HTTP 访问控制 CORS(MDN 文档笔记)

ABSTRACT

2018-04 收藏的 MDN 中文文档。CORS 机制完整参考:同源策略与跨域请求的限制、简单请求与预检请求(preflight)的判定条件、携带身份凭证的请求、以及全部请求/响应首部字段说明。

核心要点

  • 跨域:资源从与自身不同域/端口请求资源;浏览器基于同源策略限制脚本内发起的跨源请求(XMLHttpRequest/Fetch),CORS 是安全的放行机制,需客户端与服务器同时支持。
  • 译者注要点:跨域请求常常能发到服务器,是响应被浏览器拦截(CSRF 正是利用这一点);HTTPS 页面请求 HTTP 资源会被 Chrome/Firefox 直接拦下(混合内容)。
  • 简单请求三条件:方法限于 GET/HEAD/POST;首部不超出 CORS 安全集合;Content-Type 限于 text/plain、multipart/form-data、x-www-form-urlencoded。不满足则先走 OPTIONS 预检。
  • 预检请求:浏览器先发 OPTIONS,带 Access-Control-Request-Method/Headers 声明实际请求的方法与自定义头;服务器回 Access-Control-Allow-Origin/Methods/Headers/Max-Age 决定是否放行;Max-Age 内同请求免再预检。
  • 预检请求重定向:多数浏览器历史上直接报错,规避法——服务端去掉预检重定向、或把请求改造成简单请求、或先用简单请求探真实 URL 再发正式请求;因 Authorization 头触发预检的场景只能服务端改。
  • 携带凭证:xhr.withCredentials = true 才发送 Cookie;响应必须带 Access-Control-Allow-Credentials: true,否则浏览器不把响应交给脚本;此时 Allow-Origin 不得为 *(必须指名具体源)。
  • 响应首部速查:Allow-Origin(* 或指定源,指定源时 Vary 须含 Origin)、Expose-Headers(让 getResponseHeader 能读自定义头)、Max-Age、Allow-Credentials、Allow-Methods、Allow-Headers。
  • 请求首部速查:Origin(总是发送,只含源不含路径)、Access-Control-Request-Method/Headers(预检专用,浏览器自动设置,无需手写)。
  • CORS 由 Fetch 规范(Living Standard)接管定义;IE8/9 用 XDomainRequest 实现,IE10 起完整支持。

关键实体与概念

同源策略、CORS、预检请求(preflight)、OPTIONS、Access-Control-Allow-Origin、withCredentials、混合内容、CSRF

关联概念

来源回溯

  • 原始文件:raw/ip/wechat_articles/HTTP访问控制(CORS).md(MDN 文档,收藏 2018-04-01)

时效性评估

  • 仍有效:CORS 是 Web 平台稳定规范,简单请求/预检/凭证规则至今未变,MDN 该页仍是权威参考。
  • 已过时:文中浏览器兼容性表(IE 时代)已无意义;Fetch 规范持续演进,新增了 Private Network Access(公网页面访问内网资源的新预检)等扩展;SameSite Cookie 默认策略收紧(Lax 默认)使跨站凭证场景比文中更严格——理解本文基础规则后需补充这两块新约束。