web有没有方式可以自动读取文件而不是手动点击框上传

xiaoxiaoY520

最近学习go语言，以做一个可以日常使用的工具为目标边做边学。功能主要为密码管理器，集成一些常用工具。想法是前后端分离架构，密码记录通过前端加密后存储到数据库，安全以密钥安全为基准，即没有密钥的情况下数据是解不开的，包括数据库丢失也是无法解开。这种模式就需要用户使用时从前端配置密钥发送到服务器上存储进服务器内存，此时服务器才能有解密数据的能力，否则即使登录进系统，也只能看到加密的数据。
问题：每次使用都需要配置密钥给使用增加了复杂度，如果能在前端配置好路径，例如某个u盘的路径，当插入u盘时，浏览器可以自动根据路径去读取密钥并上传至服务器内存，离开时拔掉u盘，当会话超时或主动退出服务器就会清除密钥，浏览器再去读取密钥时密钥文件丢失，即对服务器来说密钥丢失，保障了密码记录安全。但是查遍网络，浏览器限制了读取本地文件，没法突破，必须点击上传。另一种就是搞个辅助的客户端程序，但是这就失去了c/s模式的优势，并不想参杂过多的使用成本。诸位有没有可用的方法或好用的点子，希望能提供，系统做完后可分享使用。后续完成后可能会开发浏览器插件。目前进度：

waahah

谢邀哈，先说结论：由于浏览器内容安全策略CSP，所以无法在无任何交互的情况下读取文件

但是可以使用File System Access API读取指定的文件目录来避免层层选择文件，通过配置起始目录（startIn）来尝试让用户更便捷地定位到指定文件所在目录，然后尝试引导用户手动确认就可以了，下面给出简短示例：

// 配置文件选择器选项
const options = {
    types: [
        {
            description: 'javascript Files',
            accept: {
                'text/x-csrc': ['.js']
            }
        }
    ],
    excludeAcceptAllOption: true,
    multiple: false,
    // 尝试配置起始目录字符串或使用 FileSystemHandle 对象，不过其兼容性和实际效果可能因浏览器版本等因素受限
    startIn: 'downloads'
};

async function readSpecificFile() {
    try {
        const [fileHandle] = await window.showOpenFilePicker(options);
        const file = await fileHandle.getFile();
        if (file.name === '你的文件.js') {
            const reader = new FileReader();
            reader.onload = function (e) {
                const fileContent = e.target.result;
                console.log('文件内容如下：', fileContent);
                // 可以在此处对文件内容做进一步的处理
            };
            reader.readAsText(file);
        } else {
            console.error('选择的文件不是指定的.js文件');
        }
    } catch (error) {
        console.error('文件选择或读取出现错误：', error);
    }
}

readSpecificFile();

---

至于浏览器监测USB设备的插入和拔出等信息可以采用轮询的方式来实现

let connectedDevices = [];

async function checkUSBDevices() {
    try {
        // 获取当前连接的 USB 设备
        const devices = await navigator.usb.getDevices();

        // 比对当前设备列表和之前的设备列表
        const newDevices = devices.filter(device => !connectedDevices.some(d => d.device !== device.device));
        const removedDevices = connectedDevices.filter(device => !devices.some(d => d.device === device.device));

        // 处理新插入的设备
        if (newDevices.length > 0) {
            console.log('新设备插入:', newDevices);
        }

        // 处理拔出的设备
        if (removedDevices.length > 0) {
            console.log('设备拔出:', removedDevices);
        }

        // 更新已连接设备列表
        connectedDevices = devices;
    } catch (error) {
        console.error('检测 USB 设备时出错:', error);
    }
}
// 每隔 2 秒轮询一次
setInterval(checkUSBDevices, 2000);

处理USB连接数据

try {
    const device = await navigator.usb.requestDevice({ filters: [{ vendorId: 0x1234 }] }); // 替换为你的设备的 vendorId
    await device.open(); // 打开设备
    await device.selectConfiguration(1); // 选择配置
    await device.claimInterface(0); // 声明接口

    document.getElementById('status').innerText = '已连接到设备: ' + device.productName;

    // 读取数据
    const result = await readData(device);
    console.log(result);
    // 这里可配合File System Access API实现上传密钥内容的逻辑，例如发送到服务器

} catch (error) {
    console.error(error);
    document.getElementById('status').innerText = '错误: ' + error;
}

async function readData(device) {
    const transferIn = await device.transferIn(5, 64); // 读取数据，参数需要根据设备配置调整
    const decoder = new TextDecoder();
    return decoder.decode(transferIn.data);
}

xiaoxiaoY520

补充一下哈，我知道浏览器有csp策略限制，我希望找到一种可以经过配置之后读取文件或是申请权限读取文件的方法、类似浏览器插件限制的那种，但是浏览器插件也达不到读取文件的权限。本来设想过密钥加密存储在本地浏览器，但是存储在浏览器本地是不安全的，而且失去了便携性。也设想过像1password那样整一个客户端，或是专门整个程序来读取，但是这又引入了b/s架构的缺点，密码管理这个使用场景其实是不适合搞客户端的，一旦引入了客户端，加入了繁杂的配置，这个系统其实就只方便在常用浏览器上使用。试想如果只是临时调用一下密码或添加密码记录，还要装客户端、进行繁杂的配置。。。。。。体验感极差。

李玉风我爱你

你猜为什么浏览器限制必须手动上传？如果不限制任意一个网页可以在不知情的情况下扫描你电脑内的文件。

不知道改成啥

这是什么妖孽问题啊期待有大佬回复

JARK006

你仔细想想，你打开某个网页，人家不经过你这个用户的同意，在后台默默读取你的任意文件，你允许吗？

鹿鸣

考虑到安全问题，不支持直接读取本地文件   之前我也遇到了类似问题目前也没有太好的解决办法

crystalZ

有的网站能读取本地正在运行的软件，但是读取本地的文件有点吓人了，真做出来用户也不敢用

pomxion

功能全  学习了！谢谢分享

lxxfhtd

谢谢分享

secxf

正常情况是不允许的