Топ-5 песочниц для веб-разработки
Песочницы — это редакторы кода, представляющие собой изолированное пространство и работающие онлайн. Благодаря им можно сразу увидеть, как работает написанная программа.
В песочнице вы можете реализовать как фрагмент кода, так и проект полностью. Есть сервисы, которые позволяют осуществлять командную работу, т.е. работать над одним ПО не в одиночку, а одновременно нескольким программистам. Например, JSFiddle и т.п.
Песочницы стали массово распространяться с 2010 года. Сейчас многие из них превосходят привычное понимание и в дополнение к пространству для кодинга становятся аналогом сообщества веб-программистов. Т.е. внутри этих ресурсов можно не только создавать ПО, но и общаться с разработчиками, загружать свои проекты в галерею, а также подписываться на специалистов, которые вам нравятся.
Для чего используются песочницы?
Основная задача песочниц – предоставить пользователю удобное и надежное место для создания программного обеспечения. В них можно как учиться кодить, так и работать над реальными рабочими заданиями. Но не забывайте, что часто на этих ресурсах проекты публикуются только с открытым исходным кодом, а раз доступ свободный, это значит, что результаты вашего труда смогут увидеть другие зарегистрированные разработчики.
Код, написанный в песочнице, без проблем загружается в Stack Overflow . Так программист получает возможность показать свой проект товарищам и при необходимости обратиться к ним за помощью. Либо наоборот: дать совет кому-либо, подсказать возможный вариант решения проблемы.
Ряд онлайн-редакторов кода даже формируют ленты с популярными примерами программ. Такая функция есть, например, у Codepen, Plunker. Так как код находится в открытом доступе, вы сможете без ограничений искать вдохновение и перенимать опыт. Кроме того, песочницы позволяют просматривать структуру программы и отрисовку итога в браузере, поэтому лучше сразу добавляйте ссылки на свои проекты в портфолио.
CodePen – страница с трендами
CodePen
Это не только редактор кода, но и полноценное сообщество разработчиков. CodePen выглядит как страница, поделенная на 4 окна. В первых трех находятся рабочие области, где создаются и изменяются HTML, CSS и JS, а четвертое – это окно просмотра, в котором показываются результаты выполнения программы.
Пример игры, выполняемой непосредственно в CodePen
Большой плюс сервиса – гибкие настройки. Тут можно выбирать препроцессор, подключать разные библиотеки для JS и применять различные фреймворки. На CodePen вы также можете делать новые шаблоны и экспортировать код.
Окно с настройками программы в CodePen
Раздел «Тренды» стал одной из основных особенностей данного ресурса. Он представляет собой ленту, в которой публикуются работы всех пользователей. Здесь можно искать идеи, изучать их реализацию, сохранять понравившиеся проекты и оформлять подписку на другие аккаунты в CodePen.
JSFiddle
Функционал этой песочницы очень схож с CodePen. Тут тоже можно настраивать редактор, использовать валидатор, чтобы проверять код, переключаться между языками программирования и процессорами. Но самое главное, что предлагает JSFiddle – это обширный выбор таких инструментов, как библиотеки и фреймворки.
Сервис не содержит блога с качественными и интересными работами, зато им удобно пользоваться для командной работы с коллегами в режиме онлайн. Для этого достаточно разослать им ссылку на созданный проект.
Раньше минусом данной песочницы было то, что предпросмотр запускался исключительно вручную. Но сейчас проблему устранили, добавив автообновление панели просмотра. Тем не менее, пока на JSFiddle не функционирует загрузка изображений: для добавления картинки ее сперва необходимо загрузить на внешний сервис.
Пример шаблона программного проекта на JSFiddle
Plunker
Обыкновенный редактор кода, но с добавленным окном предварительного просмотра. Для начала работы выберите библиотеку, в затем, в уже запустившемся сервисе, добавляйте npm-пакеты и настраивайте препроцессоры стилей.
На Plunker есть своя галерея работ. Кроме того, в этой песочнице файлы загружаются без внешних ресурсов: их нужно просто перетащить с устройства в дерево файлов сервиса.
Пример проекта из галереи программ Plunker
StackBlitz
Редактор кода, основанный на Visual Studio. В нем вы сможете использовать различные инструменты и устанавливать одновременно несколько npm-пакетов. А чтобы песочница сама нашла пропущенные пакеты, просто скопируйте фрагмент кода и добавьте его в редактор. Удобство StackBlitz заключается в наличии оффлайн режима для работы – т.е. с ним отсутствие подключения к Интернету не станет для вас преградой.
Имеющиеся в StackBlitz инструменты
CodeSandbox
Этот сервис удобно использовать как для написания небольших фрагментов кода, так и для создания крупного группового проекта. Сервис связан с GitHub, так что вы сможете загружать материалы из репозиториев и использовать их в песочнице. В обратном порядке этот процесс также работает.
CodeSandbox предлагает множество фреймворков. Он удобен в использовании, содержит раздел с интересными проектами, а также позволяет изучать код других пользователей и обращаться к ним с вопросами через Discord.
Окно с программным кодом в CodeSandbox
Помогает ли песочница разработчику в работе?
Как мы уже говорили, онлайн-редакторы можно использовать не только при создании личных проектов, но и для решения задач командой. Кроме того, они позволяют находить готовые решения и тестировать код. Песочницы облегчают взаимодействие айтишников с заказчиками в случаях, когда требуется согласовать вариант воплощения задачи, например, выбрать модель поведения кнопки и добавить анимацию. Таким образом, песочницы точно способны облегчить работу любому программисту.
В чем минус песочниц для новичков?
Главным недостатком таких ресурсов для начинающих специалистов можно назвать то, что они дают возможность создавать код, но при этом не предоставляют никаких инструкций и подсказок. Поэтому без определенного объема знаний в сфере верстки и разработки ПО работать с ними не получится.
Другой минус – это доступность открытых шаблонов. Т.е. велик соблазн просто скопировать чужой проект или его фрагмент, даже не разбираясь в коде и не внося никаких изменений. Это нехорошо, т. к. начинающим разработчикам очень важно понимать все тонкости работы программного обеспечения и учиться создавать его самостоятельно.
Больше интересных новостей
Полезные инструменты для веб-разработки в 2021 году
Что выбрать C++ или C#? С чего лучше начать?
Самые высокооплачиваемые языки программирования на 2022 год: ТОП-6
7 лучших книг по программированию
Запускаем сторонний код в песочнице
Как гласит статья из Википедии, Песочница — механизм для безопасного исполнения программ. Песочницы часто используют для запуска непротестированного кода, непроверенного кода из неизвестных источников, а также для запуска и обнаружения вирусов.
Представим, что у нас стоит задача: есть какой-то проект и пользователи могут под него писать свои скрипты (виджеты, дополнения, плагины). Мы хотим, чтобы пользовательские скрипты не делали ничего плохого (кража кук это меньшее, что они могут сделать).
В статье пойдет речь об атаках, которые могут совершать злоумышленники и о методах безопасного выполнения стороннего кода.
Начнем с тех видов атак, которые мы должны предотвратить.
Виды атак
Далее идет целая куча «векторов атак» с примерами (по ссылкам оригинальная статья), если вам не интересно расширить кругозор — пролистайте в конец поста. Атаки не кроссбраузерные.
Array.prototype[4] = 'four'; var a1 = []; alert('a1 has length ' + a1.length + ' but element 4 is ' + a1[4]); var a2 = new Array(5); alert('a2 has length ' + a2.length + ' and its element 4 is also ' + a2[4]);EvalArbitraryCodeExecution — eval и конструктор Function могут выполнять сторонний код
eval('alert("your cookie is " + document.cookie)'); (new Function('alert("your cookie is " + document.cookie)'))();ArgumentsMaskedByVar — массив аргументов функции маскируется под var arguments в Opera
(function (a, b, c) < var arguments = [1, 1, 1]; alert('arguments[0] === ' + arguments[0] + ', a=' + a); arguments[0] = 2; alert('arguments[0] === ' + arguments[0] + ', a=' + a); >)(0, 0, 0);CrossScopeParameterModification — массив arguments позволяет менять свои параметры
(function (a) < arguments[0] = 1; alert('a=' + a); >)(0);>ArgumentsExposesCaller — возможно вытащить аргументы внешней функции, используя caller
function untrusted() < alert('got function ' + untrusted.caller + ' : ' + arguments.callee.caller.arguments[0]); >(function trusted() < untrusted(); >)(4);FunctionMemberCrossScopeParameterAccess — возможно заменить аргументы внешней функции, из внутренней функции
function f(a) < g(); alert(a); >function g() < f.arguments[0] = 1; >f(0)TypeofInconsistent — баг typeof с регулярными выражениями в вебкитах
'function' === (typeof /./) 'function' === (typeof alert)InaccessibleLocalVariables — Локальные переменные могут быть недоступны при использовании catch (localVarName)
(function () < var arguments; alert('arguments === undefined: ' + (arguments === undefined)); >)(); (function () < var e; try < throw 1; >catch (e) < >alert('arguments === undefined: ' + (arguments === undefined)); >)(); (function () < var e = 1; try < throw 2; >catch (e) < >alert('e === 1 : ' + e); >)();CatchBlocksScopeBleed — возможно заменить глобальные переменные, используя catch
var a = 0; (function () < try < throw 1; >catch (a) < >>)(); alert(a); // alerts 1 on old FF (function () < var a = 0; try < throw 1; >catch (a) < >alert(a); // alerts 1 on IE 6 and 7 (IE 8 not tested) >)();GlobalScopeViaThis — Возможно получить доступ к Global scope, используя this в функциях
(function () < alert('your cookie is ' + this.document.cookie); >)(); setTimeout( function () < alert('your cookie is ' + this.document.cookie); >, 0)DeleteUnmasksGlobals — Скрытые в with глобальные переменные могут быть вскрыты, используя delete
with (< document: null >)
FunctionConstructor — Конструктор фукнции доступен через свойство ‘constructor’
((function () <>).constructor)( 'alert("document.cookie http://code.google.com/p/google-caja/wiki/ObjectEvalArbitraryCodeExecution">ObjectEvalArbitraryCodeExecution — Object.eval позволяет выполнить любой код в Firefox.
(<>).eval('alert("Your cookie is " + document.cookie)')
ObjectWatch — Object.watch позволяет отравлять и получать любые внешние данные
function untrusted(o) < o.watch( 'private_', function (obj, oldval, newval) < alert('untrusted got oldval ' + oldval + ' and newval ' + newval); return 'poisoned'; // substitute a bogus value >); > // Trusted code var o = < private_: 'old' >; untrusted(o); o.private_ = 'new'; alert('private is now ' + o.private_);
ObjectToSourceLeaksPrivates — Object.toSource и uneval позволяет получить доступ к приватным свойствам
// Untrusted code function untrusted(o) < // untrusted need not attempt to access private_ directly var privateValue = o.toSource().match(/private_:\s*(\d+)/)[1] * 1; alert('private value is ' + privateValue); >var o = < private_: 4 >untrusted(o);
FunctionMethodsLeakGlobalScope — Function.call или Function.apply могут вскрыть глобальный объект, используя некоторые значения this.
(function () < alert(this === window); >).call(null); (function () < alert(this === window); >).call(undefined); alert(window === ([]).sort.call()); alert(window === ([]).reverse.call()); // Firefox2 only. [https://bugzilla.mozilla.org/show_bug.cgi?id=406337] var o = < valueOf: function () < return null >>; (function () < alert(this === window); >).call(o);
ConditionalCompilationComments — Условная компиляция позволяет злоумышленнику скрыть код.
/*@cc_on @*/ /*@if (1) alert(document.cookie) @end @*/
StringObfuscationIsEasy — Обфускация строк
(function () < var s = 'cons'; s += 'tructor'; (new ((function () <>)[s])('alert("hello")'))(); >)();
ParentCircumventsScoping — Используя __parent__ возможно получить доступ к переменными из любого scope
(function () < var alert = null; // boilerplate that masks global alert (function () < // untrusted code that can't access alert directly (<>).__parent__.alert('hello'); >)(); >)();
JsControlFormatChars — Символ инвертации RTL или [:Cf:] может быть использовн для скрытия кода в комментариях.
InconsistentlyReservedKeywords — Чувствительные к контексту слова: const constructor prototype
this['const'] = 0; const alert = f(); // looks like an assignment to self. function f() < return alert; >// looks like a reference to an undefined local. alert('hello world');
ErrorExposesParameterValues — Используя трейс стека ошибок можно получить доступ к парметрам, переданным во внешние функции
function skroob(luggageCombination) < darkHelmet(); >function darkHelmet() < var combo = Number((new Error).stack.match(/skroob\((\d+)\)/)[1]); alert('Only an idiot would use that combination!: ' + combo); >skroob(1234);
RegexpsLeakMatchGlobally — Регулярки могут выполняться над последней строкой, отправленной в последнее регулярное выражение
// Privileged code (function () < var queryString = document.location.search; // Assume it's "?password=1234" function params() < return queryString.split(/[&?]/g); >if (params()[0] === 'debug=on') < // . >>)(); // Unprivileged code without direct access to document.location (function () < alert(/.*/.exec()); >)();
EvalBreaksClosureEncapsulation — Вызов evel может сломать инкапсуляцию области видимости в старых версиях ff
function counter(i) < return function () < return ++i; >; > var myCounter = counter(0); alert(myCounter()); // => 1 eval('i = 4', myCounter); alert(myCounter()); // => 5 on Firefox 2, 2 on other browsers
PostIncrementAndDecrementCanReturnNonNumber — Постинкремент и постдекримент может возвращать не число — способ полуения конструктора Function
(function() < var c = 'constructor'; var F = (function()<>)[c++]; // Function constructor F('alert("toast")')(); >)();
Учитывая все эти атаки мы должны предоставить некий АПИ, чтобы плагин не работал автономно.
Фичи, которые мы должны предоставить плагину
1. Получение доступа к некоторым пользовательским данным.
2. Выполнение некоторых действий от лица пользователя.
Как же отгородиться от злоумышленника и дать хорошему разработчику все возможности?!
1. Модерация
Мы можем нанять команду модераторов, хорошо разбирающихся в коде, плюс ко всему принимать багрепорты от пользователей.
Недостатки: предельно дорого, и предельно не эффективно. Хорошим модераторам надо много платить, но всегда может найтись хакер искуснее любого модератора плюс человеческий фактор. Пользователи могут и не найти ошибку, плагин может делать свое черное дело незаметно от пользователя.
Достоинства: нет
2. Песочница в iFrame
Такой вариант используется в jsfiddle
1. Выносим скрипты пользователя на левый домен
2. Запрещаем выполнять alert prompt confirm
3. Пользователь в праве делать что угодно в своем фрэйме
4. АПИ предоставляем посредством postMessage (асинхронно)
Недостатки: плагины могут атаковать другие плагины, если они имеют общий домен. Асинхронный обмен. Могут найтись другие функции кроме alert prompt confirm, которые могут мешать пользователю. не все браузеры поддерживают postMessage
Достоинства: простая реализация сендбоксинга
Поробнее: dean.edwards.name/weblog/2006/11/sandbox
3. Песочница в WebWorkers
Воркеры отличная песочинца, они уже ограничены средой браузера
1. АПИ предостаавляем по средствам postMessage (асинхронно)
2. Мы должны создать библиотеку элементов интерфейса
3. Элементы будут реагировать на события асинхронно
Недостатки: разработчик плагина ограничен компонентами интерфейса. Асинхронный обмен и события. Не все браузеры поддерживают WebWorkers
Достоинства: простая реализация сендбоксинга
Пример: github.com/eligrey/jsandbox
4. Статический анализ и трансляция кода в код
Мы аналиируем исходный код, заменяем потенциально опасные коснтуркции на безопасные (css javascript html), либо не пропускаем потенциально опасные.
Недостатки: не выходе мы получаем не исходный код
Достоинства: работает везде
4.1. Douglas Crockford's ADsafe
ADsafe определяет подмножество JavaScript, которое достаточно мощное чтобы позволить гостевому коду выполнять важные действия, в то время как, предотвращает сценарии повреждающие или вторгающиеся в исходный код.
ADsafe удаляет возможности из JavaScript которые либо не безопасные, либо дают неконтролируемый доступ к компонентам браузера. В их список входят: Глобальные переменные, this, arguments, eval, with, arguments, callee, caller, constructor, eval, prototype, stack, unwatch, valueOf, watch, имена кончающиеся или начинающиеся на _, оператор [], Date и Math.random
Ограничения: Перед запуском код необходимо обработать JSLint, код должен быть в UTF-8, html id должны быть уникальными
Недостатки: излишние ограничения разработчика
Достоинства: работает везде
Подробнее можно посмотреть тут: www.adsafe.org
Поиграть с adsafe можно тут: www.jslint.com (включить флаг ADsafe)
4.2. Google Caja
В отличии от ADsafe Google Caja делает трансляцию (используя компилятор — «cajoler») JavaScript,HTML,CSS кода в безопасный (cajoled) JavaScript,HTML,CSS код. Сajoler проводит статический анализ для выявления потенциально опасных моментов, где статический анализ невозможен проверяет динамически — в процессе работы. Кроме этого cajoler делает виртуализацию кусков DOM, используя виртуальные iframe. Caja защищает от всех видов атак, описанных тут.
Недостатки: мы получаем измененный код
Достоинства: работает везде, не накладывает лишних ограничений на разработчика
Примеры трансляции кода
Скрипт алертует «Untrusted gadget says: undefined» и не редиректит
Как видим получается далеко не исходный код, но конечный пользователь защищен от атак злоумышленника
Страница проекта: code.google.com/p/google-caja
Покрутить Google Caja можно тут: caja.appspot.com
Хотелось бы услышать какими способами сендбоксинга пользуетесь вы, есть ли у вас примеры внедрения?
Критика, вопросы и предложения приветствуются!
PS Извиняюсь за прорыв ката — парсер проспал
Выбор песочницы для изучения JavaScript
"Песочница" для начинающего JavaScript-программиста
Тем, кто приступает к освоению JavaScript, необходима "песочница", в которой можно было бы запускать и отлаживать изучаемый код. Подбору такой песочницы и посвящена данная заметка. Все рекомендуемые в ней программы и веб-ресурсы могут быть использованы в любой операционной системе (но приводиться примеры будут для macOS 10.15 Catalina).
Консоли, применяемые в качестве песочницы, могут быть:
- онлайновыми, в первую очередь запускаемыми в браузере;
- оффлайными на основе средств разработки браузеров;
- оффлайновыми, запускаемыми в терминале;
- оффлайновыми, запускаемыми в специальных программах.
Также свой код разработчики могут запускать в специальных редакторах кода или интегрированных средах разработки (Integrated Development Environment, или сокращённо IDE ), как, например, Visual Studio Code, но этот вариант не всегда удобен начинающим программистам и в данной заметке рассматриваться не будет.
Онлайновые редакторы в браузере
Оффлайновые консоли на базе средств разработки браузеров
Практически все современные браузеры имеют подобные инструменты для разработчиков. В частности, браузер Google Chrome позволяет запускать такую консоль нажатием клавиши F12 или сочетанием клавиш Command-Option(Alt)-J . Консоль может располагаться в окне браузера (примыкая либо к левому/правому или же нижнему его краю по желанию разработчика), а может открываться и в отдельном окне. Браузерная консоль удобна в применении и обладает достаточно мощными средствами отладки кода.
Консоль для отладки JavaScript в терминале
Все операционные системы имеют специальные программы-терминалы, в которых можно работать и с кодом JavaScript. Для этого надо установить программную платформу Node.js, скачать которую можно с её официального сайта. Node.js широко используется при создании веб-приложений. Запустить Node.js очень просто: набираем в терминале команду node и переходим в интерактивный режим — режим командной строки, который позволяет вводить код и смотреть результаты его выполнения. В этом режиме есть и свой собственный редактор, вызываемый командой .editor .
Кстати, такой режим интерактивной командной строки назыается REPL , поскольку организован по принципу чтение → вычисление → вывод (результата).
Специализированные JavaScript-песочницы
Это самый удобный способ работать с кодом для начинающего программиста. Примером подобной песочницы является кроссплатформенная бесплатная программа RunJS. Она обладает многими дополнительными возможностями, от настройки темы до автоформатирования кода.
В общем, пробуйте различные варианты и вы найдете тот, который удобен именно вам.
Лучшие онлайн-песочницы для разработчиков
Песочницы — это онлайн-редакторы кода. Специально выделенная (изолированная) среда для безопасного исполнения компьютерных программ. Здесь вы можете сверстать страницу, решить задачу или написать программу, и результат вашей работы сразу отобразится. Часто песочницы используют для проверки незнакомого кода из непроверенных источников.
Также зачастую песочницы используются в процессе разработки программного обеспечения для запуска «сырого» кода, который может случайно повредить систему или испортить сложную конфигурацию. Такие «тестировочные» песочницы копируют основные элементы среды, для которой пишется код, и позволяют разработчикам быстро и безболезненно экспериментировать с неотлаженным кодом.
В чем удобство песочниц:
- Работа происходит прямо в браузере, не нужно ничего дополнительно устанавливать
- Они простые и заточенные под то, что от них требуется
- Экран разделен на 2 части: редактор кода и трансляция исполнения кода
- Объединяет технологии (языки, их библиотеки, препроцессоры)
- Сервисы позволяют сохранить код у себя на компьютере или прямо на сервисе для демонстрации, дальнейшей корректировки или просто для хранения
- Есть возможность нескольким разработчикам работать над одним проектом.
Смысл песочниц в том, чтобы вы учились, тестировали и запускали свой код, выполняли рабочие задачи удобно и безопасно.
CodePen
Его основной интерфейс — три окна рабочей области (редакторы для HTML, CSS и Javascript) и четвертое окно для предпросмотра (здесь результат выполнения кода). Удобно, что вы можете выбрать препроцессор Less, Sass или PostCss для CSS. Подключить библиотеки jQuery, Lodash и React.js, использовать фреймворки Angular и Vue.js и другие для JavaScript.
Кроме этого в CodePen есть раздел «Тренды», где можно рассматривать интересные работы, черпать вдохновение, сохранять себе в шаблоны понравившееся.
Plunker
Если вы учились на Learn JS , то вы уже знакомы с этой песочницей . Чтобы приступить к работе, сначала нужно выбрать библиотеку/фреймворк Angular, React.js, AngularJS или Preact, либо остаться на VanillaJS. После этого откроется редактор кода, в котором можно подключать библиотеки и устанавливать пакеты npm. Препроцессоры стилей тоже можно настроить
JavaScript Sandbox
Данный сервис ориентирован только на работу с этим языком.
Лично я использую js bin.
Даже проходя курсы на Хэкслете, иногда сталкиваюсь с тем, что долго не могу решить задачу и нужно проследить каждый этап функции, а запускать проверки много раз не хочется. И поэтому я перехожу в песочницу, чтобы решить задачу. Кроме того, можно немного изменить условия задачи и больше попрактиковать сложные темы.