阐述 `File System Access API` 如何实现更安全的本地文件系统读写，并讨论其权限模型和用户交互。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位听众，早上好/下午好/晚上好！我是今天的讲师，很高兴和大家聊聊 File System Access API 这个既强大又有点“傲娇”的技术。为什么说它“傲娇”呢？因为它既想让你的网页拥有访问本地文件的能力，又不想让你的电脑变成“肉鸡”，所以权限控制方面特别严格。今天我们就来扒一扒它的底裤，看看它是如何实现更安全的本地文件系统读写的。

一、File System Access API 是什么？

简单来说，File System Access API （以前叫做 Native File System API）是一组 Web API，允许网页应用在用户的明确授权下，直接访问用户本地文件系统中的文件和目录。想象一下，以前你想让一个网页上传文件，是不是只能用 <input type="file"> 标签？用户点一下，选个文件，然后浏览器把文件内容上传到服务器。现在有了 File System Access API，网页可以直接操作本地文件，比如读取、写入、创建、删除等等，感觉是不是很刺激？这种能力对于某些类型的 Web 应用来说简直是福音，比如：

图像/视频编辑器： 直接在本地编辑，不需要上传下载。
IDE/代码编辑器： 直接打开本地项目，实时保存。
文档编辑器： 直接编辑本地文档，不需要转换为在线格式。

二、安全性：重中之重！

大家肯定会担心：这玩意儿会不会被黑客利用，随便读取我的电脑里的文件？别慌，File System Access API 的设计者们早就考虑到了这一点，所以在安全性方面下了很大功夫。

用户授权： 任何文件系统的访问都必须经过用户的明确授权。也就是，只有用户主动选择了文件或目录，并且允许你的网页访问，你才能进行操作。
权限模型： 权限是分级的，你可以请求读权限，写权限，甚至同时请求读写权限。
同源策略（Same-Origin Policy）： 网页只能访问与其 origin 相同的文件系统资源。简单来说，就是你的网页只能访问自己“领地”内的文件。
HTTPS： 必须通过 HTTPS 协议来访问，保证传输过程的安全性。

三、权限模型详解

File System Access API 的权限模型是理解其安全机制的关键。主要体现在以下几个方面：

用户启动（User Activation）： 访问文件系统必须由用户主动触发，比如点击按钮、拖拽文件等。这避免了恶意网页在后台偷偷访问文件系统。
权限请求（Permission Request）： 当网页尝试访问文件系统时，浏览器会弹出一个权限请求对话框，询问用户是否允许。
- read： 允许读取文件内容。
- write： 允许写入文件内容。
权限持久化（Permission Persistence）： 用户授予的权限可以被持久化，下次访问时不需要再次请求。但是，用户可以随时撤销权限。
权限状态（Permission State）： 可以通过 navigator.permissions.query() API 查询当前网页对某个文件或目录的权限状态。

四、用户交互：浏览器说了算

用户交互是 File System Access API 的重要组成部分。浏览器会负责处理与用户的交互，比如弹出文件选择器、权限请求对话框等。开发者不能直接控制这些交互的界面，只能通过 API 来触发。

这其实是一种安全策略，避免了恶意网页伪造用户界面来欺骗用户。

五、基本用法：代码说话

光说不练假把式，下面我们来看一些代码示例，演示如何使用 File System Access API。

选择文件：

async function chooseFile() {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    if (fileHandle) {
      const file = await fileHandle.getFile();
      const contents = await file.text();
      console.log("File contents:", contents);
    }
  } catch (err) {
    console.error("Failed to open file:", err);
  }
}

// HTML: <button onclick="chooseFile()">Choose File</button>

这段代码会弹出一个文件选择器，用户选择文件后，我们可以读取文件的内容。

async function chooseDirectory() {
  try {
    const directoryHandle = await window.showDirectoryPicker();
    if (directoryHandle) {
      // 遍历目录中的文件
      for await (const [name, handle] of directoryHandle.entries()) {
        console.log("File/Directory name:", name);
        if (handle.kind === 'file') {
          const file = await handle.getFile();
          console.log("File size:", file.size);
        }
      }
    }
  } catch (err) {
    console.error("Failed to open directory:", err);
  }
}

// HTML: <button onclick="chooseDirectory()">Choose Directory</button>

这段代码会弹出一个目录选择器，用户选择目录后，我们可以遍历目录中的文件和子目录。

创建文件：

async function createFile() {
  try {
    const directoryHandle = await window.showDirectoryPicker();
    if (directoryHandle) {
      const fileHandle = await directoryHandle.getFileHandle('new_file.txt', { create: true });
      const writable = await fileHandle.createWritable();
      await writable.write('Hello, File System Access API!');
      await writable.close();
      console.log('File created successfully!');
    }
  } catch (err) {
    console.error('Failed to create file:', err);
  }
}

// HTML: <button onclick="createFile()">Create File</button>

这段代码会在用户选择的目录中创建一个新的文件，并写入一些内容。

写入文件：

async function writeFile(fileHandle, contents) {
  try {
    const writable = await fileHandle.createWritable();
    await writable.write(contents);
    await writable.close();
    console.log('File written successfully!');
  } catch (err) {
    console.error('Failed to write file:', err);
  }
}

// 假设我们已经有了 fileHandle
// writeFile(fileHandle, 'New content to write.');

这段代码会将指定的内容写入到指定的文件中。

读取文件：

async function readFile(fileHandle) {
  try {
    const file = await fileHandle.getFile();
    const contents = await file.text();
    console.log('File contents:', contents);
    return contents; // 返回文件内容
  } catch (err) {
    console.error('Failed to read file:', err);
    return null; // 或者抛出异常
  }
}

// 假设我们已经有了 fileHandle
// readFile(fileHandle);

这段代码会读取指定文件的内容。

权限查询：

async function checkPermission(fileHandle, mode) {
  try {
    const options = { mode: mode }; // 'readwrite' or 'read'
    const permissionStatus = await fileHandle.requestPermission(options);

    console.log(`Permission status for ${mode}: ${permissionStatus}`);

    if (permissionStatus === 'granted') {
      console.log('Permission granted.');
      return true;
    } else if (permissionStatus === 'denied') {
      console.log('Permission denied.');
      return false;
    } else {
      console.log('Permission prompt or unknown.');
      return false;
    }

  } catch (err) {
    console.error('Failed to check permission:', err);
    return false;
  }
}

// 假设我们已经有了 fileHandle
// checkPermission(fileHandle, 'readwrite'); // 检查读写权限
// checkPermission(fileHandle, 'read'); // 检查只读权限

这段代码用于检查对给定文件句柄的特定权限（读或读写）。它使用 requestPermission 方法，该方法显示权限提示（如果尚未授予权限）或返回当前权限状态。

注意点：

这些 API 都是异步的，需要使用 async/await 来处理。
浏览器支持程度不一，需要进行特性检测。
错误处理很重要，需要捕获各种异常情况。

六、安全性最佳实践

除了 File System Access API 自身的安全机制外，开发者也需要注意一些最佳实践，以确保应用的安全性。

最小权限原则： 只请求必要的权限。如果只需要读取文件，就不要请求写权限。
输入验证： 对用户输入进行验证，防止恶意代码注入。
安全编码： 遵循安全编码规范，避免常见的 Web 安全漏洞。
及时更新： 及时更新浏览器和操作系统，修复安全漏洞。

七、进阶用法：Stream API 的加持

File System Access API 还可以与 Stream API 结合使用，实现更高效的文件读写。

Stream API 允许你以流的方式处理数据，而不是一次性加载整个文件。这对于大型文件来说非常有用。

async function writeFileStream(fileHandle, stream) {
  try {
    const writableStream = await fileHandle.createWritable();
    await stream.pipeTo(writableStream);
    console.log('File written successfully using streams!');
  } catch (err) {
    console.error('Failed to write file using streams:', err);
  }
}

// 示例：将一个 ReadableStream 写入文件
// const response = await fetch('https://example.com/large_file.zip');
// if (response.ok && response.body) {
//   writeFileStream(fileHandle, response.body);
// }

八、特性检测：兼容性是王道

File System Access API 还是一个相对较新的 API，浏览器支持程度不一。在使用之前，需要进行特性检测，以确保代码能够在不同的浏览器上正常运行。

if ('showOpenFilePicker' in window) {
  // File System Access API is supported
  console.log('File System Access API is supported!');
} else {
  // File System Access API is not supported
  console.warn('File System Access API is not supported!');
}

九、实际案例：一个简易的文本编辑器

为了更好地理解 File System Access API 的用法，我们来创建一个简易的文本编辑器。

HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <title>Simple Text Editor</title>
</head>
<body>
  <textarea id="editor" style="width: 80%; height: 500px;"></textarea>
  <br>
  <button onclick="openFile()">Open File</button>
  <button onclick="saveFile()">Save File</button>

  <script src="script.js"></script>
</body>
</html>

JavaScript 代码 (script.js)：

let fileHandle; // 保存文件句柄

async function openFile() {
  try {
    [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    const contents = await file.text();
    document.getElementById('editor').value = contents;
  } catch (err) {
    console.error('Failed to open file:', err);
  }
}

async function saveFile() {
  try {
    if (!fileHandle) {
      fileHandle = await window.showSaveFilePicker();
    }
    const contents = document.getElementById('editor').value;
    const writable = await fileHandle.createWritable();
    await writable.write(contents);
    await writable.close();
    console.log('File saved successfully!');
  } catch (err) {
    console.error('Failed to save file:', err);
  }
}

这个简单的编辑器可以打开本地文件，编辑内容，然后保存到本地文件。

十、总结与展望

File System Access API 是一项强大的技术，它为 Web 应用带来了更强的本地文件系统访问能力。虽然安全性方面有很多限制，但这些限制都是为了保护用户的安全。随着浏览器支持程度的提高，相信 File System Access API 会在越来越多的 Web 应用中得到应用。

表格总结:

特性	描述	安全性考量	用户交互
文件/目录选择	允许用户选择单个文件或目录。	必须由用户主动触发，防止恶意脚本偷偷访问文件系统。	弹出浏览器自带的文件/目录选择器，用户体验一致。
文件读取	允许读取文件内容。	需要用户授权，只能读取用户选择的文件。	无额外用户交互。
文件写入	允许写入文件内容。	需要用户授权，只能写入用户选择的文件。	无额外用户交互。
文件创建	允许创建新文件。	需要用户授权，只能在用户选择的目录下创建文件。	弹出文件保存对话框，让用户选择文件名和保存路径。
权限管理	允许查询和请求文件/目录的访问权限。	权限请求对话框由浏览器控制，防止恶意网页伪造界面欺骗用户。	弹出权限请求对话框，询问用户是否允许访问文件/目录。
Stream API 集成	允许使用 Stream API 进行高效的文件读写。	Stream API 本身不影响安全性，安全性仍然由 File System Access API 的权限模型保证。	无额外用户交互。
安全性最佳实践	开发者需要遵循最小权限原则、输入验证、安全编码等最佳实践，确保应用的安全性。	这些最佳实践可以有效防止恶意代码注入和常见的 Web 安全漏洞。	无额外用户交互。

希望今天的讲座对大家有所帮助。谢谢大家！

发表回复 取消回复

发表回复取消回复