详解JSON和JSONP劫持以及解决方法

下面是详解JSON和JSONP劫持及解决方法的攻略。

什么是JSON和JSONP

JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式,其格式简单明了,易于阅读和编写,同时也易于机器解析和生成。JSON是一种完全独立于编程语言的数据格式,它的性能优越,能够处理庞大的数据量。

JSON数据格式示例:

{
    "name": "张三",
    "age": 20,
    "address": {
        "city": "北京",
        "street": "长安街",
        "zipcode": "100000"
    },
    "hobby": ["看电影", "旅游"]
}

JSONP

JSONP (JSON with Padding) 是一种解决跨域的方案,在页面上加载一个 JS 文件,通过 Script 标签引用,该 JS 文件返回一个回调函数,回调函数的参数就是我们想要获取的数据,回调函数会在页面中自动执行。因为 Script 标签不会被同源策略限制,所以可返回任意数据。

JSONP示例:
假设我们需要从其他网站获取数据,并在自己的网站中显示。通过 JSONP 可以实现该功能。

假设有一个返回数据的 API,地址为 http://example.com/api.php。JSONP 请求的地址应该是 http://example.com/api.php?callback=showData,其中 callback 参数是约定好的回调参数,showData 是在前端定义好的回调函数名(可自定义),返回的数据应该以 showData({data}) 的形式返回。

前端代码示例:

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

JSONP劫持

过程:黑客在第三方系统上注入代码,在第三方返回 JSONP 数据时,篡改回调函数中的数据。

举例:假设键名为 "data",键值为 "12345" 的JSONP数据被获取到之后,黑客通过修改第三方系统上的注入代码使得回调函数中的数据被改为了键名 "data" 而键值被修改为 "54321"。当我们在前端通过回调函数调用data时,得到的数据就不是我们期望的“12345”,而是被篡改后的“54321”。

解决办法:避免使用约定好的callback参数作为请求参数,自定义callback名。同时,在前端通过正则表达式或其他方法判断返回数据是否符合JSON格式,不满足则不执行回调函数,避免执行黑客篡改后的代码。以下代码示例:

<script>
function myFunc(data) {
    if (/^[{\[]/.test(data)) { // 检查返回数据是否是符合JSON格式的数据,只有符合才执行回调函数
        console.log(data);
    }
}
</script>
<script src="http://example.com/api.php?callback=myFunc"></script>

JSON劫持

过程:黑客在第三方系统返回JSON格式数据时,篡改数据内容,达到攻击目的。

举例:假设第三方接口返回的数据为:

{
  "username": "test",
  "isVIP": false
}

黑客通过篡改第三方系统中的数据,将 "isVIP" 的值改为 true,攻击用户,并获得其VIP权益。

解决办法:加密校验,防篡改。对数据进行加密,在客户端解密校验,当数据被篡改时,校验失败,不能正常使用数据。

以下是加密解密代码示例:

// 对数据进行加密
function enCode(str) {
    return window.btoa(str); // 使用base64加密
}

// 对数据进行解密
function deCode(str) {
    return window.atob(str); // 解密base64字符串
}

// 简单的校验数据是否被篡改的方法
function checkData(data, code) {
    if (enCode(data) === code) { // 当加密后的校验值与传来的校验码一致,说明数据未被篡改
        console.log(data);
    }
}

参考文章:https://blog.csdn.net/huang_xw/article/details/69853721 和 https://cloud.tencent.com/developer/article/1186095

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解JSON和JSONP劫持以及解决方法 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • js获取当前页面路径示例讲解

    下面是“js获取当前页面路径示例讲解”的完整攻略。 什么是页面路径? Web页面的路径是指从Web服务器到Web文档的绝对或相对路径。绝对路径是从根目录开始的完整路径,如:http://www.example.com/index.html;而相对路径则是相对于当前文件所在的路径,如:./index.html。 如何在JS中获取当前页面路径? 获取当前页面路径…

    JavaScript 2023年6月11日
    00
  • JS遍历DOM文档树的方法实例详解

    下面是关于“JS遍历DOM文档树的方法实例详解”的完整攻略。 标题 JS遍历DOM文档树的方法实例详解 简介 在编写JavaScript代码时,遍历DOM文档树是非常常见的操作。例如,查找某个元素、对所有子元素进行操作等等。本文将介绍以下5个遍历DOM文档树的方法: getElementById getElementsByTagName getElement…

    JavaScript 2023年5月28日
    00
  • Javascript中Eval函数的使用

    当我们需要将某个字符串当做JavaScript代码来执行时,Eval函数就可以派上用场了。Eval函数的学习对于理解和书写高级JavaScript代码具有一定的帮助。 什么是 Eval 函数 Eval函数是JavaScript内置的一个全局函数,可以将指定的字符串解析为JavaScript代码并执行。通常我们会把一段需要执行的JavaScript代码以字符串…

    JavaScript 2023年5月28日
    00
  • 使用JS实现气泡跟随鼠标移动的动画效果

    使用JS实现气泡跟随鼠标移动的动画效果,可以分为以下几个步骤: 步骤1:HTML结构 首先,需要在HTML中创建一个容器元素,用于包含气泡,代码如下: <div id="container"></div> 步骤2:CSS样式 通过CSS对容器元素进行样式设置,如设置宽高、背景颜色和边框等,代码如下: #contai…

    JavaScript 2023年6月10日
    00
  • JS实现程序暂停与继续功能代码解读

    下面详细讲解“JS实现程序暂停与继续功能代码解读”的攻略。 程序暂停与继续功能的实现 在JavaScript中,程序暂停与继续功能可以通过使用setTimeout()、setInterval()和requestAnimationFrame()等函数来实现。 其中,setTimeout()函数用于在指定的时间间隔后执行一次任务,而setInterval()函数…

    JavaScript 2023年5月27日
    00
  • js注入 黑客之路必备!

    JS注入是Web安全领域中非常重要的一个议题,也是Web攻击中常用的一种手段。攻击者可以通过JS注入攻击网站或用户,包括窃取用户信息、篡改网页内容、控制用户会话等。 以下是一个简单的JS注入攻击示例: 攻击目标 我们以一个简单的登录页面(login.html)为目标页面,该页面通过使用jQuery库将用户名和密码传递给后台验证,并在验证失败时显示错误提示。页…

    JavaScript 2023年5月19日
    00
  • javascript Math.random()随机数函数

    下面是关于JavaScript中 Math.random() 随机数函数的详细讲解: 什么是Math.random()函数? Math.random() 是JavaScript的内置函数之一,用于生成一个伪随机数,范围在0到1之间(包含0但不包含1)。 在使用 Math.random()生成随机数时,我们经常会通过一些算法(比如乘以所需随机数范围,然后用 M…

    JavaScript 2023年5月27日
    00
  • JavaScript如何获取数组最大值和最小值

    获取数组最大值和最小值是JavaScript中常用的操作,本文将详细讲解如何使用JavaScript获取数组最大值和最小值。 1. 使用Math对象中的max()和min()方法 JavaScript中的Math对象包含了许多常用的数学方法,包括获取数组最大值和最小值的方法——max()和min()。以下是使用max()和min()方法的代码示例: cons…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部