2021-02-24

同源与跨域

浏览器同源策略

    域是什么以及同源定义

 

•         域是三元组: protocol://ip:port

            如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）

•         最初Netscape公司定义的A网页的Cookie,B网页不能打开

        跨域: 就是三元组任何一个元素不同就跨了

    同源目的

        同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介

        控制不同源之间的操作

 

    非同源限制读取限制的范围

 

•         Cookie, LocalStorage IndexDB
•         DOM无法获得
•         AJAX

 

解决跨域读取Cookie

 

•     二级域名不同

        同页面设置相同的域即可访Cookie
        同时设置相同的document.domain = 'example.com';

 

•     完全不同源

todo

解决iframe跨域(跨域DOM读取)

 

•     二级域名不同

        同时设置相同的document.domain = 'example.com';

•     完全不同源

 

•         片段识别符（fragment identifier）
•         window.name
•         跨文档通信API（Cross-document messaging）

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