如何从HTML输入框运行JavaScript代码？

你当前的代码仅获取输入框的字符串内容并打印，要实际执行输入的代码，可以参考以下几种方案，但务必注意安全风险——执行用户输入的任意代码存在极高的安全隐患，公开环境下必须做严格的限制和隔离。

方案1：使用eval #

直接用eval执行字符串形式的代码，这是最直接的方式，但风险最高：

function runCode(){
  let code = document.getElementById('code').value;
  try {
    // 执行输入的代码
    eval(code);
  } catch (error) {
    // 捕获并输出执行错误
    console.error('代码执行出错:', error);
  }
}

注意：eval会在当前作用域执行代码，恶意代码可以窃取局部变量、操作DOM甚至发起恶意请求，绝对不能在面向未知用户的公开服务中直接使用。

方案2：使用Function构造函数 #

Function构造函数会创建一个全局作用域的函数，相比eval，它不会访问当前函数的局部变量，但依然能操作全局对象：

function runCode(){
  let code = document.getElementById('code').value;
  try {
    // 创建并执行函数
    new Function(code)();
  } catch (error) {
    console.error('代码执行出错:', error);
  }
}

方案3：用iframe做沙箱隔离 #

通过iframe创建独立的执行环境，减少对主页面的影响：

function runCode(){
  let code = document.getElementById('code').value;
  // 创建隐藏的iframe作为沙箱
  const sandboxIframe = document.createElement('iframe');
  sandboxIframe.style.display = 'none';
  document.body.appendChild(sandboxIframe);
  
  try {
    // 在iframe的环境中执行代码
    sandboxIframe.contentWindow.eval(code);
  } catch (error) {
    console.error('代码执行出错:', error);
  } finally {
    // 执行完成后移除iframe
    document.body.removeChild(sandboxIframe);
  }
}

这种方式能隔离代码对主页面DOM和全局变量的操作，但仍不是绝对安全，需配合浏览器的沙箱机制进一步限制权限：

sandboxIframe.sandbox = 'allow-scripts'; // 仅允许执行脚本，禁止其他权限

安全提示 #

如果你的在线编译器是面向公开用户的，强烈建议：

• 不要直接执行未过滤的用户代码
• 使用更安全的沙箱方案（比如Web Worker）
• 限制代码可访问的API（比如禁用fetch、localStorage等敏感API）
• 对用户输入的代码做语法校验和危险代码检测

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