如何安全运行浏览器端用户输入的JavaScript 代码

原创 于 2025-01-21 11:49:31 发布 · 1.1k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #前端

安全运行浏览器端用户输入的JavaScript 代码

前端可以实现让用户输入 JavaScript 代码并在运行的功能。你可以使用 eval() 或者 new Function() 来执行 JavaScript 代码，同时结合 textarea 输入框，让用户输入代码并运行。为了增强安全性，通常需要对输入的代码做一些限制，比如运行在 iframe 沙箱环境中。

简单实现方案

使用 eval() 直接执行用户输入的 JavaScript 代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS代码执行器</title>
</head>
<body>
    <h2>JavaScript 代码执行器</h2>
    <textarea id="codeInput" rows="10" cols="50" placeholder="在这里输入JavaScript代码"></textarea><br>
    <button onclick="runCode()">运行代码</button>
    <h3>输出结果：</h3>
    <pre id="output"></pre>

    <script>
        function runCode() {
            const code = document.getElementById("codeInput").value;
            const outputElement = document.getElementById("output");
            
            try {
                const result = eval(code);
                outputElement.textContent = "结果: " + result;
            } catch (error) {
                outputElement.textContent = "错误: " + error.message;
            }
        }
    </script>
</body>
</html>

进一步优化

1. 使用 new Function()

比 eval() 更安全，避免访问外部作用域：

function runCode() {
    const code = document.getElementById("codeInput").value;
    const outputElement = document.getElementById("output");
    try {
        const func = new Function(code);
        const result = func();
        outputElement.textContent = "结果: " + result;
    } catch (error) {
        outputElement.textContent = "错误: " + error.message;
    }
}

2. 在 iframe 沙箱中运行代码

隔离执行环境，避免影响主页面：

<iframe id="sandbox" sandbox="allow-scripts"></iframe>
<script>
    function runCode() {
        const code = document.getElementById("codeInput").value;
        const sandbox = document.getElementById("sandbox").contentWindow;
        try {
            sandbox.eval(code);
        } catch (error) {
            console.error("错误:", error);
        }
    }
</script>

3. 限制访问的 API

可以用 Web Worker 或者 Proxy 限制代码访问的对象，防止恶意代码执行。

如果你的应用需要执行复杂 JavaScript 代码并保证安全性，可以考虑 Web Worker 或者 使用后端来执行代码（如 Node.js 沙箱环境）。

安全执行 JavaScript 代码的方案

在前端运行用户输入的 JavaScript 代码可能会带来安全性问题，比如：

  • 访问全局对象（window、document）导致 XSS 攻击
  • 影响页面 DOM，篡改数据
  • 进入无限循环，导致浏览器卡死
  • 访问浏览器存储（localStorage）或其他敏感信息

为了解决这些问题，通常有两种方案：

  1. 使用 Web Worker（前端沙盒环境）
  2. 使用后端（Node.js 沙箱环境）

1. 使用 Web Worker（前端沙盒）

Web Worker 提供了一个独立的执行环境，它和主线程完全隔离，不能直接访问 window、document 等 DOM 对象，因此可以一定程度上防止恶意代码修改页面结构或获取敏感信息。

Web Worker 方案

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 代码沙盒</title>
</head>
<body>
    <h2>安全 JavaScript 代码执行器</h2>
    <textarea id="codeInput" rows="10" cols="50" placeholder="输入 JavaScript 代码"></textarea><br>
    <button onclick="runCode()">运行代码</button>
    <h3>输出结果：</h3>
    <pre id="output"></pre>

    <script>
        // 创建 Web Worker
        const worker = new Worker(URL.createObjectURL(new Blob([\`
            self.onmessage = function(event) {
                try {
                    let result = eval(event.data);
                    self.postMessage({ success: true, result });
                } catch (error) {
                    self.postMessage({ success: false, error: error.message });
                }
            };
        \`], { type: 'application/javascript' })));

        function runCode() {
            const code = document.getElementById("codeInput").value;
            const outputElement = document.getElementById("output");

            worker.postMessage(code);
            worker.onmessage = function(event) {
                if (event.data.success) {
                    outputElement.textContent = "结果: " + event.data.result;
                } else {
                    outputElement.textContent = "错误: " + event.data.error;
                }
            };
        }
    </script>
</body>
</html>

Web Worker 的优点

✅ 代码在独立线程执行，不会影响主线程 UI
✅ 无法直接访问 window、document，防止修改 DOM
✅ 可以设置执行时间限制，避免无限循环卡死页面

Web Worker 的缺点

❌ 不能操作 DOM（如果需要与 DOM 交互，需用 postMessage 传输数据）
❌ 不能访问本地存储（localStorage、sessionStorage）
❌ 仍然存在 eval 执行代码的风险（可以改成 new Function）

2. 使用后端（Node.js 沙箱）

如果希望更严格控制代码执行，或者前端限制太多，可以将代码发送到后端服务器，让服务器在受限环境（沙盒）中执行，然后返回结果。

使用 Node.js vm 模块

Node.js 提供了 vm 模块，可以在受限的环境中执行 JavaScript 代码，避免用户代码影响主进程。

示例（Node.js 后端代码）

const express = require('express');
const { VM } = require('vm2');

const app = express();
app.use(express.json());

app.post('/run', (req, res) => {
    const code = req.body.code;
    const vm = new VM({
        timeout: 1000,  // 限制执行时间，防止无限循环
        sandbox: {}     // 限制访问全局对象
    });

    try {
        const result = vm.run(code);
        res.json({ success: true, result });
    } catch (error) {
        res.json({ success: false, error: error.message });
    }
});

app.listen(3000, () => console.log('服务器运行在 http://localhost:3000'));

前端调用

<script>
async function runCode() {
    const code = document.getElementById("codeInput").value;
    const response = await fetch('/run', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code })
    });

    const result = await response.json();
    document.getElementById("output").textContent = result.success ? "结果: " + result.result : "错误: " + result.error;
}
</script>

后端沙箱的优点

✅ 代码在服务器端运行，前端不会被恶意代码影响
✅ 通过 vm2 限制执行时间，防止死循环
✅ 可以完全禁用 require，避免访问文件系统或执行危险命令

后端沙箱的缺点

❌ 需要服务器资源，增加延迟
❌ 可能有高并发处理的压力
❌ 仍需防止代码绕过沙箱（如 process 访问）

结论

方案适用场景优点缺点
eval() 或 new Function()仅限信任用户，简单代码执行简单易用，直接在浏览器运行高风险，容易被恶意代码利用
Web Worker需要在前端运行代码，避免影响 UI代码在独立线程执行，不影响主线程不能操作 DOM，需要 postMessage 传输数据
iframe 沙箱需要更好的隔离，但仍然在前端代码在 iframe 中运行，无法访问主页面仍然有绕过 sandbox 的可能
后端 Node.js 沙箱需要最大安全性，防止恶意代码代码在服务器端执行，可严格限制需要服务器资源，增加延迟

如果你的项目对安全性要求高，建议使用 Node.js 沙箱 (vm2)。
如果只是前端执行代码且要防止页面崩溃，可以使用 Web Worker。
如果只是本地运行代码且不考虑安全性，可以使用 eval() 或 new Function()，但不建议直接用它们。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值