概念
沙箱（sandbox）是一个安全机制，用于隔离运行代码，以防止代码对其它部分的应用程序或系统造成不必要的影响或安全风险。沙箱提供了一个受控环境，在这个环境中，代码可以被执行而不影响外部环境，从而保护用户数据和系统安全。
使用场景
在 JavaScript 中，沙箱通常用于隔离和控制代码执行的环境，以确保代码运行在一个安全的、受限制的环境中，避免对主环境造成潜在的损害。
- 执行第三方 js：执行第三方 js 的时候，而这份 js 文件又不一定可信的时候；
- 在线代码编辑器：代码的执行，基本都会放置在沙箱中，防止对页面本身造成影响；
- Web 应用安全: 在浏览器中运行来自不同来源的 JavaScript 代码时，沙箱可以限制这些代码的权限，防止恶意代码访问敏感资源或执行危险操作；
- 插件和第三方脚本: 当 Web 应用需要加载和执行第三方插件或脚本时，通过沙箱可以限制这些脚本的访问权限，保护主应用的安全和数据；
- jsonp：解析服务器所返回的 jsonp 请求时，如果不信任 jsonp 中的数据，可以通过创建沙箱的方式来解析获取数据；
实现
1. iframe
使用 iframe 创建沙箱环境是 Web 开发中常见的一种技术，它允许你在当前页面内嵌套一个完全独立的 HTML 页面。这种方法可以有效隔离 JavaScript 执行环境，防止脚本访问主页面的 DOM 或 JavaScript 环境，从而提高安全性。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<iframe id="sandbox" style="display: none"></iframe>
<script src="index.js"></script>
</body>
</html>
// index.js
function createSandbox(callback) {
const iframe = document.getElementById('sandbox');
if (!iframe) {
return console.error('沙箱iframe未找到');
}
// 确保iframe完全加载后再执行代码
iframe.onload = function () {
const iframeWindow = iframe.contentWindow;
// 在沙箱环境中定义一些安全的全局变量或函数，如果需要的话
iframeWindow.safeGlobalVar = {
/* 安全的数据或方法 */
};
// 执行回调函数，传入沙箱的window对象，以便在其中执行代码
callback(iframeWindow);
};
// 重新加载iframe以确保环境清洁
iframe.src = 'about:blank';
}
// 使用沙箱
createSandbox(function (sandboxWindow) {
// 在沙箱环境中执行代码
sandboxWindow.eval('console.log("Hello from the sandbox!");');
});
2. Web Worker
使用 Web Workers 作为沙箱的方法，通过动态创建一个 Blob 对象来包含你想在 Worker 中执行的 JavaScript 代码，然后使用这个 Blob 对象创建一个 Worker。这种方式的好处是它允许你动态地执行任意的 JavaScript 代码，同时确保这些代码在一个与主页面环境隔离的 Worker 中运行，提供了一种隔离执行代码的手段。
代码示例：
function workerSandbox(appCode) {
var blob = new Blob([appCode]);
var appWorker = new Worker(window.URL.createObjectURL(blob));
}
workerSandbox('const a = 1;console.log(a);'); // 输出1
console.log(a); // a not defined
3. with + new Function
在 JavaScript 中，使用 with 语句和 new Function 可以创建一个简单的沙箱环境。这种方式可以限制代码运行时的作用域，防止它访问全局变量或执行不安全的操作。
with 语句允许你指定一个对象作为代码执行的作用域，new Function 可以让你动态地创建函数。
unction createSandbox(code) {
// 创建一个空对象，用作沙箱环境中的全局对象
const sandbox = {};
// 使用with语句将代码的作用域设置为这个空对象
// 使用new Function创建一个新的函数，限制代码访问外部作用域，只能访问sandbox内的变量和函数
const script = new Function("sandbox", `with(sandbox) { ${code} }`);
// 执行这个函数，并传入sandbox作为参数
return function () {
script(sandbox);
};
}
// 使用沙箱环境
const sandboxedScript = createSandbox(
'console.log("Hello from the sandbox!"); var x = 10;'
);
sandboxedScript(); // 输出: Hello from the sandbox!
console.log(typeof x); // 输出: undefined，因为 x 是在沙箱内部定义的，外部访问不到
