同源策略

同源策略(Same Origin Policy)是一种约定，它是浏览器最核心最基本的安全功能。所谓的同源是指域名、协议、端口相同。不同源的客户端脚本在没有明确授权的情况下不允许读写其他网站的资源。

同源的作用：

• 防止恶意网页可以获取其他网站的本地数据。
• 防止恶意网站iframe其他网站的时候，获取数据。
• 防止恶意网站在自已网站有访问其他网站的权利，以免通过cookie免登，拿到数据。

同源的限制：

• Cookie、LocalStorage 和 IndexDB 会话存储无法读取。
• DOM 无法获得。
• AJAX 请求不能发送。

跨域

跨域指浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。

注意：跨域并不是请求发不出去，服务端也能收到请求并正常返回结果，只是结果被浏览器拦截了。

跨域的解决方式

CORS

CORS 即跨域资源共享，当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，会发起一个跨域 HTTP 请求，它使用额外的 HTTP 头来告诉浏览器，让运行在一个 origin 上的 web 应用被准许访问来自不同源服务器上的指定的资源。

简单请求

1. 请求方法是以下三种方法之一：

• GET
• POST
• HEAD

2. HTTP 的头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain 若不满足以上条件，就属于非简单请求了。

非简单请求

非简单请求是指那种对服务器有特殊要求的请求，比如请求方式是 PUT 或 DELETE 等，或者 Content-Type 字段的类型是 application/json 等。

流程上，非简单请求 = 预检请求 + 简单请求。

预检请求：

• 请求方法是 OPTIONS ，表示这个请求是用来询问的。

• 请求字段：

  • Origin：表示请求来自哪个源。
  • Access-Control-Request-Mothod：必须。列出浏览器的 CORS 请求所有会用到的 HTTP 方法。
  • Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器 CORS 请求会额外发送的头信息字段。

判断是否同意预检请求：服务器收到浏览器的预检请求，检查了头信息的三个字段后，确认允许跨源请求，就可以做出回应。如果返回的头信息中有 Access-Control-Allow-Origin 这个字段就代表允许跨域请求；如果没有，就代表不同意这个预检请求，就会报错。

• 同意请求要回应的字段：

  • Access-Control-Allow-Origin: 允许跨域的源地址。只要服务器通过了预检请求，在以后每次的 CORS 请求都会自带一个 Origin 头信息字段，服务器的回应，也都会有一个 Access-Control-Allow-Origin 头信息字段。
  • Access-Control-Allow-Methods: 必需。它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。这是为了避免多次"预检"请求。
  • Access-Control-Allow-Headers: 如果浏览器请求包括 Access-Control-Request-Headers 字段，则该字段是必需的。服务器支持的所有头信息字段。
  • Access-Control-Allow-Credentials: 表示是否允许发送 Cookie 。
  • Access-Control-Max-Age: 可选。用来指定本次预检请求的有效期，单位为秒。

• 否定请求要回应的字段：返回一个正常的 HTTP 回应，但是没有任何 CORS 相关的头信息字段。这时，浏览器就会认定服务器不同意预检请求。

简单请求：

• 基本流程：浏览器直接发出 CORS 请求，会在头信息中增加一个 Origin 字段，表明本次请求来自哪个源（协议+域名+端口），浏览器根据这个字段的值来决定是否同意这次请求。

• 同意请求要回应的字段：

  • Access-Control-Allow-Origin：必须。它的值要么是请求时 Origin 字段的值，要么是一个 * ，表示接受任意域名的请求。

  • Access-Control-Allow-Credentials：可选。它的值是一个布尔值，表示是否允许发送 Cookie 。默认值为 false ；若设为 true ，即表示服务器明确许可 Cookie 可以包含在请求中。

  • Access-Control-Expose-Headers：可选。CORS 请求时，XMLHttpRequest 对象的 getResponseHeader() 方法只能拿到 6 个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 。如果想拿到其他字段，就必须在 Access-Control-Expose-Headers 里面指定。

  • Content-Type：响应给浏览器的资源的类型。

• 否定请求要回应的字段：返回一个正常的 HTTP 回应，浏览器发现回应里没有 Access-Control-Allow-Origin 字段，就知道出错了，从而抛出一个错误。

转自foursheep
还有阮大