浏览器出于安全沙箱机制，禁止直接访问本地USB设备或任意文件系统，因此无法自动读取用户插入的U盘内容；唯一合规方式是通过用户主动选择文件（如）触发授权访问。
浏览器出于安全沙箱机制，禁止直接访问本地usb设备或任意文件系统，因此无法自动读取用户插入的u盘内容；唯一合规方式是通过用户主动选择文件（如``）触发授权访问。
在构建打印自助终端（kiosk）网站时，一个常见需求是“自动显示用户U盘中的文件列表”。但需要明确一个核心事实：现代浏览器（Chrome、Edge、Firefox、Safari）严格禁止网页脚本未经用户显式授权访问本地文件系统——包括USB闪存驱动器。这是由W3C规范和各浏览器安全模型共同强制执行的底层限制，目的正是防止恶意网站静默窃取用户隐私文件。
为什么不能自动读取U盘？
- 浏览器运行在沙箱环境中，无权枚举设备（如
/dev/sdb1）、挂载点（如D:\或/media/user/USB_DRIVE）或监听USB插拔事件； -
htaccess仅作用于Web服务器目录权限，对本地物理设备完全无效； - 即使网站部署在kiosk本地机器上（如
http://localhost），浏览器仍遵循同源策略与文件系统隔离原则。
✅ 可行的合规方案
用户必须主动交互授权，才能让网页访问其选定的文件或目录：
1. 使用 <input type="file" webkitdirectory>（推荐）
支持Chrome、Edge、Opera，允许用户选择整个U盘根目录（需手动点击）：
<input type="file" id="usbPicker" webkitdirectory="true" directory="true" multiple style="display:none;"><button onclick="document.getElementById('usbPicker').click()">
? 选择U盘根目录
</button>
<script>
document.getElementById('usbPicker').addEventListener('change', async (e) => {
const files = Array.from(e.target.files);
const fileList = files.map(f => f.webkitRelativePath || f.name);
console.log("检测到文件：", fileList);
// 渲染为可浏览列表（支持预览图片/PDF等）
document.getElementById('fileList').innerHTML =
'<ul>' + fileList.map(name => `<li>${name}`).join('') + '';
});
</script><div id="fileList"></div>
⚠️ 注意：
webkitdirectory不会返回真实路径，仅提供相对路径（如photos/cat.jpg），且用户必须手动打开文件选择器并导航至U盘——无法“自动发现”。
2. 结合桌面应用桥接（进阶kiosk场景）
若kiosk为专用硬件（如Windows/Linux一体机），可搭配轻量级桌面代理：
- 前端通过
fetch('http://localhost:8080/usb-list')调用本地服务； - 后端（如Python +
pyudev/psutil）扫描挂载设备并返回JSON； - 需用户首次安装并信任该本地服务（绕过浏览器限制，但增加部署复杂度）。
总结
- ❌ 纯前端网页无法自动监听USB插入、枚举设备或读取文件；
- ✅ 必须依赖用户显式操作（点击选择）+
File API获取授权文件集； - ? 所有方案均遵循最小权限原则：用户掌控每一步访问行为；
- ?️ 对于封闭式kiosk，建议采用“网页+可信本地服务”混合架构，并做好进程守护与跨域配置（如CORS头、
localhost白名单）。
安全不是功能障碍，而是设计前提——从<input type="file">开始，构建既可用又可信的打印自助体验。
