详解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日

相关文章

  • 前端程序员必须知道的高性能Javascript知识

    让我来介绍一下“前端程序员必须知道的高性能Javascript知识”的攻略。 什么是高性能Javascript 高性能Javascript指的是在运行Javascript代码时保持最佳性能的技巧和最佳实践。这些技巧和实践可帮助你在编写Javascript应用程序时提高性能,从而更快地加载和执行代码。 JS性能优化的原则 以下是我们在编写Javascript时…

    JavaScript 2023年5月27日
    00
  • js验证email的正则

    JS验证 Email 的正则表达式是一项很重要的前端技能,本篇攻略旨在帮助想要掌握这项技能的读者们进行学习。 1. 什么是正则表达式 正则表达式是一种特殊的文本字符串,用于在文本中查找、替换和匹配符合某些特定规则的字符串。利用正则表达式可以简化很多复杂的字符串操作,使代码更加简洁高效。 2. 邮箱正则表达式规则 验证Email的正则表达式需要遵循RFC 53…

    JavaScript 2023年6月10日
    00
  • js按指定格式显示日期时间的样式代码

    下面我将详细讲解如何用 JavaScript 按指定的格式显示日期时间样式的代码攻略。 1. 获取当前的日期和时间 在编写代码显示日期和时间之前,我们需要先获取当前的日期和时间信息。这个过程可以通过 JavaScript 的内置对象 Date 来实现,如下所示: var now = new Date(); 这里定义了一个名为 now 的变量,并通过 new …

    JavaScript 2023年5月27日
    00
  • JavaScript通过RegExp使用正则表达式过程详解

    JavaScript通过RegExp使用正则表达式过程详解 在JavaScript中,正则表达式是一种非常强大的工具,可以用来匹配和操作字符串。在本篇文章中,我们将详细讲解JavaScript通过RegExp使用正则表达式的过程。 创建正则表达式 在JavaScript中,可以使用RegExp对象来创建正则表达式。有两种方式来创建正则表达式:使用字面量,或者…

    JavaScript 2023年6月10日
    00
  • JavaScript生成随机数的4种自定义函数分享

    JavaScript生成随机数的4种自定义函数分享 本文将介绍4种利用JavaScript生成随机数的自定义函数,包括生成n位随机字符串、生成指定范围的整数、生成指定范围的小数、生成可以重复的随机数组。下面将分别进行介绍。 生成n位随机字符串 function randomString(len) { len = len || 32; var $chars =…

    JavaScript 2023年5月27日
    00
  • JavaScript入门教程(3) js面向对象

    这篇“JavaScript入门教程(3) js面向对象”教程,主要介绍了 JavaScript 的面向对象编程的基本概念和使用方法。在学习中,需要掌握以下几个方面的知识: 对象和属性:在 JavaScript 中,每个对象都由一组属性构成。属性可以是 JavaScript 原始类型的值,例如字符串、数字和布尔值。也可以是对象或函数,这些对象是用来描述一些相关…

    JavaScript 2023年5月18日
    00
  • 记录-实现深拷贝的四种方式

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 概念介绍 深拷贝:在堆内存中重新开辟一个存储空间,完全克隆一个一模一样的对象 浅拷贝:不在堆内存中重新开辟空间,只复制栈内存中的引用地址。本质上两个对象(数组)依然指向同一块存储空间 第一种:递归方式(推荐,项目中最安全最常用) 使用递归的方式进行对象(数组)的深拷贝 奉上已封装的深拷贝函数? /…

    JavaScript 2023年4月22日
    00
  • 深入理解JS中attribute和property的区别

    当我们在使用JavaScript处理HTML时,常常涉及到元素的属性(Attribute)和属性值(property)。在一些情况下,这两者的方式使用会存在一些细微的区别。下面,我将为您详细讲解“深入理解JS中attribute和property的区别”的完整攻略。 Attribute和Property的定义 首先,我们需要明确attribute和prope…

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