如何在 Electron 应用中安全地将音频 Blob 保存到本地磁盘-js教程-PHP中文网

如何在 Electron 应用中安全地将音频 Blob 保存到本地磁盘

本文详解如何通过 Electron 的 IPC 机制，从渲染进程（renderer.js）安全传递音频 Blob 数据至主进程（main.js），并使用 Node.js fs.writeFile 将其持久化为 .wav 文件，同时确保上下文隔离与通道白名单防护。

本文详解如何通过 electron 的 ipc 机制，从渲染进程（renderer.js）安全传递音频 blob 数据至主进程（main.js），并使用 node.js `fs.writefile` 将其持久化为 `.wav` 文件，同时确保上下文隔离与通道白名单防护。

在 Electron 应用中，前端录制的音频通常以 Blob 对象形式存在于渲染进程（如使用 MediaRecorder 录制后生成 audio/wav Blob）。由于渲染进程运行在沙箱环境中、无权直接访问文件系统，必须借助 预加载脚本（preload.js） 搭建安全桥接，通过 contextBridge 暴露受控 API，并经由 ipcRenderer 与主进程通信，最终由主进程调用 fs.writeFile 完成磁盘写入。

✅ 安全通信三步走

1. 预加载脚本：定义并限制 IPC 通道（`preload.js`）

使用 contextBridge.exposeInMainWorld 向渲染进程暴露 api.saveAudio 方法，强制白名单校验，仅允许指定 channel（如 "saveAudio"）触发 IPC 发送：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
  saveAudio: (channel, filePath, audioArrayBuffer) => {
    if (channel === 'saveAudio') {
      // 严格校验参数类型（可选增强）
      if (typeof filePath === 'string' && ArrayBuffer.isView(audioArrayBuffer) || audioArrayBuffer instanceof ArrayBuffer) {
        ipcRenderer.send(channel, filePath, audioArrayBuffer);
      } else {
        console.warn('Invalid audio data type passed to saveAudio');
      }
    }
  }
});

⚠️ 注意：避免直接暴露 ipcRenderer.send 全局方法；始终通过白名单控制通道名，防止任意 IPC 调用引发安全风险。

2. 主进程：接收并写入文件（`main.js`）

在主进程中监听 saveAudio 通道，将接收到的 ArrayBuffer 转为 Buffer，再写入磁盘。务必进行路径合法性校验（防止路径遍历攻击）：

// main.js
const { app, ipcMain } = require('electron');
const fs = require('fs').promises;
const path = require('path');

// ✅ 建议：校验文件路径是否在允许目录内（如 app.getPath('downloads')）
function isValidSavePath(filePath) {
  const safeDir = app.getPath('downloads'); // 或自定义安全根目录
  const resolved = path.resolve(filePath);
  return resolved.startsWith(path.resolve(safeDir));
}

ipcMain.on('saveAudio', async (event, filePath, audioArrayBuffer) => {
  try {
    if (!isValidSavePath(filePath)) {
      throw new Error('Illegal file path: outside allowed directory');
    }

    const buffer = Buffer.from(audioArrayBuffer);
    await fs.writeFile(filePath, buffer);
    console.log(`✅ Audio saved successfully: ${filePath}`);
    event.reply('saveAudioSuccess', { success: true, path: filePath });
  } catch (err) {
    console.error('❌ Failed to save audio:', err);
    event.reply('saveAudioError', { success: false, error: err.message });
  }
});

3. 渲染进程：读取 Blob 并触发保存（`renderer.js`）

使用 FileReader 将 Blob 转为 ArrayBuffer，再调用预加载暴露的 api.saveAudio：

// renderer.js
async function saveBlobAsWav(blob, fileName) {
  const reader = new FileReader();
  reader.readAsArrayBuffer(blob);

  reader.onload = () => {
    const arrayBuffer = reader.result;
    const safePath = path.join('exports', fileName); // 注意：实际路径由主进程拼接或校验
    // 示例：假设已定义 audioDirectory = app.getPath('downloads')
    window.api.saveAudio('saveAudio', 
      path.join(app.getPath('downloads'), 'exports', fileName), 
      arrayBuffer
    );
  };

  reader.onerror = () => {
    console.error('Failed to read blob');
  };
}

// 使用示例（假设 rwav 是 MediaRecorder.stop() 返回的 Blob）
saveBlobAsWav(rwav, `recording-${Date.now()}.wav`);