8 песочниц в браузере без Docker: как мы изолировали выполнение кода на клиенте

Значимый прорыв формирует отрасль ИИ: Frontend-Sisyphus 28 минут назад 8 песочниц в браузере без Docker: как мы изолировали выполнение кода на клиенте Средний 11 мин 1. 3K JavaScript * TypeScript * WebAssembly * Python * SQL * Кейс Когда мы начинали работать над проектом, нам очень хотелось сделать интерактивные песочницы для кода — такие, в которых можно быстро проверить JavaScript-сниппет, прогнать SQL-запрос или поэкспериментировать с Python. Бесплатно, без рекламы и без регистрации.

Просто открываешь и пользуешься. Никаких «доступно только в Pro-версии» или «вы исчерпали лимит запусков». Но как только мы начали проектировать архитектуру, стало понятно, что желание красивое, а реальность — ящик Пандоры.

Технические детали

Дать пользователю возможность выполнять произвольный код прямо в браузере — значит открыть дверь для целого букета проблем: бесконечные циклы, XSS-векторы, попытки доступа к DOM, утечки памяти, вредоносные запросы. Каждый пункт по-своему опасен, и каждый нужно как-то закрывать. При этом мы принципиально не хотели использовать серверные рантаймы.

Никаких Docker-контейнеров, никаких выделенных виртуалок, никакого проксирования кода на бэкенд. Всё должно работать на клиенте — быстро, приватно и без затрат на инфраструктуру. Это означало, что нам нужна система изоляции, которая живёт полностью в браузере.

Причём для каждой среды — JavaScript, Python, SQL, HTML/CSS, Markdown, Bash, Regex, Cron — требуется свой подход. Где-то хватает Web Worker, где-то нужен WebAssembly с кастомной загрузкой, а где-то приходится писать эмулятор с нуля. В итоге мы построили восемь песочниц с разными методами изоляции.

Отраслевые последствия

Дальше — подробный разбор каждой: как устроена, какие угрозы закрывает и с какими граблями мы столкнулись. Web Worker и ручной таймаутJavaScript-песочница — самая очевидная и одновременно самая опасная. Дать пользователю выполнить произвольный код в основном потоке — значит разрешить ему дотянуться до DOM, window, куки и всего остального.

Поэтому первое и главное решение: код летит в отдельный Web Worker. У воркера нет доступа к DOM, document и window основного потока. Но остаются две проблемы: как перехватить вывод console.

log и как защититься от бесконечного цикла. Вместо того чтобы глушить вывод совсем, мы подменяем console. log, error, warn и info внутри воркера.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.