JS沙箱

概述

JS 沙盒（JavaScript Sandbox）是一种通过限制代码执行环境、隔离资源访问权限，来防止不可信代码对主程序或系统造成破坏的技术。在实际开发中，JS 沙盒被广泛应用于需要运行未知或不可信代码的场景，具体的应用场景有：

前端第三方脚本隔离（如广告、统计、插件）

低代码 / 无代码平台（用户自定义逻辑执行）

在线代码编辑器 / IDE（如 CodePen、JSFiddle）

Node.js 中执行不可信代码（如用户提交的脚本、自动化任务）

具体详解可展开查看

一、前端第三方脚本隔离（如广告、统计、插件）

背景：前端页面常需要嵌入第三方脚本（如广告 SDK、统计工具、用户自定义插件），这些脚本可能包含恶意代码（如窃取 Cookie、篡改 DOM、发起恶意请求），需通过沙盒限制其权限。

实现方式：

iframe 沙盒
利用浏览器原生的 <iframe> 标签及其 sandbox 属性，为第三方脚本创建隔离的执行环境。sandbox 属性可限制脚本的权限（如禁止操作父页面 DOM、禁止读取 Cookie、禁止发起跨域请求等）。
示例：

html

<!-- 主页面 -->
<iframe 
  src="third-party-script.html" 
  sandbox="allow-scripts allow-same-origin"  <!-- 仅允许执行脚本和同域访问，禁止其他权限 -->
  id="sandboxFrame"
></iframe>

<script>
  // 主页面与沙盒 iframe 通信（通过 postMessage，避免直接暴露全局对象）
  const frame = document.getElementById('sandboxFrame');
  frame.contentWindow.postMessage({ type: 'getData', data: 'xxx' }, 'https://trusted-domain.com');

  // 监听沙盒返回的消息（验证来源，防止恶意消息）
  window.addEventListener('message', (e) => {
    if (e.origin !== 'https://trusted-domain.com') return; // 只处理可信来源的消息
    console.log('沙盒返回数据：', e.data);
  });
</script>

关键：通过 sandbox 限制权限（如 allow-scripts 允许执行脚本，allow-same-origin 允许同域访问，默认完全禁止），并通过 postMessage 实现主页面与沙盒的安全通信。

基于 Proxy 的全局对象代理
对于不需要完全隔离到 iframe 的场景（如轻量插件），可通过 Proxy 代理全局对象（window、document），拦截恶意操作（如禁止修改 document.cookie、限制 fetch 域名）。
示例：

javascript

// 创建沙盒上下文，代理全局对象
const sandboxGlobal = new Proxy(window, {
  get(target, prop) {
    // 禁止访问敏感属性（如 cookie、localStorage）
    if (prop === 'cookie' || prop === 'localStorage') {
      throw new Error('禁止访问敏感属性');
    }
    return target[prop];
  },
  set(target, prop, value) {
    // 禁止修改关键 DOM 节点（如 body）
    if (prop === 'body' && target[prop] !== value) {
      throw new Error('禁止修改 body');
    }
    target[prop] = value;
  }
});

// 在沙盒中执行第三方脚本（用 with 绑定上下文，或通过 Function 传入代理对象）
const untrustedCode = `console.log(window.document.title); window.cookie = 'x=1';`;
new Function('window', untrustedCode)(sandboxGlobal); // 执行时会抛出“禁止访问敏感属性”错误

二、低代码/无代码平台（用户自定义逻辑执行）

背景：低代码平台允许用户通过可视化配置或编写 JS 片段（如表单校验逻辑、流程触发条件）自定义业务逻辑，这些代码需在沙盒中运行，防止污染平台核心环境或执行危险操作（如删除数据库）。

实现方式：

受限执行环境 + 白名单 API
为用户代码创建独立的执行上下文，仅暴露平台允许的 API（如有限的工具函数、数据操作方法），禁止访问全局对象（window、document）或 Node.js 核心模块（fs、child_process）。
示例（前端低代码平台）：

javascript

// 定义允许用户调用的白名单 API
const allowedApis = {
  add: (a, b) => a + b,
  log: (msg) => console.log(`用户日志：${msg}`),
  // 仅暴露安全的工具函数，禁止 IO、DOM 操作
};

// 创建沙盒函数，将用户代码与白名单 API 绑定
function runUserCode(userCode) {
  try {
    // 用 Function 构造函数隔离作用域，仅传入 allowedApis 作为参数
    const userFn = new Function(...Object.keys(allowedApis), userCode);
    userFn(...Object.values(allowedApis)); // 执行用户代码，仅能访问 allowedApis 中的方法
  } catch (e) {
    console.error('用户代码执行错误：', e);
  }
}

// 执行用户代码（只能调用 add 和 log）
runUserCode(`
  const sum = add(1, 2);
  log('计算结果：' + sum); // 正常执行
  window.alert('恶意操作'); // 报错：window 未定义
`);

Node.js 环境低代码平台
若低代码平台运行在 Node.js 后端（如服务端流程引擎），需用更强的沙盒工具（如 vm2）隔离用户代码，防止访问文件系统、网络等资源。
示例（基于 vm2）：

javascript

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

// 创建沙盒，仅允许访问指定模块和方法
const vm = new VM({
  timeout: 1000, // 限制执行时间（防止死循环）
  sandbox: { allowedApis: { add: (a, b) => a + b } }, // 沙盒内的全局对象
  require: { enabled: false } // 禁止使用 require（防止加载危险模块）
});

// 执行用户代码（只能访问 sandbox 中的 allowedApis）
try {
  vm.run(`
    const sum = allowedApis.add(3, 4);
    if (sum > 5) { console.log('sum 大于 5'); }
    require('fs').readFileSync('/etc/passwd'); // 报错：require 未定义
  `);
} catch (e) {
  console.error('用户代码执行错误：', e);
}

三、在线代码编辑器/IDE（如 CodePen、JSFiddle）

背景：在线代码编辑器允许用户实时输入并运行 JS 代码，需确保用户代码不会破坏编辑器本身（如删除页面 DOM、窃取其他用户数据），同时提供安全的运行环境。

实现方式：

iframe + 完全隔离
将用户代码的执行环境放在独立的 iframe 中，通过 sandbox="allow-scripts" 限制权限（禁止访问父页面、禁止跨域请求），并通过 postMessage 传递代码执行结果。
关键：iframe 与主页面完全隔离，用户代码无法突破 iframe 访问主页面资源。

Web Worker 沙盒
对于纯逻辑代码（无 DOM 操作），可使用 Web Worker 隔离执行，避免阻塞主线程，同时限制其访问 window 等全局对象（Web Worker 中无法直接操作 DOM，只能通过 postMessage 通信）。
示例：

javascript

// 主线程
const worker = new Worker('sandbox-worker.js');
worker.postMessage({ code: `console.log('用户代码执行'); 1 + 2` }); // 发送用户代码
worker.onmessage = (e) => console.log('执行结果：', e.data);

// sandbox-worker.js（子线程）
self.onmessage = (e) => {
  try {
    // 在 Worker 中执行用户代码（无 DOM 权限，无法访问 window）
    const result = eval(e.data.code); // 简单场景用 eval，复杂场景需更安全的方式
    self.postMessage(result);
  } catch (e) {
    self.postMessage({ error: e.message });
  }
};

四、Node.js 中执行不可信代码（如用户提交的脚本、自动化任务）

背景：Node.js 环境中若需执行用户提交的 JS 代码（如自动化测试脚本、插件任务），需严格限制其对文件系统、网络、进程的访问（防止删除文件、发起 DDoS 攻击）。

实现方式：

vm2 库（增强版沙盒）
Node.js 内置的 vm 模块隔离性较弱（存在沙盒逃逸风险，如通过原型链污染访问外部对象），而 vm2 是基于 vm 模块的增强库，提供更强的隔离性，支持限制 require、拦截全局对象访问。
示例：

javascript

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

// 限制用户代码只能访问指定模块和方法
const vm = new VM({
  timeout: 500, // 最大执行时间（防止死循环）
  sandbox: { /* 沙盒内的全局变量，默认空 */ },
  require: {
    enabled: true,
    whitelist: ['lodash'], // 仅允许加载 lodash 模块
    mock: { fs: { readFile: () => '禁止读取文件' } } //  mock 危险模块（如 fs 禁止实际读取）
  }
});

try {
  // 执行用户代码（无法访问 fs 原始方法，只能用 mock 的 readFile）
  const result = vm.run(`
    const _ = require('lodash');
    const fs = require('fs');
    fs.readFile(); // 返回 '禁止读取文件'
    _.sum([1, 2, 3]); // 正常执行，返回 6
  `);
  console.log('执行结果：', result);
} catch (e) {
  console.error('执行失败：', e);
}

容器化隔离（如 Docker）
对于极高风险的场景（如执行未知脚本），可结合 Docker 容器隔离：将用户代码放在独立的 Docker 容器中执行，容器内仅包含必要的运行环境，执行完成后销毁容器，从系统层面隔离风险。

五、安全考量与最佳实践

最小权限原则：仅向沙盒开放必要的 API（如禁止默认允许 allow-top-navigation 防止 iframe 跳转父页面）。
防止沙盒逃逸：避免在沙盒中暴露主环境的引用（如 parent、window.top），定期更新沙盒库（如 vm2 修复已知漏洞）。
限制执行时间：通过 timeout 机制防止恶意代码（如死循环）耗尽资源。
输入校验：对沙盒与主环境的通信数据（如 postMessage 消息）进行来源验证和格式校验，防止注入攻击。

总结

JS 沙盒的核心价值是“隔离不可信代码”，其应用场景覆盖前端第三方脚本、低代码平台、在线编辑器、Node.js 代码执行等。实际使用中需根据场景选择合适的技术（iframe、Proxy、Web Worker、vm2 等），并结合最小权限原则和安全校验，平衡功能需求与安全性。

目前项目中使用案例：企业级系统中需要在网页上同时集成百度地图和高德地图的搜索功能

两个地图插件需独立运行，互不干扰，且不能影响主系统，但由于两个地图API可能存在全局变量冲突、事件系统干扰或资源竞争等问题，使用JS沙箱技术进行隔离是非常必要的。

一、主要问题

全局变量冲突：百度地图SDK和高德地图SDK可能都定义了BMap、AMap等全局变量。
事件系统干扰：两个地图的事件监听可能相互覆盖或触发异常。
资源竞争：如DOM操作冲突、CSS样式冲突等。
性能影响：未隔离的插件可能导致内存泄漏或占用过多资源。

二、沙箱技术选型

针对地图插件的特点，推荐以下沙箱方案：

iframe沙箱（推荐）
- 隔离级别：高（完全独立的window和document）
- 实现难度：中等
- 适用场景：需要彻底隔离的第三方插件
基于Proxy的全局对象代理
- 隔离级别：中（可拦截大部分全局访问）
- 实现难度：高
- 适用场景：轻量级隔离，允许部分共享资源
WebWorker隔离
- 隔离级别：高（独立线程）
- 实现难度：高
- 适用场景：纯逻辑处理，不涉及DOM操作（不适用于地图插件）

三、iframe沙箱实现方案

Vue3 中使用 JS 沙箱隔离百度/高德地图插件的案例分析

在 Vue3 项目中集成多个地图插件时，为避免全局变量冲突和资源竞争，可以使用 JS 沙箱技术实现安全隔离。

架构设计

核心思路：

创建两个独立的 iframe 沙箱，分别加载百度地图和高德地图
使用 Vue3 组件封装地图容器，通过 postMessage 与沙箱通信
实现统一的搜索接口，让用户可以同时在两个地图上搜索
提供地图切换功能，保持用户体验一致性

实现方案

1. 创建地图沙箱组件

首先创建一个通用的 MapSandbox.vue 组件，用于加载地图沙箱页面：

vue

<!-- components/MapSandbox.vue -->
<template>
  <div class="map-sandbox">
    <iframe
      ref="iframeRef"
      :src="sandboxUrl"
      :sandbox="sandboxOptions"
      class="map-frame"
      @load="handleIframeLoad"
    ></iframe>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';

interface Props {
  sandboxUrl: string;
  mapType: 'baidu' | 'amap';
  initialKeyword?: string;
}

const props = withDefaults(defineProps<Props>(), {
  initialKeyword: ''
});

const emit = defineEmits<{
  (event: 'map-ready'): void;
  (event: 'search-result', result: any[]): void;
}>();

const iframeRef = ref<HTMLIFrameElement | null>(null);
const isReady = ref(false);

// 沙箱权限配置
const sandboxOptions = 'allow-scripts allow-same-origin';

// 向沙箱发送消息
const postMessage = (message: any) => {
  if (iframeRef.value && isReady.value) {
    iframeRef.value.contentWindow?.postMessage(message, '*');
  }
};

// 处理iframe加载完成事件
const handleIframeLoad = () => {
  isReady.value = true;
  emit('map-ready');
  
  // 如果有初始搜索关键词，立即搜索
  if (props.initialKeyword) {
    search(props.initialKeyword);
  }
};

// 搜索方法
const search = (keyword: string) => {
  postMessage({
    type: 'search',
    keyword
  });
};

// 监听搜索关键词变化
watch(() => props.initialKeyword, (newKeyword) => {
  if (newKeyword && isReady.value) {
    search(newKeyword);
  }
});

// 监听沙箱返回的消息
const handleMessage = (event: MessageEvent) => {
  if (event.data.type === 'searchResult' && event.data.source === props.mapType) {
    emit('search-result', event.data.result);
  }
};

onMounted(() => {
  window.addEventListener('message', handleMessage);
});

onUnmounted(() => {
  window.removeEventListener('message', handleMessage);
});

// 暴露搜索方法给父组件
defineExpose({
  search
});
</script>

<style scoped>
.map-frame {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

2. 创建地图管理组件

接下来创建 MapManager.vue 组件，管理两个地图沙箱并提供统一的搜索界面：

vue

<!-- components/MapManager.vue -->
<template>
  <div class="map-manager">
    <div class="search-bar">
      <input
        v-model="searchKeyword"
        type="text"
        placeholder="输入搜索关键词"
        @keyup.enter="handleSearch"
      />
      <button @click="handleSearch">搜索</button>
      <select v-model="activeMap">
        <option value="baidu">百度地图</option>
        <option value="amap">高德地图</option>
      </select>
    </div>
    
    <div class="map-container">
      <MapSandbox
        v-if="activeMap === 'baidu'"
        :sandboxUrl="baiduMapUrl"
        :mapType="'baidu'"
        :initialKeyword="searchKeyword"
        @map-ready="handleMapReady('baidu')"
        @search-result="handleSearchResult('baidu', $event)"
        ref="baiduMapRef"
      />
      
      <MapSandbox
        v-if="activeMap === 'amap'"
        :sandboxUrl="amapUrl"
        :mapType="'amap'"
        :initialKeyword="searchKeyword"
        @map-ready="handleMapReady('amap')"
        @search-result="handleSearchResult('amap', $event)"
        ref="amapRef"
      />
    </div>
    
    <div class="result-panel">
      <h3>{{ activeMap === 'baidu' ? '百度地图搜索结果' : '高德地图搜索结果' }}</h3>
      <ul>
        <li v-for="(item, index) in searchResults" :key="index">
          {{ item.name }} - {{ item.address }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue';
import MapSandbox from './MapSandbox.vue';

const baiduMapUrl = '/sandbox/baidu-map.html'; // 百度地图沙箱页面URL
const amapUrl = '/sandbox/amap-map.html'; // 高德地图沙箱页面URL

const searchKeyword = ref('');
const activeMap = ref<'baidu' | 'amap'>('baidu');
const searchResults = ref<any[]>([]);
const mapReadyStates = reactive({
  baidu: false,
  amap: false
});

const baiduMapRef = ref<InstanceType<typeof MapSandbox> | null>(null);
const amapRef = ref<InstanceType<typeof MapSandbox> | null>(null);

// 处理地图准备就绪事件
const handleMapReady = (mapType: 'baidu' | 'amap') => {
  mapReadyStates[mapType] = true;
  console.log(`${mapType}地图已准备就绪`);
};

// 处理搜索结果
const handleSearchResult = (mapType: 'baidu' | 'amap', results: any[]) => {
  if (mapType === activeMap.value) {
    searchResults.value = results;
  }
};

// 执行搜索
const handleSearch = () => {
  if (!searchKeyword.value.trim()) return;
  
  const currentMapRef = activeMap.value === 'baidu' ? baiduMapRef.value : amapRef.value;
  currentMapRef?.search(searchKeyword.value);
};

// 监听地图切换
const handleMapChange = () => {
  // 如果新地图已经准备好，立即执行搜索
  if (mapReadyStates[activeMap.value]) {
    handleSearch();
  }
};

// 监听地图切换
watch(activeMap, handleMapChange);

onMounted(() => {
  // 初始搜索
  if (searchKeyword.value) {
    handleSearch();
  }
});
</script>

<style scoped>
.map-manager {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.search-bar {
  padding: 10px;
  background-color: #f5f5f5;
  display: flex;
  gap: 10px;
}

.map-container {
  flex: 1;
  min-height: 400px;
  border: 1px solid #ccc;
  margin: 10px;
}

.result-panel {
  padding: 10px;
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid #ccc;
}
</style>

3. 创建地图沙箱 HTML 页面

下面是百度地图和高德地图的沙箱 HTML 页面，分别保存为 public/sandbox/baidu-map.html 和 public/sandbox/amap-map.html：

百度地图沙箱页面：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>百度地图沙箱</title>
  <script src="https://api.map.baidu.com/api?v=3.0&ak=您的百度地图AK"></script>
  <style>
    body, html, #map-container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="map-container"></div>
  
  <script>
    let map, searchService;
    
    function initMap() {
      map = new BMap.Map("map-container");
      const point = new BMap.Point(116.404, 39.915); // 默认北京坐标
      map.centerAndZoom(point, 15);
      
      searchService = new BMap.LocalSearch(map, {
        onSearchComplete: function(results) {
          if (searchService.getStatus() === BMAP_STATUS_SUCCESS) {
            const resultData = [];
            for (let i = 0; i < results.getCurrentNumPois(); i++) {
              const poi = results.getPoi(i);
              resultData.push({
                name: poi.title,
                address: poi.address,
                location: {
                  lng: poi.point.lng,
                  lat: poi.point.lat
                }
              });
            }
            
            // 向父窗口发送搜索结果
            window.parent.postMessage({
              type: 'searchResult',
              source: 'baidu',
              result: resultData
            }, '*');
          }
        }
      });
    }
    
    // 监听父窗口消息
    window.addEventListener('message', function(event) {
      if (event.data.type === 'search') {
        searchService.search(event.data.keyword);
      }
    });
    
    window.onload = initMap;
  </script>
</body>
</html>

高德地图沙箱页面：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>高德地图沙箱</title>
  <script src="https://webapi.amap.com/maps?v=2.0&key=您的高德地图KEY"></script>
  <style>
    body, html, #map-container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="map-container"></div>
  
  <script>
    let map, placeSearch;
    
    function initMap() {
      map = new AMap.Map('map-container', {
        zoom: 15,
        center: [116.397428, 39.90923] // 默认北京坐标
      });
      
      AMap.plugin('AMap.PlaceSearch', function() {
        placeSearch = new AMap.PlaceSearch({
          map: map
        });
      });
    }
    
    // 监听父窗口消息
    window.addEventListener('message', function(event) {
      if (event.data.type === 'search') {
        placeSearch.search(event.data.keyword, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            const resultData = [];
            result.poiList.pois.forEach(poi => {
              resultData.push({
                name: poi.name,
                address: poi.address,
                location: {
                  lng: poi.location.lng,
                  lat: poi.location.lat
                }
              });
            });
            
            // 向父窗口发送搜索结果
            window.parent.postMessage({
              type: 'searchResult',
              source: 'amap',
              result: resultData
            }, '*');
          }
        });
      }
    });
    
    window.onload = initMap;
  </script>
</body>
</html>

使用方法

在主应用中使用 MapManager 组件：

vue

<!-- App.vue -->
<template>
  <div id="app">
    <h1>地图搜索集成系统</h1>
    <MapManager />
  </div>
</template>

<script setup>
import MapManager from './components/MapManager.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

四、方案优势与关键点

彻底隔离：iframe 沙箱确保两个地图 SDK 运行在独立环境中，避免全局变量冲突。
安全通信：通过postMessage实现主页面与iframe的安全通信，避免直接暴露全局对象，防止 XSS 攻击。
统一接口：提供一致的搜索 API，简化上层应用开发。
可控加载：可以控制地图SDK的加载时机和资源使用，优化性能。
灵活扩展：可以轻松添加更多地图服务商（如谷歌地图）而不影响现有系统。

五、注意事项与优化建议

跨域问题：确保iframe页面与主页面同源，否则需要配置CORS。
性能优化：
- 初始加载时可以只加载一个地图iframe，用户切换时再加载另一个
- 使用iframe sandbox的细粒度权限控制（如禁止表单提交、弹窗等）
错误处理：
- 监听iframe的错误事件（iframe.onerror）
- 实现超时机制，防止地图SDK加载失败导致页面卡死
安全加固：
- 验证postMessage的来源（event.origin）
- 对传递的数据进行严格格式校验，防止XSS攻击
交互优化：
- 实现地图间的位置同步（如点击百度地图某点，高德地图同步显示）
- 缓存搜索结果，提高用户体验

通过这种iframe沙箱方案，可以在一个系统中安全、高效地集成多个地图服务商的功能，同时保持各插件的独立性和稳定性。

JS沙箱 ​

一、前端第三方脚本隔离（如广告、统计、插件） ​

二、低代码/无代码平台（用户自定义逻辑执行） ​

三、在线代码编辑器/IDE（如 CodePen、JSFiddle） ​

四、Node.js 中执行不可信代码（如用户提交的脚本、自动化任务） ​

五、安全考量与最佳实践 ​

总结 ​

一、主要问题 ​

二、沙箱技术选型 ​

三、iframe沙箱实现方案 ​

Vue3 中使用 JS 沙箱隔离百度/高德地图插件的案例分析 ​

架构设计 ​

实现方案 ​

1. 创建地图沙箱组件 ​

2. 创建地图管理组件 ​

3. 创建地图沙箱 HTML 页面 ​

使用方法 ​

四、方案优势与关键点 ​

五、注意事项与优化建议 ​

JS沙箱

一、前端第三方脚本隔离（如广告、统计、插件）

二、低代码/无代码平台（用户自定义逻辑执行）

三、在线代码编辑器/IDE（如 CodePen、JSFiddle）

四、Node.js 中执行不可信代码（如用户提交的脚本、自动化任务）

五、安全考量与最佳实践

总结

一、主要问题

二、沙箱技术选型

三、iframe沙箱实现方案

Vue3 中使用 JS 沙箱隔离百度/高德地图插件的案例分析

架构设计

实现方案

1. 创建地图沙箱组件

2. 创建地图管理组件

3. 创建地图沙箱 HTML 页面

使用方法

四、方案优势与关键点

五、注意事项与优化建议