当前位置：首页 > JavaScript

js实现沙盒

2026-01-30 21:30:45JavaScript

实现沙盒的基本概念

沙盒（Sandbox）是一种隔离环境，用于限制代码的执行权限，防止访问或修改外部环境。在JavaScript中，可通过多种方式实现沙盒，例如iframe、Web Workers、Proxy或with语句结合eval。

使用 iframe 实现沙盒

通过iframe的srcdoc属性或同源策略创建独立环境：

js实现沙盒

const iframe = document.createElement('iframe');
iframe.srcdoc = `
  <script>
    // 沙盒内代码
    window.parent.postMessage('沙盒内消息', '*');
  </script>
`;
document.body.appendChild(iframe);

// 监听沙盒消息
window.addEventListener('message', (e) => {
  console.log('收到沙盒消息:', e.data);
});

使用 Proxy 限制全局访问

通过Proxy拦截对全局对象的访问：

js实现沙盒

function createSandbox(code) {
  const globals = new Proxy(window, {
    get(target, prop) {
      if (prop === 'document' || prop === 'window') {
        throw new Error('禁止访问全局对象');
      }
      return target[prop];
    }
  });
  (new Function('globals', code))(globals);
}

createSandbox(`
  console.log(globals.Array); // 允许访问
  console.log(globals.document); // 抛出错误
`);

使用 Web Workers

通过Web Workers在独立线程中运行代码：

const workerCode = `
  self.onmessage = (e) => {
    console.log('Worker收到:', e.data);
    postMessage('Worker响应');
  };
`;
const blob = new Blob([workerCode], { type: 'text/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

worker.onmessage = (e) => console.log('主线程收到:', e.data);
worker.postMessage('主线程消息');

使用 with 和 eval（不推荐）

通过with和eval模拟作用域隔离，需严格过滤输入：

function sandboxedEval(code, context) {
  const ctx = Object.create(null);
  Object.assign(ctx, context);
  with (ctx) {
    return eval(code);
  }
}

sandboxedEval('console.log(foo)', { foo: '安全变量' });