
8 песочниц в браузере без Docker: как мы изолировали выполнение кода на клиенте
Frontend-Sisyphus 28 минут назад 8 песочниц в браузере без Docker: как мы изолировали выполнение кода на клиенте Средний 11 мин 1.3K JavaScript * TypeScript * WebAssembly * Python * SQL * Кейс Когда мы начинали работать...
Anthropic — What company has the best second artificial intelligence model at the end of June?
Значимый прорыв формирует отрасль ИИ: 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 внутри воркера.
Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.





