同源与跨域
浏览器同源策略
域是什么以及同源定义
域是三元组: protocal://ip:port
> 如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）
最初Netscape公司定义的A网页的Cookie,B网页不能打开
跨域: 就是三元组任何一个元素不同就跨了
同源目的
同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介
控制不同源之间的操作
非同源限制读取限制的范围
Cookie, LocalStorage IndexDB
DOM无法获得
AJAX
允许跨源访问
使用CORS: 是HTTP的一部分
如何解决跨域读取Cookie
二级域名不同
同页面设置相同的域即可访Cookie
同时设置相同的document.domain = 'example.com';
完全不同源
?
解决iframe跨域(跨域DOM读取)
二级域名不同
同时设置相同的document.domain = 'example.com';
完全不同源
片段识别符（fragment identifier）
todo
window.name
todo
跨文档通信API（Cross-document messaging）
todo
AJAX跨域请求解决方案(XMLHttpRequest的跨域)
JSONP
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来
WebSocket
WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
CORS
CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求
代理
CROS(Cross-origin resource sharing，跨域资源共享)解决跨域
简单请求
在头信息之中，增加一个Origin字段
三元组:Origin: http://api.bob.com
通过这个来判断是否允许三元组请求
如果允许会返回Access-Control-Allow-Origin
Access-Control-Allow-Origin: http://api.bob.com
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名. 同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie
Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值
非简单请求
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）
当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错
"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源
除了Origin字段，"预检"请求的头信息包括两个特殊字段。
（1）Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
（2）Access-Control-Request-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header
（3）Access-Control-Allow-Credentials
该字段与简单请求时的含义相同。
（4）Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求
示例
简单地说下CORS请求会携带的头信息
//必要请求头，表示当前源，相应的预检响应需要返回Access-Control-Allow-Origin
1.Origin
//预检时会带上的头，表示真正请求的方法，相应的预检响应需要返回Access-Control-Allow-Method
2.Access-Control-Request-Method
//预检时会带上的头，表示真正请求会额外发送的头信息，相应的预检响应需要返回Access-Control-Allow-Headers
3.Access-Control-Request-Headers
需要服务器响应头中增加下面一种或几种
//*表示允许任意源的访问，也可以指定特定的源
1.Access-Control-Allow-Origin：*
//表示跨域访问时带上cookie，需同时在ajax请求中设置`withCredentials: true`，
2.Access-Control-Allow-Credentials: true
//预检请求后响应的必须字段，返回所有支持的方法，而不单是浏览器请求的那个方
//法。这是为了避免多次"预检"请求
3.Access-Control-Allow-Methods: GET, POST, PUT
//预检请求后响应的必须字段，放入预检请求时请求所带的头
4.Access-Control-Allow-Headers：Content-Type
//允许浏览器在指定时间内，无需再发送预检请求进行协商，直接用本次协商结果即可
5.Access-Control-Max-Age: 1728000
CORS请求分成两类
简单请求（simple request）
（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
非简单请求（not-so-simple request
其他
源的更改
可以通过document.domain = "company.com" 更改源
两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie
同源策略控制不同源之间的交互
跨域写操作（Cross-origin writes）: 一般是被允许, 例如链接(links),重定向,表单提交,特定少数HTTP请求需要prefilight(option)
跨域资源嵌入(Cross-origin embedding): 一般被允许
<script src="..."></script>
<link rel="stylesheet" href="...">
跨域读操作(Cross-roigin reads): 一般不允许,常通过内嵌资源巧妙进行读取
参考;
https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
https://www.jianshu.com/p/f4fc1ce49956
网友评论