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

yizhihongxing

下面是详解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日

相关文章

  • JavaScript如何判断对象有某属性

    当我们想在JavaScript中访问对象的某些属性时,首先需要判断该属性是否存在。下面是几种常见的判断对象是否有属性的方法: 1. hasOwnProperty()方法 hasOwnProperty()是JavaScript内置对象的一个方法,用来判断对象自身属性中是否有指定的属性名称。下面是一个使用hasOwnProperty()的例子: const ob…

    JavaScript 2023年5月27日
    00
  • javascript面向对象之定义成员方法实例分析

    JavaScript面向对象之定义成员方法实例分析 在JavaScript中,可以使用面向对象的思想来编写代码,其中定义成员方法是非常常见的操作。本文将详细讲解如何定义成员方法以及如何使用。 什么是成员方法 成员方法是一种在类或对象中定义的函数。它们可以访问类或对象的数据和其他方法,并能够执行特定的操作。 如何定义成员方法 在JavaScript中,可以通过…

    JavaScript 2023年5月27日
    00
  • 关于JavaScript中parseInt()的一个怪异行为解决

    关于JavaScript中parseInt()的一个怪异行为解决 在JavaScript中,parseInt()是一个常用的全局函数,用于将字符串转换为整数。但是在使用该函数时,有一些奇怪的行为需要注意。 parseInt()的奇怪行为 在解析数字字符串时,parseInt()函数除了将前导的零字符去掉之外,还会忽略其中的非数字字符。这意味着即使字符串中包含…

    JavaScript 2023年5月28日
    00
  • three.js镜头追踪的移动效果实例

    下面给出关于three.js镜头追踪的移动效果实例的完整攻略。 什么是three.js镜头追踪的移动效果? three.js是一个基于WebGL的3D图形库,我们可以利用它创建交互式的3D图形、音频、视频和动画。在three.js中,我们可以通过操纵相机对象实现对场景中物体的观察。镜头追踪的移动效果指的是让相机对象自动跟随物体移动,生成一种“物体静止,镜头随…

    JavaScript 2023年6月11日
    00
  • 基于BootStrap与jQuery.validate实现表单提交校验功能

    下面我将为您详细讲解如何基于BootStrap和jQuery.validate实现表单提交校验功能。 1. 引入必要的库和样式文件 在页面中引入BootStrap和jQuery库和样式文件,以及jQuery.validate插件,例如: <!– 引入BootStrap样式文件 –> <link rel="stylesheet&…

    JavaScript 2023年6月10日
    00
  • Ajax注册用户时实现表单验证

    下面是“Ajax注册用户时实现表单验证”的完整攻略。 一、什么是Ajax表单验证 Ajax(Asynchronous JavaScript And XML)即异步 JavaScript 和 XML,通俗来讲就是在不刷新页面、不跳转到其他页面的情况下,通过 JavaScript 发送异步请求获取数据,再动态更新页面内容。 在用户注册页面中,为了提高用户体验,我…

    JavaScript 2023年6月10日
    00
  • JS显示下拉列表框内全部元素的方法

    关于“JS显示下拉列表框内全部元素的方法”的完整攻略,我来给您讲解一下。 确定需求 要实现下拉列表框内全部元素的显示,我们需要先明确我们的需求,确定我们希望通过什么方式来实现这个功能。通常情况下,实现下拉列表框内全部元素的显示,我们可以采用以下两种方式: 将下拉列表框的size属性值设置为需要显示的元素个数; 通过JS获取下拉列表框中所有的选项元素,并动态为…

    JavaScript 2023年6月11日
    00
  • js获取当前时间(昨天、今天、明天)

    获取当前时间可以使用JavaScript内置对象Date来实现,可以获取当前时间的年份、月份、日期、小时、分钟、秒数、毫秒数等信息。下面是js获取当前时间(昨天、今天、明天)的完整攻略: 获取当前时间 使用new Date()方法创建Date对象,将当前时间赋值给它。 let now = new Date(); 获取昨天的时间 要获取昨天的时间,需要将当前时…

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