JavaScript 中 JSON 怎么在前端安全过滤中剔除不合规的 JSON 键值对

浅明大大_4998

浅明大大_4998

2026-08-26

172人浏览

原创

应先json.parse()再白名单校验:定义schema明确字段名、类型及取值范围,遍历schema提取合法属性,同时拦截__proto__等危险键名,前端过滤仅为辅助,后端严格校验才是关键。

javascript 中 json 怎么在前端安全过滤中剔除不合规的 json 键值对

直接用 JSON.parse() 解析不可信的 JSON 字符串存在风险,但“过滤不合规的键值对”不是 JSON 解析层的责任——JSON 本身是纯数据格式,没有“合规性”概念。真正要做的,是在解析后对 JavaScript 对象进行**白名单校验与结构清洗**,而非在 JSON 字符串层面“剔除键值对”。

明确校验目标:只保留预期字段和类型

安全过滤的核心是“最小权限原则”:只接受你明确需要的字段名、允许的值类型(如字符串、数字)、以及可接受的取值范围(如 status 只能是 "active" 或 "inactive")。

  • 不要尝试用正则去删 JSON 字符串里的字段(易出错、破坏结构、绕过校验)
  • 先 JSON.parse() 得到对象,再基于预设 schema 过滤属性
  • 对每个字段做类型检查 + 内容检查(如长度、正则匹配、枚举值)

使用白名单对象结构做安全提取

定义一个只含合法键名的白名单对象,遍历它来构建干净结果,自动忽略所有未知字段:

Browser Js
Browser Js

轻量级CDP浏览器控制,适用于AI代理。相较于内置浏览器工具,token消耗降低3‑10倍,仅在浏览时使用。

下载
function safeParseJSON(jsonStr, schema = {}) {
  try {
    const raw = JSON.parse(jsonStr);
    if (typeof raw !== 'object' || raw === null) return {};

    const clean = {};
    Object.keys(schema).forEach(key => {
      if (key in raw) {
        const value = raw[key];
        const type = schema[key].type;
        const validator = schema[key].validate;

        // 类型检查
        if (typeof value !== type && !(type === 'number' && typeof value === 'string' && !isNaN(value))) {
          return;
        }

        // 自定义校验(如邮箱、长度、枚举)
        if (validator && !validator(value)) return;

        clean[key] = value;
      }
    });
    return clean;
  } catch (e) {
    return {}; // 解析失败,返回空对象或抛出自定义错误
  }
}

// 示例调用
const userSchema = {
  name: { type: 'string', validate: v => v.length  Number.isInteger(v) && v >= 0 && v  ['admin', 'user', 'guest'].includes(v) }
};

const unsafeInput = '{"name":"Alice","age":"30","role":"admin","__proto__":"hack","token":"abc123"}';
const safeUser = safeParseJSON(unsafeInput, userSchema);
// → { name: "Alice", age: 30, role: "admin" }(其他字段被自动忽略)

防范原型污染等高危字段

某些键名(如 "__proto__"、"constructor"、"prototype")在旧版 JS 或不当赋值时可能引发原型污染。即使你不用 Object.assign() 或展开运算符直接合并,也应在 schema 校验前做基础黑名单拦截:

  • 解析后立即检查对象是否含有危险键名,有则删除
  • 推荐用 Object.getOwnPropertyNames() 而非 for...in,避免继承属性干扰
  • 若使用第三方库(如 Lodash),确保版本 ≥4.17.21,已修复相关漏洞

进阶建议:配合 Content-Security-Policy 与后端协同

前端过滤只是最后一道防线:

  • 后端必须做严格校验并返回精简数据,前端不应承担主要过滤责任
  • 通过 CSP 头限制内联脚本和 eval,降低恶意 JSON 触发 XSS 的可能性
  • 对用户可控的 JSON 输入(如配置编辑器),优先使用表单控件而非自由 JSON 文本框

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2323

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5003

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6090

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5618

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

803

5

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4606

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1149

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4524

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

900

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习