在 javascript 中实现接口请求结果脱敏，最稳健的做法是在 fetch 的响应拦截阶段，通过 .then() 链式调用或 async/await 语法对返回的 json 数据进行遍历和替换。具体做法是获取响应体后，解析为 json 对象，使用递归函数匹配敏感字段（如身份证、手机号），将其值替换为掩码字符串，最后返回处理后的新对象。这样做能确保下游业务逻辑拿到的是已脱敏的安全数据，且不影响原始网络请求流程。
如何编写通用的递归脱敏函数
编写通用脱敏函数的核心在于识别目标字段并执行替换逻辑。我们需要定义一个包含敏感键名列表的映射表，然后遍历输入对象的所有属性。对于数组元素，需要递归处理每个子项；对于普通对象，需深度遍历其属性。当遇到匹配的键名时，根据数据类型应用相应的脱敏规则，例如将手机号中间四位替换为星号。该函数应返回一个新的对象结构，避免修改原始引用，从而保证数据不可变性。
function maskSensitiveData(data, sensitiveKeys) {
if (data === null || data === undefined) return data;
// 如果是数组，递归处理每个元素
if (Array.isArray(data)) {
return data.map(item => maskSensitiveData(item, sensitiveKeys));
}
// 如果是对象，遍历其属性
if (typeof data === 'object') {
const maskedObj = {};
for (const key in data) {
if (Object.prototype.hasOwnProperty.call(data, key)) {
// 如果当前键是敏感字段，进行脱敏处理
if (sensitiveKeys.includes(key)) {
maskedObj[key] = applyMasking(data[key]);
} else {
// 否则递归处理子对象
maskedObj[key] = maskSensitiveData(data[key], sensitiveKeys);
}
}
}
return maskedObj;
}
// 基本类型直接返回
return data;
}
function applyMasking(value) {
if (typeof value !== 'string') return value;
// 简单示例：保留前两位和后两位，中间用*代替
if (value.length > 4) {
return value.substring(0, 2) + '****' + value.substring(value.length - 2);
}
return '****';
}
如何在 Fetch 响应中集成脱敏逻辑
将脱敏逻辑集成到 fetch 请求中的关键在于捕获响应流并在解析 JSON 之前或之后进行处理。最佳实践是在 .json() 方法返回 Promise 后，立即在其 .then() 回调中调用脱敏函数。这样可以在数据进入业务层之前完成清洗。需要注意的是，response.json() 会消耗响应体流，因此必须在读取流的同时或之后立即处理数据，不能重复读取。此外，为了保持代码整洁，可以将此逻辑封装为一个高阶函数或自定义的 fetch 包装器。
async function fetchWithMasking(url, options = {}) {
const sensitiveKeys = ['idCard', 'phone', 'email', 'password'];
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 解析 JSON
const rawData = await response.json();
// 应用脱敏
const maskedData = maskSensitiveData(rawData, sensitiveKeys);
return maskedData;
} catch (error) {
console.error('Fetch failed:', error);
throw error;
}
}
// 使用示例
fetchWithMasking('/api/user/profile').then(data => {
console.log(data); // 输出已脱敏的数据
});
如何处理嵌套深层对象中的敏感字段
当接口返回的数据结构非常复杂，包含多层嵌套的对象或数组时，简单的扁平化匹配可能失效。此时必须依赖深度优先搜索（DFS）策略的递归函数。在之前的 maskSensitiveData函数中，我们已经实现了这种递归逻辑：它会自动深入每一个子对象和数组元素，直到叶子节点。这意味着无论敏感字段位于第几层嵌套中，只要键名匹配，就会被正确脱敏。例如，如果用户信息嵌套在 user.profile.address 中，且 address 包含 phone 字段，递归过程会自然到达该层级并执行脱敏，无需手动指定路径。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
