油猴插件如何安全调用本地文件？

Question

如何在保证安全的前提下，通过油猴插件调用本地文件系统中的配置或数据文件？由于浏览器沙箱机制限制，油猴脚本无法直接访问本地文件，常规做法存在跨域和权限风险。常见的需求如读取本地JSON配置、更新本地资源等，若通过不安全的file://协议或外部服务器中转，可能引发信息泄露或被恶意注入。因此，亟需探讨在不违背同源策略和CSP安全策略的前提下，实现安全、可控的本地文件交互方案。

Answer 1

如何在保证安全的前提下，通过油猴插件调用本地文件系统中的配置或数据文件？

1. 背景与挑战：浏览器沙箱机制下的本地文件访问限制

油猴（Tampermonkey/Greasemonkey）脚本运行在浏览器的用户脚本环境中，受制于同源策略（Same-Origin Policy）、内容安全策略（CSP）以及浏览器的沙箱机制。这些安全模型禁止脚本直接访问本地文件系统，以防止恶意脚本读取用户敏感数据。

常见的尝试方式如使用file://协议加载页面并执行脚本，存在严重安全隐患：一旦攻击者诱导用户打开恶意HTML文件，即可通过油猴脚本读取任意本地文件，造成信息泄露。

因此，在不违背现代Web安全原则的前提下，实现“可控、可审计、最小权限”的本地文件交互成为关键需求。

2. 常见错误做法及其风险分析

方法	技术原理	安全风险	是否推荐
file:// 协议加载页面	本地HTML引用油猴脚本	完全绕过同源策略，易被恶意利用	❌ 不推荐
XMLHttpRequest 读取本地路径	尝试 fetch('file:///C:/config.json')	被浏览器明确阻止，跨协议限制	❌ 失败
通过第三方服务器中转	上传本地文件到远程服务供脚本读取	数据泄露、中间人攻击、CSP绕过	⚠️ 高风险
使用 Electron 封装油猴环境	脱离浏览器原生环境	失去沙箱保护，需自行实现权限控制	✅ 可控但复杂

3. 安全可行的技术路径：分层架构设计

为满足安全性与功能性双重目标，应采用“前端脚本 + 后端代理”分离架构。油猴脚本仅负责通信，真实文件操作由可信本地服务完成。

1. 建立本地HTTP代理服务：使用Node.js、Python Flask或Go启动一个仅监听localhost:port的服务。
2. 设置CORS白名单：只允许特定域名（如目标网站）通过fetch请求该服务。
3. 身份验证机制：引入Token或一次性验证码，防止CSRF滥用。
4. 文件路径白名单：服务端限定可读写的目录范围，避免路径遍历攻击。
5. 日志审计与用户确认：每次文件操作记录日志，并可通过弹窗提示用户确认。

4. 实现示例：基于Node.js的本地配置服务

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const PORT = 8090;
const CONFIG_DIR = path.join(__dirname, 'user-configs');

// 中间件：检查来源和令牌
app.use((req, res, next) => {
    const allowedOrigin = 'https://target-site.com';
    const token = req.headers['x-api-token'];
    
    if (req.headers.origin !== allowedOrigin) {
        return res.status(403).send('Forbidden: Invalid Origin');
    }
    if (token !== 'secure-user-token-123') {
        return res.status(401).send('Unauthorized');
    }
    res.header('Access-Control-Allow-Origin', allowedOrigin);
    res.header('Access-Control-Allow-Methods', 'GET, POST');
    next();
});

// 接口：读取本地JSON配置
app.get('/config/:site.json', (req, res) => {
    const filePath = path.join(CONFIG_DIR, req.params.site + '.json');
    if (!fs.existsSync(filePath)) {
        return res.status(404).json({ error: 'Config not found' });
    }
    try {
        const data = fs.readFileSync(filePath, 'utf-8');
        res.json(JSON.parse(data));
    } catch (err) {
        res.status(500).json({ error: 'Failed to parse config' });
    }
});

app.listen(PORT, '127.0.0.1', () => {
    console.log(`✅ Local config server running at http://127.0.0.1:${PORT}`);
    console.log(`🔒 Only accessible via localhost and requires token verification.`);
});
    

5. 油猴脚本中的安全调用方式

在油猴脚本中，通过GM_xmlhttpRequest或现代fetch与本地服务通信，注意添加必要的认证头。

// ==UserScript==
// @name         Secure Local Config Loader
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  安全地从本地服务加载配置
// @author       You
// @match        https://target-site.com/*
// @grant        GM_xmlhttpRequest
// @connect      127.0.0.1
// ==/UserScript==

(function() {
    'use strict';

    function loadLocalConfig(siteName) {
        return new Promise((resolve, reject) => {
            GM_xmlhttpRequest({
                method: "GET",
                url: `http://127.0.0.1:8090/config/${siteName}.json`,
                headers: {
                    "X-API-Token": "secure-user-token-123"
                },
                onload: res => {
                    if (res.status === 200) {
                        resolve(JSON.parse(res.responseText));
                    } else {
                        reject(new Error(`Load failed: ${res.status}`));
                    }
                },
                onerror: err => reject(err)
            });
        });
    }

    // 使用示例
    loadLocalConfig('myapp').then(config => {
        console.log('✅ 配置加载成功:', config);
        // 应用配置逻辑
    }).catch(err => {
        console.error('❌ 配置加载失败:', err);
    });
})();
    

6. 架构流程图：安全本地文件交互模型

sequenceDiagram
            participant User as 用户
            participant Page as 目标网页
            participant Tampermonkey as 油猴脚本
            participant LocalService as 本地HTTP服务
            participant FileSystem as 本地文件系统

            User->>Page: 访问目标网站
            Page->>Tampermonkey: 触发油猴脚本
            Tampermonkey->>LocalService: 发起fetch请求(带Token)
            LocalService->>FileSystem: 安全读取指定路径文件
            FileSystem-->>LocalService: 返回文件内容
            LocalService-->>Tampermonkey: 返回JSON响应(CORS校验通过)
            Tampermonkey->>Page: 应用配置并修改页面行为

7. 安全加固建议

• 始终绑定服务到127.0.0.1而非0.0.0.0，防止局域网暴露。
• 使用HTTPS自签名证书 + 用户手动信任，提升传输安全性。
• 定期轮换API Token，避免长期固定密钥。
• 对写入操作增加二次确认对话框（Electron或桌面通知）。
• 利用操作系统权限（如Windows ACL / Linux chmod）限制配置目录访问。
• 启用日志记录所有文件访问行为，便于审计追踪。
• 结合Windows Defender Application Control或macOS Gatekeeper防止未授权服务启动。
• 考虑使用WebExtensions native messaging替代HTTP接口，更贴近浏览器原生安全模型。
• 对敏感字段进行加密存储（如使用AES-GCM），即使文件泄露也无法直接解析。
• 提供UI管理界面用于查看、编辑、删除配置，降低技术门槛。