一、跨源资源共享（CORS）介绍

        跨源资源共享（Cross-Origin Resource Sharing，CORS）是一种web标准技术，它允许一个网站的服务器来响应其他网站的请求，从而打破了同源策略的限制。通过CORS，浏览器可以接收到服务器的响应，并查看该响应头部的"Access-Control-Allow-Origin"字段，如果该字段的值允许，或者是"*"（表示接受所有域），浏览器才会处理响应。通过CORS策略网站可以分享其资源，而不必担忧安全问题。

二、受到同源策略影响的一些操作

        AJAX请求：同源策略会阻止使用XMLHttpRequest或Fetch API发起的跨域请求。

        DOM访问：来自不同源的网站不能访问彼此的DOM。

        Cookie，LocalStorage和IndexedDB：JavaScript不能读取到其他网站的数据。

        但请注意，同源策略并非所有Web行为都有影响。例如，<img>元素、<script>元素和<link>元素等可以加载任何网站的资源，这是因为这些操作并不会访问到其他源的文档或脚本。

三、简单请求示例

        某些请求不会触发 CORS 预检请求。如：

        1、GET、HEAD、POST方法

        2、除了被用户代理自动设置的标头字段

        3、Content-Type 标头所指定的媒体类型的值仅限于下列三者之一：（text/plain、multipart/form-data、application/x-www-form-urlencoded）

        4、请求中没有使用 ReadableStream 对象

        假如站点 https://foo.example 的网页应用想要访问 https://bar.other 的资源。foo.example 的网页中可能包含类似于下面的 JavaScript 代码：

const xhr = new XMLHttpRequest();
const url = "https://bar.other/resources/public-data/";
xhr.open("GET", url);
xhr.onreadystatechange = someHandler;
xhr.send();

        浏览器发送给服务器的请求报文：

Copy to Clipboard
GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example

        服务器响应:

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml[…XML Data…]

四、预检请求示例

  1、执行预检请求的 HTTP 请求：

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://bar.other/resources/post-here/");
xhr.setRequestHeader("X-PINGOTHER", "pingpong");
xhr.setRequestHeader("Content-Type", "application/xml");
xhr.onreadystatechange = handler;
xhr.send("<person><name>Arun</name></person>");

2、首次交互是预检请求/响应：

OPTIONS /doc HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

HTTP/1.1 204 No Content
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400  //24 小时
Vary: Accept-Encoding, Origin
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive

3、预检请求完成之后，发送实际请求/响应：

POST /doc HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
X-PINGOTHER: pingpong
Content-Type: text/xml; charset=UTF-8
Referer: https://foo.example/examples/preflightInvocation.html
Content-Length: 55
Origin: https://foo.example
Pragma: no-cache
Cache-Control: no-cache<person><name>Arun</name></person>

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:40 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://foo.example
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 235
Keep-Alive: timeout=2, max=99
Connection: Keep-Alive
Content-Type: text/plain[Some XML payload]

五、涉及的HTTP 响应标头字段

1、允许浏览器访问的资源 

Access-Control-Allow-Origin: https://mozilla.org

2、getResponseHeader() 方法只能拿到一些最基本的响应头，使用下面的相应标头可以使浏览器获取其他响应头。

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

3、指定了 preflight 请求的结果能够被缓存多久

Access-Control-Max-Age: <delta-seconds>

4、当浏览器的 credentials 设置为 true 时是否允许浏览器读取 response 的内容

Access-Control-Allow-Credentials: true

5、指定访问资源时允许的请求方法

Access-Control-Allow-Methods: <method>

6、指用于预检请求的响应。其指明了实际请求中允许携带的标头字段。

Access-Control-Allow-Headers: <header-name>

六、涉及的HTTP 请求标头字段

1、表明预检请求或实际跨源请求的源站。

Origin: <origin>

2、标头字段用于预检请求。将实际请求所使用的 HTTP 方法告诉服务器。

Access-Control-Request-Method: <method>

3、标头字段用于预检请求。将实际请求所携带的标头字段（通过 setRequestHeader() 等设置的）告诉服务器.

Access-Control-Request-Headers: <field-name>

七、简单跨站脚本攻击示例

1、假定存在一个网站 https://vulnerable-website.com，它允许来自任何源的 CORS 请求，也就是说它的服务器对任何请求都返回Access-Control-Allow-Origin: *响应头。

2、攻击者创建了一个恶意网站 https://evil.com，这个网站上有一段 JavaScript 代码，当受害者访问时，该代码会发送一个AJAX请求到 https://vulnerable-website.com。

3、如果受害者在访问恶意网站的同时，还保持着对https://vulnerable-website.com的登录状态，那么这个 AJAX 请求就会带上受害者对https://vulnerable-website.com的 cookies。

4、由于 https://vulnerable-website.com 允许来自任何源的请求，服务器就会处理这个带有受害者 cookies 的请求，并返回相应的数据。

5、恶意网站 https://evil.com 收到了这个响应，并可以通过 JavaScript 代码来读取响应数据，从而获取了受害者在 https://vulnerable-website.com 上的敏感数据。