浅谈 JSONP

栏目: Json · 发布时间: 7年前

内容简介:全称 JSON with Padding,用于解决AJAX跨域问题的一种方案。由于同源策略的限制,浏览器只允许XmlHttpRequest请求当前源(域名、协议、端口)的资源,而对请求script资源没有限制。通过请求script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,这种跨域的数据的方式被称为JSONP。

JSONP

全称 JSON with Padding,用于解决AJAX跨域问题的一种方案。

由于同源策略的限制,浏览器只允许XmlHttpRequest请求当前源(域名、协议、端口)的资源,而对请求script资源没有限制。通过请求script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,这种跨域的数据的方式被称为JSONP。

浅谈 JSONP

<script>
    var request = new XMLHttpRequest();

    request.onreadystatechange = function(){
        if (request.readyState === 4){
            if(request.status === 200){
                alert('success!');
            }
        }
    }
    request.open('GET','http://xxx.xxx.xx/json.txt');
    request.send();
    </script>

浅谈 JSONP 浅谈 JSONP 服务端json.php

<?php
header('Content-type: application/json');

$jsoncallback = htmlspecialchars($_REQUEST['jsoncallback']);

$json_data = array(
            "username" => "test",
            "password" => "123456",
            "userimage" => "http://xxx.com/smi1e.jpg"
        );

echo $jsoncallback.'('.json_encode($json_data).')';

index.html

<!DOCTYPE html>
<html>
<head>
    <title>test_jsonp</title>
</head>
<script type="text/javascript">
    function refresh(data){
        var p = document.getElementById('test-jsonp');
        p.innerHTML = '测试:'+'</br>'+
        data.username+'</br>'+
        data.pssword+'</br>'+
        data.userimage+'</br>';
    }

    function gettxt(){
        var 
            js = document.createElement('script'),
            head = document.getElementsByTagName('head')[0];
        js.src='http://xxx.xxx.xxx/json.php?jsoncallback=refresh';
        head.appendChild(js);
    }

</script>
<body>
<p>hello,friend</p>
<p id='test-jsonp'>测试:</p>
<p><button type="button" onclick="gettxt()">刷新</button></p>
</body>
</html>

浅谈 JSONP

浅谈 JSONP

浅谈 JSONP

jsonp跨域漏洞

JSONP劫持

callback无过滤导致的xss

bypass可以参考: JSONP 安全攻防技术

防御

1、严格安全的实现 CSRF 方式调用 JSON 文件:限制 Referer 、部署一次性 Token 等。

2、严格安装 JSON 格式标准输出 Content-Type 及编码( Content-Type : application/json; charset=utf-8 )。

3、严格过滤 callback 函数名及 JSON 里数据的输出。

4、严格限制对 JSONP 输出 callback 函数名的长度。

Referer

https://juejin.im/entry/59a5a194f265da24734447f2

https://segmentfault.com/a/1190000007935557


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

马云现象的经济学分析:互联网经济的八个关键命题

马云现象的经济学分析:互联网经济的八个关键命题

胡晓鹏 / 上海社会科学院出版社 / 2016-11-1 / CNY 68.00

互联网经济的产生、发展与扩张,在冲击传统经济理论观点的同时,也彰显了自身理论体系的独特内核,并与那种立足于工业经济时代的经典理论发生显著分野。今天看来,“马云”们的成功是中国经济长期“重制造、轻服务,重产能、轻消费,重国有、轻民营”发展逻辑的结果。但互联网经济的发展却不应仅仅止步于商业技巧的翻新,还需要在理论上进行一番审慎的思考。对此,我们不禁要问:互联网经济驱动交易发生的机理是什么?用户基数和诚......一起来看看 《马云现象的经济学分析:互联网经济的八个关键命题》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具