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

2022-11-10 311

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

.cn 域名，1个 12个月

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

同源策略

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

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

跨域访问

通常允许跨域写操作(Cross-origin writes)

链接(links)
重定向(Redirect)
表单提交

通常允许跨域资源嵌入(Cross-origin embedding)
通常不允许跨域读操作(Cross-origin reads)

跨域资源嵌入

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

<img> 、<video> 、 <audio> 嵌入多媒体资源。

@font-face 引入的字体。一些浏览器允许跨域字体( cross-origin fonts)，一些需要同源字体(same-origin fonts)。

<frame> 和 <iframe> 载入的任何资源。站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。可能引发点击劫持：网络安全-点击劫持（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'])，显示结果。

结果

JSONP安全问题

攻击场景：

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

结合CSRF：知道创宇-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教程

web安全笔记-同源策略

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

喜欢本文的请动动小手点个赞，收藏一下，有问题请下方评论，转载请注明出处，并附有原文链接，谢谢！如有侵权，请及时联系。