jsonp全方位解析

同源策略

• 瀏覽器的一種安全策略，所謂同源，指的是域名、協議、端口號徹底相同
• 限制：cookie、localStorage和IndexDB沒法讀取；沒法操做跨域的iframe裏的dom元素；Ajax請求不能發送

jsonp原理

• 本質是利用了標籤(link,img,script,這裏使用script)具備可跨域的特性，由服務端返回預先定義好的javascript函數的調用，而且將服務端數據以該函數參數的形式傳遞過來
• 前端javascript代碼

<script>
    function fuc(data){
        console.log(data.name);
    }
</script>
<script src="http://www.baidu.com/api.php?callback=fuc"></script>

• 後端php代碼

<?php
    $cb = $_GET['callback'];
    $data = array(
                'name'=> 'zs',
                'age'=>18,
                'gender'=>true
            );
    echo $cb.'('.json_encode($data).')';
?>

jsonp優勢

• 完美解決在測試或者開發中獲取不一樣域下的數據,用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了

jsonp缺點

• jsonp只支持get請求而不支持post請求
• 用session來判斷當前用戶的登陸狀態，跨域時會出現問題
• jsonp存在安全性問題

特別注意

1. 防止callback參數意外截斷js代碼,特殊字符單引號雙引號,換行符存在風險
2. 防止callback參數惡意添加script標籤,形成xss漏洞
3. 防止跨域請求濫用,阻止非法站點惡意調用

參考資料

• jsonp的原理,應用場景,優缺點
• 深刻理解jsonp跨域請求原理
• jsonp 實現原理及代碼解析

你們好，我是小磊哥er！