Imported from jeremylongshore/tons-of-skills-marketplace (plugins/saas-packs/stackblitz-pack/skills/stackblitz-security-basics/SKILL.md). Install upstream with npx skills add jeremylongshore/tons-of-skills-marketplace --skill stackblitz-security-basics. Copyright stays with the author (MIT).

StackBlitz Security Basics

Overview

Secure WebContainer deployments: CSP headers, sandbox isolation, input validation.

Instructions

Step 1: WebContainer Security Model

WebContainers run in the browser sandbox -- no access to host filesystem, network is limited to HTTP, and all code runs in the user's browser tab. Key security points:

// WebContainers are inherently sandboxed:
// - No file system access to host
// - No raw network sockets
// - Memory isolated to browser tab
// - Cross-origin isolation via COOP/COEP headers

Step 2: Validate User Input

// If users can provide code to run in WebContainer, validate:
function sanitizeFileTree(tree: FileSystemTree): FileSystemTree {
  const sanitized: FileSystemTree = {};
  for (const [name, entry] of Object.entries(tree)) {
    // Block path traversal
    if (name.includes('..') || name.startsWith('/')) continue;
    // Block sensitive files
    if (name === '.env' || name.endsWith('.key')) continue;
    sanitized[name] = entry;
  }
  return sanitized;
}

Step 3: Content Security Policy

Content-Security-Policy: default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; frame-src https://*.webcontainer.io;

Security Checklist

• COOP/COEP headers set correctly
• User-provided code sandboxed in WebContainer
• No secrets passed to WebContainer file system
• CSP headers configured
• Input validation on file paths

Resources

• WebContainer Security

Next Steps

For production hardening, pair this checklist with stackblitz-rate-limits and stackblitz-debug-bundle.