Electron.js 应用中安全地进行 SQL 数据库操作的教程-js教程-PHP中文网

Electron.js 应用中安全地进行 SQL 数据库操作的教程

本教程旨在指导开发者如何在 electron.js 应用程序中安全地与 sql 数据库进行交互。核心原则是避免直接从 electron 客户端连接数据库，而是通过构建一个独立的后端 api 服务作为中介，从而保护数据库凭据，防止 sql 注入，并增强应用程序的整体安全性与可维护性。

引言：Electron 与 SQL 交互的挑战

Electron 应用程序结合了 Web 技术（HTML、CSS、JavaScript）和 Node.js 的能力，允许开发者构建跨平台的桌面应用。在许多业务场景中，应用程序需要与数据库进行交互以存储和检索数据。然而，直接从 Electron 应用程序连接 SQL 数据库，尤其是在客户端代码中包含数据库连接凭据，会带来严重的安全风险。

Electron 应用程序由两个主要进程组成：

主进程 (Main Process)：负责创建和管理渲染进程，以及处理操作系统级别的交互。它拥有完整的 Node.js API 访问权限。
渲染进程 (Renderer Process)：负责显示用户界面，运行在独立的 Chromium 实例中，类似于网页浏览器。

如果将数据库连接逻辑和凭据直接放在主进程中，虽然主进程不像渲染进程那样容易被用户直接访问，但打包后的 Electron 应用仍然是客户端软件，用户可以通过逆向工程、查看网络请求日志等方式获取敏感信息。更危险的是，将数据库连接逻辑暴露在渲染进程中则几乎等同于将数据库完全暴露给最终用户。此外，直接在客户端执行 SQL 查询也极易遭受 SQL 注入攻击。

因此，为了确保数据安全和应用程序的健壮性，我们必须采用一种更安全的架构模式。

核心安全策略：引入后端 API 服务

在 Electron 应用中安全地访问 SQL 数据库的最佳实践是引入一个独立的后端 API 服务作为中介层。这种架构将数据库操作从客户端完全隔离，从而保护敏感凭据并集中处理数据逻辑和安全性。

推荐架构示意图：

Electron 渲染进程 (renderer.js)
        ↓ (用户输入)
Electron 主进程 (main.js) (通过 ipcRenderer/ipcMain 通信)
        ↓ (HTTP/S 请求)
独立后端 API 服务 (Node.js/Python/Java等)
        ↓ (数据库驱动)
SQL 数据库 (例如：SQL Server)

登录后复制

后端 API 服务的作用：

ShopEx助理

一个类似淘宝助理、ebay助理的客户端程序，用来方便的在本地处理商店数据，并能够在本地商店、网上商店和第三方平台之间实现数据上传下载功能的工具。功能说明如下：1.连接本地商店：您可以使用ShopEx助理连接一个本地安装的商店系统，这样就可以使用助理对本地商店的商品数据进行编辑等操作，并且数据也将存放在本地商店数据库中。默认是选择“本地未安装商店”，本地还未安

查看详情

凭据管理： 后端服务负责安全地存储和使用数据库连接凭据，这些凭据绝不会暴露给 Electron 客户端。
SQL 查询执行： 后端服务接收来自 Electron 应用的请求，并使用其内部的数据库驱动程序执行 SQL 查询。
数据验证与安全性： 后端服务可以对所有传入的数据进行严格的验证和清理，以防止 SQL 注入和其他恶意攻击。
业务逻辑： 复杂的业务逻辑可以集中在后端处理，使 Electron 应用保持轻量和专注于用户界面。
认证与授权： 后端服务可以实现用户认证（如登录）和授权机制，确保只有经过验证的用户才能访问特定数据或功能。
可伸缩性与可维护性： 将数据层与 UI 层分离，有助于应用程序的长期维护和未来扩展。

Electron 应用程序端实现

Electron 应用的主要任务是收集用户输入，通过 IPC (Inter-Process Communication) 机制将请求发送到主进程，然后主进程将这些请求转发给后端 API，并处理后端 API 的响应。

1. renderer.js (渲染进程)

渲染进程负责用户界面的呈现和交互。当用户输入数据（例如用户名和密码）并提交时，renderer.js 会通过 Electron 的 ipcRenderer 模块将数据发送到主进程。

// renderer.js
const loginForm = document.getElementById('login-form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const messageContainer = document.getElementById('message-container'); // 用于显示登录状态

loginForm.addEventListener('submit', async (event) => {
    event.preventDefault();

    const username = usernameInput.value;
    const password = passwordInput.value;

    try {
        // 使用预加载脚本暴露的 API 调用主进程
        const response = await window.myCoolApi.login({ username, password }); 
        if (response.success) {
            showMessage('Login successful', 'green');
            // 可以在此处重定向或加载主界面
        } else {
            showMessage(response.message || 'Incorrect details.', 'red');
        }
    } catch (error) {
        console.error('Login error:', error);
        showMessage('An error occurred during login.', 'red');
    }
});

function showMessage(text, color) {
    messageContainer.textContent = text;
    messageContainer.style.color = color;
    setTimeout(() => {
        messageContainer.textContent = '';
    }, 3000);
}

登录后复制

2. preload.js (预加载脚本)

为了增强安全性，我们应启用 contextIsolation 并在 preload.js 中使用 contextBridge 安全地将特定功能暴露给渲染进程，而不是直接在渲染进程中启用 nodeIntegration。

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('myCoolApi', {
    // 暴露一个异步函数，用于向主进程发送登录请求
    login: (credentials) => ipcRenderer.invoke('login-request', credentials),
    // 可以暴露其他需要主进程处理的函数
    // getData: (params) => ipcRenderer.invoke('get-data-request', params)
});

登录后复制

3. main.js (主进程)

主进程接收来自渲染进程的请求，然后使用 HTTP 客户端（如 axios 或内置的 fetch API）向后端 API 发送请求。它不直接进行数据库连接。

首先，确保你的 package.json 中安装了 axios 或 node-fetch： npm install axios 或 npm install node-fetch

// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const axios = require('axios'); // 或使用内置的 node-fetch

let mainWindow;

// 配置后端 API 的基础 URL
const BACKEND_API_URL = 'http://localhost:3000/api'; // 根据你的后端服务地址调整

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // 强烈建议启用 contextIsolation 以增强安全性
            contextIsolation: true,
            // nodeIntegration 应该为 false，通过 preload 脚本安全地暴露 API
            nodeIntegration: false,
            preload: path.join(__dirname, 'preload.js')
        },
    });

    mainWindow.loadFile(path.join(__dirname, 'index.html'));

    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// 监听渲染进程的登录请求
ipcMain.handle('login-request', async (event, loginData) => {
    try {
        // 向后端 API 发送登录请求
        const response = await axios.post(`${BACKEND_API_URL}/login`, loginData);
        // 返回后端 API 的响应给渲染进程
        return { success: true, message: response.data.message, token: response.data.token };
    } catch (error) {
        console.error('Error calling backend login API:', error.message);
        // 根据后端错误响应码返回不同的消息
        if (error.response && error.response.status === 401) {
            return { success: false, message: 'Invalid username or password.' };
        }
        return { success: false, message: 'An unexpected error occurred. Please try again later.' };
    }
});

// 示例：如果需要从后端获取数据
ipcMain.handle('get-data-request', async (event, params) => {
    try {
        // 假设登录后获取了 token，并将其存储在主进程中
        // 实际应用中，token 应该更安全地管理，例如通过 session 或 secure store
        const userToken = 'YOUR_AUTH_TOKEN_HERE'; // 替换为实际的认证 token

        const response = await axios.get(`${BACKEND_API_URL}/data`, {
            params: params,
            headers: {
                'Authorization': `Bearer ${userToken}` // 发送认证 token
            }
        });
        return { success: true, data: response.data };
    } catch (error) {
        console.error('Error calling backend get data API:', error.message);
        return { success: false, message: 'Failed to fetch data.' };
    }
});

登录后复制

后端 API 服务端实现 (概念与最佳实践)

后端 API 服务是一个独立的应用程序，它负责与 SQL 数据库进行实际交互。你可以选择任何你熟悉的后端技术栈，例如 Node.js (Express, Koa)、Python (Flask, Django)、Java (Spring Boot) 等。这里以 Node.js 和 Express 为例，使用 tedious 库连接 SQL Server。

首先，在后端项目目录中安装必要的包： npm init -ynpm install express tedious dotenv

// backend/server.js
const express = require('express');
const Connection = require('tedious').Connection;
const Request = require('tedious').Request;
const TYPES = require('tedious').TYPES;
const dotenv = require('dotenv'); // 用于加载环境变量

dotenv.config(); // 加载 .env 文件中的环境变量

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.json()); // 允许 Express 解析 JSON 请求体

// 从环境变量安全加载数据库配置
const dbConfig = {
    server: process.env.DB_SERVER,
    authentication: {
        type: 'default',
        options: {
            userName: process.env.DB_USERNAME,
            password: process.env.DB_PASSWORD
        }
    },
    options: {
        encrypt: process.env.DB_ENCRYPT === 'true', // 根据环境配置是否加密
        database: process.env.DB_DATABASE,
        trustServerCertificate: process.env.DB_TRUST_SERVER_CERTIFICATE === 'true' // 如果使用自签名证书，可能需要设置为 true
    }
};

// 简单的登录 API 路由
app.post('/api/login', (req, res) => {
    const { username, password } = req.body;

    if (!username || !password) {
        return res.status(400).json({ success: false, message: 'Username and password are required.' });
    }

    const connection = new Connection(dbConfig);

    connection.on('connect', (err) => {
        if (err) {
            console.error('Database connection error:', err.message);
            return res.status(500).json({ success: false, message: 'Database connection failed.' });
        }

        console.log("Connected to SQL Server for login.");

        // !!! 重要：在实际应用中，密码应存储为哈希值，并在服务器端进行比对，而不是直接查询明文密码。
        // 此处为简化示例，请勿在生产环境中使用此方法。
        const request = new Request(
            "SELECT UserId, Username FROM Users WHERE Username = @username AND PasswordHash = HASHBYTES('SHA2_256', @password)", // 假设密码以 SHA2_256 哈希存储
            (err, rowCount, rows) => {
                if (err) {
                    console.error('SQL query error:', err.message);
                    connection.close();
                    return res.status(500).json({ success: false, message: 'Login failed due to server error.' });
                }

                if (rowCount > 0) {
                    // 登录成功，可以生成并返回一个认证 Token (如 JWT)
                    // const token = generateAuthToken(rows[0].UserId);
                    res.json({ success: true, message: 'Login successful', /* token: token */ });
                } else {
                    res.status(401).json({ success: false, message: 'Invalid username or password.' });
                }
                connection.close();
            }
        );

        // 使用参数化查询防止 SQL 注入
        request.addParameter('username', TYPES.NVarChar, username);
        request.addParameter('password', TYPES.NVarChar, password); // 实际应传递哈希后的密码或在DB中进行哈希比对

        connection.execSql(request);
    });

    connection.on('error', (err) => {
        console.error('Connection error (outside connect event):', err.message);
        // 可以在这里处理连接池的错误或重试逻辑
    });

    connection.connect();
});

// 示例：获取数据的 API 路由 (需要认证)
app.get('/api/data', (req, res) => {
    // 实际应用中，这里应该有认证中间件来验证 token
    // 例如：authenticateToken(req, res, () => { ... })
    // if (!req.user) { return res.status(403).json({ message: 'Unauthorized' }); }

    const connection = new Connection(dbConfig);
    connection.on('connect', (err) => {
        if (err) {
            console.error('Database connection error:', err.message);
            return res.status(500).json({ success: false, message: 'Database connection failed.' });
        }

        const request = new Request(
            "SELECT * FROM Products WHERE Category = @category", // 示例查询
            (err, rowCount, rows) => {
                if (err) {
                    console.error('SQL query error:', err.message);
                    connection.close();
                    return res

登录后复制

以上就是Electron.js 应用中安全地进行 SQL 数据库操作的教程的详细内容，更多请关注php中文网其它相关文章！