javascript fetch api 实现请求数据预脱敏的核心做法是在发起请求前，通过拦截器或封装函数对请求体（request body）中的敏感字段进行替换或掩码处理。具体而言，你可以定义一个包含脱敏逻辑的辅助函数，在调用 fetch 之前遍历并修改待发送的数据对象，或者使用 request 构造函数结合自定义初始化参数来构建请求。这样做可以确保在数据离开客户端之前，身份证号、手机号等隐私信息已被转换为星号或其他安全格式，从而降低传输过程中的泄露风险。
如何拦截并修改 POST 请求体中的敏感字段？
要拦截并修改 POST 请求体，最直接的方法是在构造 fetch 调用时，先对数据进行深拷贝和清洗，再传入请求配置。我们可以编写一个通用的 sanitizeData 函数，它接收原始数据对象和需要脱敏的字段列表，返回处理后的新对象。这种方法适用于大多数 JSON 格式的 POST 请求，能够精确控制哪些字段需要被隐藏。
const sensitiveFields = ['idCard', 'phone'];
function sanitizeData(data, fields) {
const sanitized = { ...data };
fields.forEach(field => {
if (sanitized[field]) {
// 简单脱敏：保留前两位和后两位，中间用*代替
const val = String(sanitized[field]);
if (val.length > 4) {
sanitized[field] = val.slice(0, 2) + '*'.repeat(val.length - 4) + val.slice(-2);
} else {
sanitized[field] = '***';
}
}
});
return sanitized;
}
async function submitUser(user) {
const cleanUser = sanitizeData(user, sensitiveFields);
console.log('Sending:', cleanUser); // 仅用于调试，实际不打印
try {
const response = await fetch('/api/user/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(cleanUser)
});
const result = await response.json();
console.log('Server Response:', result);
} catch (error) {
console.error('Fetch failed:', error);
}
}
// 测试输入
const userData = { name: 'Alice', idCard: '110101199001011234', phone: '13800138000' };
submitUser(userData);
如何在 GET 请求的 URL 查询参数中脱敏 ID？
对于 GET 请求，数据通常位于 URL 的查询参数中。由于 URL 字符串不可直接修改属性，我们需要解析 URL，修改参数值，然后重新序列化。可以使用 URLSearchParams 来处理查询字符串，它在内存中是可变的。我们可以在构建 URL 后，提取参数，对特定键（如 userId）应用脱敏规则，再拼接回 URL。这确保了即使日志记录了请求 URL，敏感 ID 也不会以明文形式暴露。
立即学习“Java免费学习笔记（深入）”；
function getSensitiveData(userId) {
const baseUrl = 'https://api.example.com/data';
const params = new URLSearchParams({ userId: userId, type: 'public' });
// 对 userId 进行脱敏处理
const rawId = userId;
const maskedId = rawId.length > 6 ? rawId.slice(0, 3) + '***' + rawId.slice(-3) : '***';
params.set('userId', maskedId);
const finalUrl = `${baseUrl}?${params.toString()}`;
console.log('Fetching URL:', finalUrl); // 显示脱敏后的 URL
return fetch(finalUrl)
.then(res => res.json())
.then(data => {
console.log('Received data:', data);
return data;
})
.catch(err => console.error('Error:', err));
}
// 测试输入
getSensitiveData('USR-123456789');
如果原始数据中包含嵌套的敏感对象，如何处理？
当数据结构复杂，敏感字段嵌套在深层对象中时，简单的浅拷贝无法触及内部字段。此时需要使用递归函数来遍历整个对象树。在上面的 sanitizeData示例中，我们仅处理了顶层字段。为了处理嵌套情况，我们需要增强该函数，使其能检测子对象并递归调用自身。例如，如果 user 对象中有一个 address 对象，其中包含 zipCode，递归逻辑将自动进入 address 并对其进行脱敏。这种深度优先的处理方式确保了无论敏感数据藏得多深，都能被正确掩码，同时保持非敏感数据的完整性。
