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