Firefox扩展后台JS fetch读取本地file协议文件报安全错误如何解决

Firefox的安全机制对扩展访问本地file协议资源做了多层拦截，即使你在manifest.json里声明了file://*/*权限，默认状态下也不允许扩展的后台页直接通过fetch拉取本地文件。这个权限声明只是必要条件，后续的两层拦截机制会直接触发你遇到的安全错误：

• 扩展级的手动授权开关默认关闭，未授予扩展读取文件URL的权限
• 浏览器全局的file源严格校验策略，会拦截跨源的file资源请求

1. 开放浏览器端的必要配置 #

• 地址栏输入about:config进入配置页，确认接受风险提示
• 找到security.fileuri.strict_origin_policy配置项，将值修改为false，关闭file URI的严格同源校验

2. 给目标扩展开启文件访问授权 #

• 地址栏输入about:addons进入扩展管理页
• 找到你开发的目标扩展，进入详情页的「权限」标签栏
• 打开「允许访问文件URL」的开关

注意：如果是开发状态下的临时未打包扩展，需要进入about:debugging#/runtime/this-firefox页面，找到对应扩展的调试入口，在扩展权限配置里同步勾选文件URL访问权限

3. 修正代码里的实现逻辑 #

你原有代码存在两个明显问题，会导致即使权限放开也无法正常读取文件：

• 没有给fetch方法加await，同步获取到的是Promise对象而非真实响应
• 本地路径拼接没有处理Windows系统的反斜杠、特殊字符转义，容易生成格式错误的file URL

修正后的可运行代码示例：

async function readLocalFile(absoluteFilePath) {
    try {
        // 处理Windows路径格式，拼接标准file协议URL
        const normalizedPath = absoluteFilePath.replace(/\\/g, '/');
        const fileUrl = `file:///${normalizedPath}`;
        const response = await fetch(fileUrl);
        
        if (!response.ok) {
            throw new Error(`文件读取失败，HTTP状态码：${response.status}`);
        }
        // 二进制文件（如示例中的zip包）用arrayBuffer()读取，文本文件可替换为text()
        const fileContent = await response.arrayBuffer();
        console.log("读取到的文件内容", fileContent);
        return fileContent;
    } catch (error) {
        console.error("文件读取异常", error);
    }
}

这种直接拉取file路径的方案仅适合本地调试场景。如果是发布到Firefox附加组件商店的正式扩展，不能强制要求普通用户修改about:config配置，更稳妥的方案是引导用户主动通过文件选择对话框授权文件句柄，再通过扩展API读取指定文件内容，避免触发浏览器的安全拦截。

内容的提问来源于stack exchange，提问作者user12969777