Tauri+React应用如何从AppDataDir安全加载JS插件？

动态导入AppData下的插件时触发Not allowed to load local resource错误，用eval或Function虽然能跑但风险高，试试下面的安全方案：

用Data URL转译模块后动态导入 #

通过Tauri的fs读取插件代码，转成Data URL后再用import()加载，既绕开本地资源加载限制，又避免不安全的代码执行方式：

import { fs, path } from '@tauri-apps/api';

async function loadPlugin() {
  // 获取AppData目录并拼接插件路径
  const appDataDir = await path.appDataDir();
  const pluginFilePath = await path.join(appDataDir, 'your-plugin-dir', 'plugin.js');
  
  // 读取插件代码
  const pluginCode = await fs.readTextFile(pluginFilePath);
  
  // 转成ES模块兼容的Data URL
  const dataUrl = `data:text/javascript;charset=utf-8,${encodeURIComponent(pluginCode)}`;
  
  // 动态导入模块
  const pluginModule = await import(dataUrl);
  
  // 返回插件导出内容（根据实际导出调整）
  return pluginModule.default;
}

确认配置生效 #

检查tauri.conf.json的关键配置，修改后务必重启开发服务：

{
  "tauri": {
    "security": {
      "csp": null
    },
    "allowlist": {
      "fs": {
        "scope": ["**"],
        "read": true,
        "write": true
      }
    }
  }
}

安全优化建议 #

• 缩小FS权限范围：把scope从["**"]改成具体的插件目录，比如["${APP_DATA_DIR}/your-app-plugins/**"]，减少不必要的文件访问权限。
• 插件代码校验：给可信插件添加签名，加载前验证签名，防止恶意代码被加载执行。

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