如何尽可能安全地使用Puppeteer运行任意HTML5代码？

安全阿岳

2026-8-22

基于Puppeteer运行用户任意HTML5代码并截图的最高安全实践

要在服务器上安全运行用户提交的任意HTML/CSS/JS/WASM并截图，核心思路是多层隔离+严格限制+运行时监控，以下是可落地的具体方案：

一、强隔离的运行环境（最核心防线）

直接在主服务器跑用户代码风险极高，必须用容器做完全隔离：

用Docker创建临时容器，每个用户请求对应一个独立容器，请求处理完成后立即销毁（--rm参数）。
使用最小化镜像：基于Alpine构建Puppeteer镜像，只保留Chrome、Node.js和必要依赖，减少攻击面。
严格限制容器资源：
- 内存上限：--memory 512m，防止恶意代码耗尽服务器内存。
- CPU限制：--cpus 1，避免CPU被占满导致服务不可用。
- 网络隔离：--network none，彻底禁止用户代码对外联网（如果业务必须联网，用代理做域名白名单过滤）。
- 文件系统只读：除临时目录外，容器内文件系统设为只读（--read-only --tmpfs /tmp），防止恶意代码写入文件。
非特权用户运行：容器内用nobody普通用户执行Puppeteer，避免权限泄露。

二、Puppeteer的安全配置

通过Chrome启动参数和页面设置，限制代码的权限：

容器内兼容沙箱配置：
默认Chrome沙箱在容器内可能需要额外调整，可使用--no-sandbox --disable-setuid-sandbox（仅在Docker隔离环境下使用），同时确保容器本身的隔离足够严格。

禁用危险功能：
启动Chrome时添加以下参数：

const browser = await puppeteer.launch({
  args: [
    '--disable-extensions', // 禁用扩展
    '--disable-plugins', // 禁用插件
    '--disable-file-system', // 禁用文件系统访问
    '--disable-geolocation', // 禁用定位
    '--disable-notifications', // 禁用通知
    '--disable-media-stream', // 禁用摄像头/麦克风
    '--disable-dev-shm-usage', // 解决容器内共享内存不足问题
    '--no-default-browser-check',
    '--no-first-run'
  ],
  headless: 'new', // 使用新版无头模式，安全性更高
  ignoreHTTPSErrors: false // 禁止忽略HTTPS错误，防止恶意证书攻击
});

严格限制页面权限：

// 拒绝所有敏感权限
await page.setPermission('geolocation', 'denied');
await page.setPermission('notifications', 'denied');
await page.setPermission('camera', 'denied');
await page.setPermission('microphone', 'denied');
await page.setPermission('fullscreen', 'denied');

配置Content Security Policy（CSP）：
阻止用户代码加载外部资源，仅允许必要的内联代码：

await page.setExtraHTTPHeaders({
  'Content-Security-Policy': "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline' 'unsafe-eval'; img-src data:; font-src data:"
});

三、用户代码的预处理与限制

提前过滤和限制用户提交的代码：

限制代码大小：单份代码（含WASM）不超过1MB，避免过大的文件占用资源。

覆盖危险全局API：在页面加载前注入代码，禁用可能被滥用的方法：

await page.evaluateOnNewDocument(() => {
  // 禁用跳转和新窗口
  window.open = () => {};
  window.location.href = '';
  // 禁用联网API（如果不需要联网）
  window.fetch = () => Promise.reject('Fetch disabled');
  XMLHttpRequest = function() {};
  WebSocket = function() {};
  // 限制WASM内存（如果允许WASM）
  const originalMemory = WebAssembly.Memory;
  WebAssembly.Memory = function(options) {
    // 限制最大内存为64MB（1页面=64KB，1024页面=64MB）
    options.maximum = Math.min(options.maximum || 1024, 1024);
    return new originalMemory(options);
  };
});

扫描恶意代码模式：用AST分析工具（如Esprima）检测无限循环、内存耗尽型代码，或者包含exec、spawn等Node.js危险API的代码（虽然Chrome沙箱会限制，但提前过滤更安全）。

四、运行时监控与超时控制

防止用户代码无限运行：

设置页面加载超时：

await page.goto(`data:text/html,${encodeURIComponent(userHtml)}`, {
  timeout: 10000, // 10秒超时
  waitUntil: 'networkidle2' // 等待网络空闲后再截图
});

设置全局执行超时：

page.setDefaultTimeout(15000); // 15秒后自动终止任务
// 或者用Promise.race实现截图超时
const screenshot = await Promise.race([
  page.screenshot({ fullPage: true }),
  new Promise((_, reject) => setTimeout(() => reject(new Error('Screenshot timeout')), 15000))
]);

监控容器资源：用docker stats或监控工具实时跟踪容器CPU、内存使用，超过阈值立即杀死容器。

五、数据清理与销毁

请求处理完成后，彻底清理所有痕迹：

立即关闭Puppeteer浏览器实例：
```
await browser.close();
```
容器运行结束后自动销毁（Docker的--rm参数已实现）。
临时存储的用户代码、截图文件立即删除，不保留任何残留数据。

额外注意事项

定期更新Chrome和Puppeteer版本，及时修复安全漏洞。
启用日志监控：记录每个请求的资源使用、异常信息，方便排查安全事件。
不要在容器内挂载主机目录，防止恶意代码访问主机文件。

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

如何尽可能安全地使用Puppeteer运行任意HTML5代码？

一、强隔离的运行环境（最核心防线） #

二、Puppeteer的安全配置 #

三、用户代码的预处理与限制 #

四、运行时监控与超时控制 #

五、数据清理与销毁 #