JavaScript代码解析JSON数据：网页安全中的实用技巧

上网时，很多网站的ref="/tag/426/" style="color:#479099;font-weight:bold;">数据都是通过JSON格式传输的。比如你刷一个购物网站，商品列表往往不是直接写在页面里，而是后台返回一段JSON数据，前端用JavaScript去读取并显示出来。这个过程其实就是JavaScript解析JSON数据。

JSON是什么？

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，长得像JavaScript里的对象。例如：

{"name": "小李", "age": 25, "city": "北京"}

这种结构清晰、易读又容易被程序处理，所以现在绝大多数接口都用它传数据。

怎么用JavaScript解析JSON？

如果从服务器拿到的是字符串形式的JSON，必须先“解析”成JavaScript能操作的对象。核心方法是 JSON.parse()。

const jsonString = '{"username": "test123", "level": 5, "active": true}';
const userData = JSON.parse(jsonString);

console.log(userData.username); // 输出: test123
console.log(userData.level);    // 输出: 5

这样就能把一串文本变成可调用属性的对象了。

常见坑点：错误格式导致解析失败

如果JSON字符串格式不对，JSON.parse() 会直接报错，导致页面卡住甚至被恶意利用。比如攻击者故意传入非法数据，可能触发异常。

稳妥的做法是加上 try-catch：

let data;
try {
    data = JSON.parse(response);
} catch (e) {
    console.error('JSON解析失败:', e);
    data = {};
}

这样即使数据出问题，也不会让整个脚本崩溃。

实际场景：防范伪造数据攻击

有些钓鱼网站会模仿正规平台加载用户信息，假装是你登录后的状态。它们可能伪造一段JSON数据，诱导你的浏览器执行危险操作。

正确的做法是在解析后验证关键字段：

if (userData && typeof userData.username === 'string' && userData.level > 0) {
    showUserProfile(userData);
} else {
    alert('数据异常，疑似非法来源！');
}

别小看这几行检查，关键时刻能挡住不少伪装请求。

反过来：生成安全的JSON发送给服务器

除了解析，我们也会把数据发回服务器。这时候要用 JSON.stringify() 把对象转成标准JSON字符串。

const userInfo = { name: '张三', age: 30 };
const postData = JSON.stringify(userInfo);
// 然后通过 fetch 发送
fetch('/api/update', {
    method: 'POST',
    body: postData,
    headers: { 'Content-Type': 'application/json' }
});

注意不要手动拼接字符串发数据，容易被注入恶意内容。

现在很多网页功能都依赖JSON通信，掌握好解析和封装的过程，不仅能写出更稳定的代码，还能提升安全性。尤其在处理用户登录、支付信息这类敏感环节时，每一步都要稳。