求助：如何在含按钮事件的HTML中执行Shell脚本？

嘿，我明白你现在遇到的问题了——在浏览器里直接用HTML/JS执行Shell脚本确实行不通，这是浏览器的安全沙箱机制在起作用，目的是防止恶意网页随意操作你的本地系统。下面我给你两种常见的解决思路，你可以根据自己的使用场景来选择：

如果你的需求是做一个网页应用，那必须借助后端服务来中转执行Shell命令，前端只负责触发请求和展示结果。这里以Python Flask为例，给你一个完整的示例：

1. 后端Flask服务代码（app.py）

from flask import Flask, request, jsonify
import subprocess
import os

app = Flask(__name__)
# 允许跨域请求（如果前端和后端不在同一端口运行）
from flask_cors import CORS
CORS(app)

@app.route('/list-folder', methods=['POST'])
def list_folder():
    # 获取前端传入的文件夹路径，必须做安全校验！
    folder_path = request.json.get('path', '.')
    # 限制只能访问指定目录，防止路径遍历攻击
    allowed_root = os.path.abspath('/your/safe/directory')
    target_path = os.path.abspath(folder_path)
    
    if not target_path.startswith(allowed_root):
        return jsonify({'error': '无权访问该目录'}), 403
    
    try:
        # Linux/macOS用ls命令，Windows换成dir
        result = subprocess.check_output(['ls', '-l', target_path], stderr=subprocess.STDOUT, text=True)
        return jsonify({'output': result})
    except subprocess.CalledProcessError as e:
        return jsonify({'error': e.output}), 500

if __name__ == '__main__':
    app.run(debug=True)

2. 前端HTML代码修改

<!DOCTYPE html>
<html>
<body>
    <button onclick="fetchFolderContent()">列出文件夹内容</button>
    <pre id="result-area"></pre>

    <script>
        async function fetchFolderContent() {
            const resultEl = document.getElementById('result-area');
            try {
                // 调用后端接口，假设后端运行在localhost:5000
                const response = await fetch('http://localhost:5000/list-folder', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({ path: '/your/safe/directory' })
                });
                const data = await response.json();
                resultEl.textContent = data.output ? data.output : '错误：' + data.error;
            } catch (err) {
                resultEl.textContent = '请求失败：' + err.message;
            }
        }
    </script>
</body>
</html>

⚠️ 重要提醒：一定要做路径安全校验，绝对不能允许前端随意传入任意系统路径，否则会带来严重的安全风险。

如果你的需求是做一个本地桌面工具，而非网页，那么可以用Electron框架——它允许前端JS通过Node.js API调用系统Shell，同时保持一定的安全性：

1. 先初始化Electron项目并安装依赖

npm init -y
npm install electron --save-dev

2. 主进程代码（main.js）

const { app, BrowserWindow, ipcMain } = require('electron');
const { exec } = require('child_process');
const path = require('path');

function createMainWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: false, // 保持禁用，通过preload做安全通信
            contextIsolation: true
        }
    });
    win.loadFile('index.html');
}

// 监听前端的命令执行请求
ipcMain.handle('run-shell-command', async (_, command) => {
    return new Promise((resolve, reject) => {
        exec(command, (err, stdout, stderr) => {
            err ? reject(stderr) : resolve(stdout);
        });
    });
});

app.whenReady().then(createMainWindow);

3. Preload脚本（preload.js，用于安全暴露API）

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('desktopAPI', {
    runCommand: (cmd) => ipcRenderer.invoke('run-shell-command', cmd)
});

4. 前端HTML代码（index.html）

<!DOCTYPE html>
<html>
<body>
    <button onclick="listCurrentDir()">列出当前目录</button>
    <pre id="output"></pre>

    <script>
        async function listCurrentDir() {
            const outputEl = document.getElementById('output');
            try {
                // 执行ls命令（Windows替换为dir）
                const output = await window.desktopAPI.runCommand('ls -l');
                outputEl.textContent = output;
            } catch (err) {
                outputEl.textContent = '执行失败：' + err;
            }
        }
    </script>
</body>
</html>

5. 在package.json中添加启动脚本

"scripts": {
    "start": "electron ."
}

运行npm start就能打开桌面应用，点击按钮即可执行Shell命令。

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