同源策略与跨域访问（jsonp和cors等）

冷不防 2022-11-03 11:28 176阅读 0赞

**目录**

同源策略

跨域访问

跨域资源嵌入

跨源脚本API访问

JSONP

实例

JSONP安全问题

CORS

简单模型

协商模型/预检请求

CORS的安全问题

WebSocket

参考

--------------------

# 同源策略 #

同源策略（Same Origin Policy，简称SOP）由 Netscape 公司 1995 年引入浏览器，是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策略，限制了来自不同源的“document”或脚本，对当前的“document”读取或设置某些属性。

浏览器将不同的**根域名、子域名、端口、协议**认为是不同的域。由于浏览器安全限制，数据是不可以直接跨域请求的，除非目标域名授权你可以访问。

# 跨域访问 #

*  通常允许跨域写操作(Cross-origin writes)
    
     *  链接(links)
     *  重定向(Redirect)
     *  表单提交
 *  通常允许跨域资源嵌入(Cross-origin embedding)
 *  通常不允许跨域读操作(Cross-origin reads)

## 跨域资源嵌入 ##

可能嵌入跨域资源的一些示例：

*  `<script src="..."></script>` 标签嵌入跨域脚本。src可以认为是浏览器发起跨域请求获得，语法错误信息只能在同源脚本中捕捉到。
 *  `<link rel="stylesheet" href="...">` 标签嵌入CSS。href可以认为是浏览器发起跨域请求获得，由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的Content-Type 消息头。
 *  `<img>` 、`<video>` 、 `<audio>` 嵌入多媒体资源。
 *  `<object>` 、`<embed>` 和 `<applet>` 的插件。
 *  `@font-face` 引入的字体。一些浏览器允许跨域字体( cross-origin fonts)，一些需要同源字体(same-origin fonts)。
 *  `<frame>` 和 `<iframe>` 载入的任何资源。站点可以使用**X-Frame-Options**消息头来阻止这种形式的跨域交互。 可能引发点击劫持：[网络安全-点击劫持（ClickJacking）的原理、攻击及防御][-_ClickJacking]

## 跨源脚本API访问 ##

Javascript的APIs中，如 `iframe.contentWindow` , `window.parent`, `window.open` 和 `window.opener` 允许文档间相互引用。当两个文档的源不同时，这些引用方式将对 `window` 和 `location` 对象的访问添加限制。

`window` 允许跨源访问的方法有

*  window.blur
 *  window.close
 *  window.focus
 *  window.postMessage

`window` 允许跨源访问的属性有

*  window.closed
 *  window.frames
 *  window.length
 *  window.location
 *  window.opener
 *  window.parent
 *  window.self
 *  window.top
 *  window.window

其中 `window.location` 允许读/写，其他的属性只允许读

## JSONP ##

jsonp是使用**方法回调**的原理。在网页里，你如果引入其他网页的js，那这个页面的js是可以调用你网页的代码的。JSONP实现跨域请求的原理简单的说，就是**动态创建<script>标签**，然后利用<script>的**src**不受同源策略约束来跨域获取数据。获取到的跨域数据传入callback参数指定的回调函数中进行处理。

### 实例 ###

**服务端**

jsonp.php

<?php
    header('Content-type: application/json');
    //获取回调函数名
    $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
    //json数据
    $json_data = '["lady","killer9"]';
    //输出jsonp格式的数据
    echo $jsoncallback . "(" . $json_data . ")";
    ?>

获取函数名，返回jsonp格式数据

**客户端**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    </head>
    <body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
    function callbackFunction(result)
    {
        var html = '<ul>';
        for(var i = 0; i < result.length; i++)
        {
            html += '<li>' + result[i] + '</li>';
        }
        html += '</ul>';
        document.getElementById('divCustomers').innerHTML = html;
    }
    </script>
    <script type="text/javascript" src="http://localhost/jsonp.php?jsoncallback=callbackFunction"></script>
    </body>
    </html>

客户端声明函数， 将函数名传过去。服务端返回数据，客户端运行js代码 callback(\['lady','killer9'\])，显示结果。

**结果**

![20210308101246905.PNG][]

### JSONP安全问题 ###

攻击场景：

*  当对传入/传回参数没有做校验就直接执行返回的时候，会造成XSS问题。
 *  没有做Referer或Token校验就给出数据的时候，可能会造成数据泄露。
 *  在没有设置callback函数的白名单情况下，可以合法的做一些设计之外的函数调用，引入问题。这种攻击也被称为SOME攻击。

结合CSRF：[知道创宇-jsonp劫持分析][-jsonp]

防御：

*  检测referer
 *  使用token让攻击者对接口未知
 *  使用CORS代替jsonp

## CORS ##

CORS(Cross-Origin Resource Sharing，跨域资源共享）是一种允许当前域（domain）的资源（html/js/web service）被其他域（domain）的脚本请求访问的机制，是一个**W3C标准**，通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求。

### 简单模型 ###

下列请求为简单模型：

*  HEAD
 *  GET
 *  POST

post数据格式有限制，只支持‘text/plain','application/x-www-urlencoded'and'multipart/form-data'

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个`Origin`字段。如果`Origin`指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

**（1）Access-Control-Allow-Origin**

该字段是**必须的**。它的值要么是请求时`Origin`字段的值，要么是一个`*`，表示接受任意域名的请求。

**（2）Access-Control-Allow-Credentials**

该字段**可选的**。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为`true`，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为`true`，如果服务器不要浏览器发送Cookie，删除该字段即可。

**（3）Access-Control-Expose-Headers**

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

### 协商模型/预检请求 ###

`请求方法为PUT或Content-Type`字段的类型是`application/json`。

除了`Origin`字段，"预检"请求的头信息包括两个特殊字段。

**（1）Access-Control-Request-Method**

该字段是**必须的**，用来列出浏览器的CORS请求会用到哪些HTTP方法。

**（2）Access-Control-Request-Headers**

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段。

**响应**

除了Access-Control-Allow-Credentials，还有：

**（1）Access-Control-Allow-Headers**

表明它允许跨域请求包含content-type头

**（2）Access-Control-Allow-Methods**

表明它允许的外域请求。

**（3）Access-Control-Max-Age**

该字段**可选**，用来指定本次预检请求的有效期，单位为秒。例如，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个`Origin`头信息字段。服务器的回应，也都会有一个`Access-Control-Allow-Origin`头信息字段。

### CORS的安全问题 ###

目前解决跨域的标准方案 Access-Control-Allow-Origin和Access-Control-Allow-Credentials配置不当会导致信息泄露

简单请求, GET, POST, HEAD (content-type: x-www-form-urlencoded, multipart/form-data、text/plain)

分为简单请求(simple request)和非简单请求(not-so-simple request)简单请求，就是在头信息之中，增加一个Origin字段说明此跨域请求来自哪个域，如果请求的服务器返回Access-Control-Allow-Origin满足该域则可返回资源

其实还有其他的限制origin的东西

CORS与JSONP的使用目的相同，但是比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

# WebSocket #

利用websocket来实现通信，因为websocket协议没有同源策略的限制。

# 参考 #

[JSONP教程][JSONP]

[web安全笔记-同源策略][web_-]

更多内容查看：[网络安全-自学笔记][-]

喜欢本文的请动动小手点个赞，收藏一下，有问题请下方评论，转载请注明出处，并附有原文链接，谢谢！如有侵权，请及时联系。如果您感觉有所收获，自愿打赏，可选择支付宝18833895206（小于），您的支持是我不断更新的动力。

[-_ClickJacking]: https://blog.csdn.net/lady_killer9/article/details/108017437
[20210308101246905.PNG]: /images/20221024/40eec79145344860999bd5dab42dafa3.png
[-jsonp]: http://blog.knownsec.com/2015/03/jsonp_security_technic/
[JSONP]: https://www.runoob.com/json/json-jsonp.html
[web_-]: https://websec.readthedocs.io/zh/latest/vuln/xss/sop.html#id3
[-]: https://blog.csdn.net/lady_killer9/article/details/106791542