ajax跨域jsonp使用以及安全性

使用jsonp跨域:
jsonp原理：通过创建一个 script 标签，将 src 设置为目标请求，插入到 dom 中，服务器接受该请求并返回数据，数据通常被包裹在回调钩子中
jsonp不支持POST方式;

//客户端
$.ajax({
            // url:'http://wenjunlin.xyz/api/v2/index',
            url:'http://bisheapi.cn/api/v2/index',
            type:'post',
            data:{
                'id':4,
                't':'wen'
            },
            dataType:'jsonp',
            jsonp: "jsonpcallback", //服务端用于接收callback调用的function名的参数
            crossDomain:true,
            success:function (data) {
                // data = JSON.parse(data);
                console.log(data)
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                // console.log(code);
                console.log('XMLHttpRequest.status: '+ XMLHttpRequest.status);
                console.log('XMLHttpRequest.readyState: '+ XMLHttpRequest.readyState);
                console.log('textStatus: '+ textStatus);
                console.log('errorThrown: '+errorThrown);
            }
        });

php服务端:

public function index(){
    $id = 1;
    $t = 't';

    $id = $_GET['id'];
    $t = $_GET['t'];
    $jsonp = $_GET['jsonpcallback'];//get接收jsonp自动生成的函数名

    $arr = array(
        'id' => $id,
        't' => $t
    );
    echo $jsonp.'('. json_encode($arr). ')'; //jsonp函数名包裹json数据
}

使用ajax也是可以进行跨域的，只不过需要在跨域的服务端设置一下Access-Control-Allow-Origin

//客户端
$.ajax({
            url:'http://bisheapi.cn/api/v2/indexshow',
            type:'get',
            data:{
                'id':4,
                't':'wen'
            },
            dataType:'json',
            success:function (data) {
                console.log(data)
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                console.log('XMLHttpRequest.status: '+ XMLHttpRequest.status);
                console.log('XMLHttpRequest.readyState: '+ XMLHttpRequest.readyState);
                console.log('textStatus: '+ textStatus);
                console.log('errorThrown: '+errorThrown);
            }
        });

服务端代码：

 public function show(){
        header("Access-Control-Allow-Origin: *");
        $id = 1;
        $t = 't';

        $arr = array(
            'id' => $id,
            't' => $t
        );
        echo json_encode($arr);
    }

与jsonp不一样，该方式可以使用get,post等方式访问。

jsonp安全性研究：https://blog.youkuaiyun.com/jian_xi/article/details/66474717

防止xss攻击案例如下：
客户端代码

$.ajax({
            // url:'http://wenjunlin.xyz/api/v2/index',
            url:'http://bisheapi.cn/api/v2/index',
            type:'post',
            data:{
                'id':4,
                't':'wen'
            },
            dataType:'jsonp',
            jsonp: "jsonpcallback", //服务端用于接收callback调用的function名的参数
            jsonpCallback:'alert(123)',//xss攻击
            crossDomain:true,
            success:function (data) {
                // data = JSON.parse(data);
                console.log(data)
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                // console.log(code);
                console.log('XMLHttpRequest.status: '+ XMLHttpRequest.status);
                console.log('XMLHttpRequest.readyState: '+ XMLHttpRequest.readyState);
                console.log('textStatus: '+ textStatus);
                console.log('errorThrown: '+errorThrown);
            }
        });

后台处理:

        $id = $_GET['id'];
        $t = $_GET['t'];
//        $callback = $_GET['jsonpcallback'];//get接收jsonp自动生成的函数名
        //更安全
        $callback = urlencode($_GET['jsonpcallback']);

        $arr = array(
            'id' => $id,
            't' => $t,
            'str' => "window[decodeURIComponent('{$callback}')]"
        );
//        echo $jsonp.'('. json_encode($arr). ')'; //jsonp函数名包裹json数据
        echo "window[decodeURIComponent('{$callback}')](".json_encode($arr).");";