挑戰常規--爲何不該該使用Jsonp進行跨域

常規跨域的方法

常見跨域的方法有:

1. 添加Access-Control-Allow-Origin
2. 後臺服務器代理
3. Jsonp

一、2兩種方法都是安全可靠的,3是不安全不可靠的

Json的本質

Json本質是引用並執行外部JavaScript腳本,原理是<scrpit>標籤不受域名的限制,經過動態建立<scrpit>來執行js函數

Jsonp的使用

jQuery執行Jsonp使用

$.ajax(url,{
        dataType:"jsonp",
        error:function(jqXHR,textStatus,errorThrown)
        {
            //TODO
        },
        success:function(data)
        {
            //TODO
        }
    });

jQuery3.3.1加載執行外部js

function DOMEval( code, doc, node ) {
    doc = doc || document;

    var i,
        script = doc.createElement( "script" );

    script.text = code;
    if ( node ) {
        for ( i in preservedScriptAttributes ) {
            if ( node[ i ] ) {
                script[ i ] = node[ i ];
            }
        }
    }
    doc.head.appendChild( script ).parentNode.removeChild( script );
}

不安全

用戶輸入不可信,外部腳本一樣不可信。若A網站引用了B網站的跨域腳本,那麼A網站的安全受B網站牽制。

安全狀況下,safeapi.php

<?php
date_default_timezone_set('asia/shanghai');
$result=json_encode(array("msg"=>"你好,當前時間:".date("Y-m-d H:i:s e")));
if(isset($_REQUEST['callback']))
{
    header("Content-Type:text/javascript;charset=utf-8"); 
    echo $_REQUEST['callback']."(".$result.")";
}else
{
    header("Content-Type:application/json;charset=utf-8");
    echo $result;
}

B網站受到攻擊或惡意代碼,danger.php

<?php
header("Content-Type:text/javascript;charset=utf-8"); 
if(isset($_REQUEST['callback']))
{ 
    echo $_REQUEST['callback']."("; 
}else
{
    echo "_(";  
}
echo json_encode(array("msg"=>"你好,當前時間:".date("Y-m-d H:i:s")));
echo ");console.log('do something');";

在A網站下控制檯輸出 do something

思考

應該對網站安全進行隔離，不該輕易相信外部腳本,不然很容易形成帳號泄漏等安全風險。若是的確須要引用執行外部腳本,能夠使用CSP 策略指令進行白名單控制,如:

Content-Security-Policy: default-src 'self' trustedscripts.foo.com