Выбор песочницы для изучения JavaScript

«Песочница» для начинающего JavaScript-программиста

Тем, кто приступает к освоению JavaScript, необходима «песочница», в которой можно было бы запускать и отлаживать изучаемый код. Подбору такой песочницы и посвящена данная заметка. Все рекомендуемые в ней программы и веб-ресурсы могут быть использованы в любой операционной системе (но приводиться примеры будут для macOS 10.15 Catalina).

Консоли, применяемые в качестве песочницы, могут быть:

• онлайновыми, в первую очередь запускаемыми в браузере;
• оффлайными на основе средств разработки браузеров;
• оффлайновыми, запускаемыми в терминале;
• оффлайновыми, запускаемыми в специальных программах.

Также свой код разработчики могут запускать в специальных редакторах кода или интегрированных средах разработки (

Integrated Development Environment, или сокращённо IDE), как, например, Visual Studio Code, но этот вариант не всегда удобен начинающим программистам и в данной заметке рассматриваться не будет.

Онлайновые редакторы в браузере

Это самый простой и доступный вариант, для него требуется лишь браузер. В качестве примера можно привести онлайновую консоль jsconsole. Основной недостаток таких консолей — ограниченные средства отладки кода.

Оффлайновые консоли на базе средств разработки браузеров

Практически все современные браузеры имеют подобные инструменты для разработчиков. В частности, браузер Google Chrome позволяет запускать такую консоль нажатием клавиши F12 или сочетанием клавиш Command-Option(Alt)-J. Консоль может располагаться в окне браузера (примыкая либо к левому/правому или же нижнему его краю по желанию разработчика), а может открываться и в отдельном окне. Браузерная консоль удобна в применении и обладает достаточно мощными средствами отладки кода.

Консоль для отладки JavaScript в терминале

Все операционные системы имеют специальные программы-терминалы, в которых можно работать и с кодом JavaScript. Для этого надо установить программную платформу Node.js, скачать которую можно с её официального сайта. Node.js широко используется при создании веб-приложений. Запустить Node.js очень просто: набираем в терминале команду node  и переходим в интерактивный режим — режим командной строки, который позволяет вводить код и смотреть результаты его выполнения. В этом режиме есть и свой собственный редактор, вызываемый командой

.editor.

Кстати, такой режим интерактивной командной строки назыается REPL, поскольку организован по принципу чтение → вычисление → вывод (результата).

Специализированные JavaScript-песочницы

Это самый удобный способ работать с кодом для начинающего программиста. Примером подобной песочницы является кроссплатформенная бесплатная программа RunJS. Она обладает многими дополнительными возможностями, от настройки темы до автоформатирования кода.

В общем, пробуйте различные варианты и вы найдете тот, который удобен именно вам.

Ресурсы HTML, CSS и JavaScript

= HTML и CSS =

Ru:
wisdomweb.ru — курсы и справочники по HTML, CSS и JavaScript. Имеются «песочницы» для тренировки и экспериментов. Отдельно отмечу справочник DOM. Лучший сайт на русском для самообучения этим языкам из всех, что я видела.
htmlbook.ru — курсы и справочники по HTML и CSS
html.manual.ru — cправочники и статьи по HTML и CSS
ru.html.net — русский сегмент html.

net. Курсы по HTML, CSS и PHP. JavaScript-а, в отличие от английской версии, нет. Справочники не обнаружены
coder-booster.ru — есть курс обучения HTML

Eng:
w3schools.com — учебники и справочники по HTML, CSS и много чему ещё. Имеются песочницы. Лучший сайт на английском для самообучения веб-программированию из всех, что я видела. *
learn-html.org — курс включает в себя песочницу
html.net — курсы по HTML, CSS, JavaScript и PHP. Только курсы, справочники не обнаружены.
learn.shayhowe.com — Обучение HTML и CSS. Есть введение в JavaScript и jQuery, но только введение.

Khan Academy — содержит несколько курсов по HTML, CSS, JavaScript
fastwebstart.com — много статей по HTML и CSS простым английским языком
udacity.com — есть бесплатный курс по введению в HTML и CSS
codingfaculty.com — содержит бесплатный курс по HTML и CSS
SoloLearn. com (HTML Fundamentals, CSS Fundamentals) — курсы бесплатные, но нужна регистрация. (Заглянула в HTML-курс: информация там устаревшая и повехностная.)

*

В сети имеется сайт w3ii.com, в котором содержимое w3schools.com переведено на многие языки, включая русский. Но сделан перевод либо автопереводчиком, либо человеком, русский язык плохо знающим.

 

 

= JavaScript =

Ru:
Wisdomweb.ru — курс и справочник JavaScript. В том числе рассмотрены такие технологии как jQuery, AJAX, JSON.
javascript.ru — курс и справочник JavaScript

Eng:
w3schools.com — среди прочего содержит курс и справочник JavaScript. Также можно обучиться его развитиям, таким как jQuery, AngularJS, JSON, AJAX, W3.JS, AppML, Node.js. Удобные песочницы. Мой любимый сайт для изучения веб-языков.

learn-js.org — курс включает в себя песочницу
html. net — курс по JavaScript. Справочника нет. Можно посмотреть работу некоторых фрагментов кода, но поэкспериментировать прямо на сайте не получится.
coursera.org — серьёзные курсы различной направленности, включая JavaScript. Подавляющее большинство на английском, но есть и на других, включая русский. В отличие от всех ранее приведённых ресурсов, существует ограничение по времени на их завершение. Подавляющее большинство самих курсов бесплатны. Денежку попросят, если захотите заполучить формальный сертификат, а также за некоторые другие необязательные деликатесы.
Guru99 — небольшой курс по на Guru99.com. Имеются песочницы, но реализованы они не самым лучшим образом. Не стоит учить язык лишь по этому курсу, но его можно использовать как вспомогательный или чтобы быстро освежить в памяти когда-то освоенное.
Khan Academy — содержит несколько курсов по JavaScript и один по jQuery
SoloLearn.com (JavaScript Tutorial, jQuery Tutorial) — курсы бесплатные, но нужна регистрация
udacity. com — есть 2 бесплатный курса по введению в Javascript здесь и здесь
JavaScript Tutorials (YouTube) — видеокурс от thenewboston
JavaScript (YouTube) — видеокурс от CalebTheVideoMaker2

developer.mozilla.org — MDN (Mozilla Developer Network), справочник для крутых профи
docs.microsoft.com — MSDN (Microsoft Developer Network), справочник для крутых профи

=== Некоторые бесплатные курсы с Udemy ===
Страница подбора_1, страница подбора_2

— Javascript Essentials — created by Lawrence Turton, 2017, rating 4.4
From description: «Learn how Javascript works, some basic API’s and finally create a mini project.«
[6.5 hours video]

— JavaScript for beginners–Learn the importance of JavaScript — created by Abdull Waheed, 2018, rating 3.9

From description: «Learn JavaScript to create 3 project like: birth finder, calculator and image slider using JavaScript, html and some css.«
[7 hours video, 2 articles]

— Learn to Program in Javascript: Beginner to Pro — created by Raghavendra Dixit, 2015, rating 4. 3
From description: «Don’t just be a good programmer, become a great one, because that is what matters.«
[4.5 hours video, 6 articles]

— JavaScript Fundamentals — created by Bharath Thippireddy, 2017, rating 4.4
From description: «Learn JavaScript hands on in quick and easy steps.

«
[5 hours video, 1 article]

— JavaScript Fundamentals 2018 ES6 for beginners — created by Laurence Svekis, 2018, rating 4.3
From description: «Learn JavaScript fundamental coding concepts. Including new ES6 syntax, start using JavaScript within web pages.«
[3.5 hours video, 18 articles]

— Chart JS, the complete guide. ChartJS missing manual. — created by Nicky Wong, 2018, rating 4.1
From description: «The Chart JS missing manual. Master how to use ChartJS and become a data visualizer with ChartJS!«
[4 hours video, 1 article]

 

= различные полезные ссылки для web-программирования =

validator.w3. org — валидация HTML
jigsaw.w3.org/css-validator — валидация CSS

codepen.io — «песочница» для HTML, CSS и JavaScript
jsfiddle.net — «песочница» для HTML, CSS и JavaScript

blindtextgenerator.com — генератор текста-заполнителя
lipsum.com — генератор текста-заполнителя
ipsum-generator.com — генератор текста-заполнителя с простейшими HTML-тегами

 

= сборники платных курсов =

htmlacademy.ru (Ru)
udacity.com (En)
codecademy.com (En)
tutsplus.com (En)
codingfaculty.com (En)

 

= интересные статьи =

Myth Busting: CSS Animations vs. JavaScript: css-tricks.com
Разрушение мифов: CSS анимации vs. JavaScript: internet-technologies.ru — перевод предыдущей статьи на русский 
Как работает JS: обзор движка, механизмов времени выполнения, стека вызовов: habrahabr.ru
 

 

Подборки русскоязычных видео на нашей странице в vk:
Адаптивная верстка (HTML и CSS)
Дизайн, архитектура (для дизайнеров)
JavaScript для совсем начинающих
Javascript

 

Песочница процессов | Electron

Одна из ключевых функций безопасности в Chromium заключается в том, что процессы могут быть выполнены в песочнице. Песочница ограничивает вред, который может нанести вредоносный код, ограничивая доступ к большинству системных ресурсов — изолированные процессы могут свободно использовать только циклы ЦП и память. Для выполнения операций, требующих дополнительных привилегий, изолированные процессы используют выделенные каналы связи для делегирования задач более привилегированным процессам.

В Chromium песочница применяется к большинству процессов, отличных от основного процесса. Сюда входят процессы визуализации, а также вспомогательные процессы, такие как службы аудио, служба GPU и сетевая служба.

Смотрите дизайн приложения Chromium для более подробной информации.

Политика песочницы Electron​

Electron поставляется со смешанной средой песочницы, что означает, что изолированные процессы могут выполняться наряду с привилегированными. По умолчанию, процессы рендеринга не выполняются в «песочнице», но служебные процессы — да. Обратите внимание, что, как и в Chromium, основной процесс (браузер) является привилегированным и не может быть изолирован.

Исторически сложилось так, что этот смешанный подход к песочнице был создан потому, что наличие Node.js доступной в рендерере, является чрезвычайно мощным инструментом для разработчиков приложений. К сожалению, эта функция также является столь же мощной уязвимостью в безопасности.

Теоретически, рендереры вне песочниц не являются проблемой для настольных приложений, которые отображают только доверенный код, но они делают Electron менее безопасным, чем Chromium для отображения ненадежного веб-контента. Тем не менее, даже якобы доверенный код может быть опасным — существует бесчисленное множество векторов атак, которые могут использовать злоумышленники, от межсайтовых сценариев до внедрения контента и атак «человек посередине» на удаленно загруженные веб-сайты, и это лишь некоторые из них. По этой причине мы рекомендуем включить песочницу рендереров для подавляющего большинства случаев с осторожностью.

Обратите внимание, что в трекере задач активно обсуждается включение песочницы рендерера по умолчанию. Подробности см. в #28466).

Sandbox behaviour in Electron​

Sandboxed processes in Electron behave mostly in the same way as Chromium’s do, but Electron has a few additional concepts to consider because it interfaces with Node.js.

Renderer processes​

When renderer processes in Electron are sandboxed, they behave in the same way as a regular Chrome renderer would. A sandboxed renderer won’t have a Node.js environment initialized.

Therefore, when the sandbox is enabled, renderer processes can only perform privileged tasks (such as interacting with the filesystem, making changes to the system, or spawning subprocesses) by delegating these tasks to the main process via inter-process communication (IPC).

Preload scripts​

In order to allow renderer processes to communicate with the main process, preload scripts attached to sandboxed renderers will still have a polyfilled subset of Node.js APIs available. A require function similar to Node’s require module is exposed, but can only import a subset of Electron and Node’s built-in modules:

In addition, the preload script also polyfills certain Node. js primitives as globals:

Because the require function is a polyfill with limited functionality, you will not be able to use CommonJS modules to separate your preload script into multiple files. If you need to split your preload code, use a bundler such as webpack or Parcel.

Note that because the environment presented to the preload script is substantially more privileged than that of a sandboxed renderer, it is still possible to leak privileged APIs to untrusted code running in the renderer process unless contextIsolation is enabled.

Configuring the sandbox​

Enabling the sandbox for a single process​

In Electron, renderer sandboxing can be enabled on a per-process basis with the sandbox: true preference in the BrowserWindow constructor.

app.whenReady().then(() => {
  const win = new BrowserWindow({
    webPreferences: {
      sandbox: true
    }
  })
  win. loadURL('https://google.com')
})

Копировать

Enabling the sandbox globally​

If you want to force sandboxing for all renderers, you can also use the app.enableSandbox API. Note that this API has to be called before the app’s ready event.

app.enableSandbox()
app.whenReady().then(() => {
  
  const win = new BrowserWindow()
  win.loadURL('https://google.com')
})

Копировать

Disabling Chromium’s sandbox (testing only)​

You can also disable Chromium’s sandbox entirely with the --no-sandbox CLI flag, which will disable the sandbox for all processes (including utility processes). We highly recommend that you only use this flag for testing purposes, and never in production.

Note that the sandbox: true option will still disable the renderer’s Node.js environment.

A note on rendering untrusted content​

Rendering untrusted content in Electron is still somewhat uncharted territory, though some apps are finding success (e. g. Beaker Browser). Our goal is to get as close to Chrome as we can in terms of the security of sandboxed content, but ultimately we will always be behind due to a few fundamental issues:

1. We do not have the dedicated resources or expertise that Chromium has to apply to the security of its product. We do our best to make use of what we have, to inherit everything we can from Chromium, and to respond quickly to security issues, but Electron cannot be as secure as Chromium without the resources that Chromium is able to dedicate.
2. Some security features in Chrome (such as Safe Browsing and Certificate Transparency) require a centralized authority and dedicated servers, both of which run counter to the goals of the Electron project. As such, we disable those features in Electron, at the cost of the associated security they would otherwise bring.
3. There is only one Chromium, whereas there are many thousands of apps built on Electron, all of which behave slightly differently. Accounting for those differences can yield a huge possibility space, and make it challenging to ensure the security of the platform in unusual use cases.
4. We can’t push security updates to users directly, so we rely on app vendors to upgrade the version of Electron underlying their app in order for security updates to reach users.

While we make our best effort to backport Chromium security fixes to older versions of Electron, we do not make a guarantee that every fix will be backported. Your best chance at staying secure is to be on the latest stable version of Electron.

Онлайн «песочницы» (sandbox) для совместной разработки | Ресурсы

27 октября 2011

Одно из главных преимуществ современного интернета — возможность обмена информацией с другими пользователями. Причем абсолютно не важно, какого вида эта информация. Это могут быть как фильмы, музыка и картинки для простых пользователей, так и скрипты, программы, прототипы и макеты сайтов для разработчиков и дизайнеров. И если с первым вариантом проблем никогда не возникало, то вот со вторым они легко могут возникнуть.

Сегодня мы поговорим о специальных сервисах, называемых «песочницами» (от англ. слова sandbox) и позволяющих экспериментировать, отлаживать и совместно работать над короткими фрагментами кода с другими пользователями.

Первый вопрос, который приходит на ум, перед использованием «песочниц» — почему нельзя использовать локальные инструменты? Чтобы ответить на этот вопрос, зададим его несколько иначе: «Какие плюсы есть у sandbox-сервисов по сравнению с локальными инструментами?». Как ни странно плюсов достаточно много:

• Простота и оптимизация сервисов для работы со сниппетами: перечисленные ниже сервисы не являются полноценными средствами разработки и предназначены только для работы с небольшими фрагментами кода.
• Работа из браузера: для разработки не понадобится устанавливать специальные программы, что позволяет использовать «песочницы» на любом компьютере, где установлен браузер и есть доступ к интернету.
• Бесплатный доступ: все без исключение сервисы бесплатны, кроме того многие имеют открытый исходный код, как например JS Bin или JS Fiddle.
• Панель предварительного просмотра: после написания кода в специальной области отображается результат, каким бы он выглядел в браузере.
• Работа с клиентским кодом: сервисы могут обрабатывать не только HTML и CSS, но и JavaScript и его фреймворки (jQuery или Mototools).
• Возможность сохранения: большинство сервисов позволяют сохранять созданный код, например, для дальнейшей разработки на своем компьютере. Также можно загружать собственные сниппеты и работать с ними онлайн.
• Совместная разработка: функция, позволяющая работать над исходным кодом совместно, а также передавать его другим разработчикам.

После перечисления общих плюсов перейдем непосредственно к обзору первоклассных инструментов, коих мы нашли шесть.

Кроме уже описанных нами возможностей следует отметить, что CSSDesk, в отличие от остальных сервисов, умеет работать только с HTML и CSS кодом, а для работы с Jsdo.it придется зарегистрироваться. В остальном функционал «песочниц» очень схож и отличается лишь мелкими деталями и внешним видом. После непродолжительно работы со всеми инструментами, мы рекомендуем, в первую очередь, поработать с Tinkerbin или JS Fiddle, несмотря на то, что окончательный выбор, конечно же, остается за вами.

5 бесплатных open source движков для игр на JavaScript | GeekBrains

Выбираем простые в изучении, Facebook-совместимые и свободные движки для создания игр на JS и HTML5.

https://gbcdn.mrgcdn.ru/uploads/post/1709/og_cover_image/d1d61d467f731daa8c6c57f9b9caf10c

Если вы только начали программировать и хотите написать мобильную и/или кроссплатформенную игру, беритесь за JS. Связка HTML+JavaScript работает везде. С фреймворками типа Electron на ней даже можно строить десктопные приложения.

Взгляните на 5 движков, с которым работа над игрой — в радость. Все они на момент написания статьи бесплатны и имеют открытый исходный код (open source). А еще — позволяют делать игры для Facebook. У каждого движка есть песочница, чтобы писать и тестировать код онлайн!

Для веб-разработчика создание HTML5-игры — повод ближе узнать Canvas и WebGL, поработать с 2D- и 3D-графикой в браузере. Это еще и урок оптимизации, ведь интерактивные красивости должны съедать как можно меньше памяти.

Эту библиотеку используют в качестве игрового движка, но на самом деле у нее более широкое применение. Она упрощает вывод интерактивной 2D-графики и анимации в любых приложениях на базе HTML5. Поэтому рекомендую веб-разработчикам присмотреться к Pixi.

Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas. Но первый работает заметно быстрее, особенно когда нужно одновременно анимировать сотни и даже тысячи объектов. Скорость достигается за счет того, что WebGL — инструмент низкоуровневый. А значит без дополнительных фреймворков кодить для него трудоемко: нужно прописывать каждую мелочь в управлении текстурами и шейдерами. И здесь на сцену выходит PixiJS, который берет это на себя.

Тест производительности — разработчики назвали его Bunnymark. Вы можете сотнями добавлять на сцену шустрых разноцветных кроликов и следить, как меняется кадровая частота (FPS) — то есть как быстро идет рендеринг. На слабеньком нетбуке я получила частоту 29–30 кадров в секунду даже при безостановочном насыпании 25 000 кроликов на сцену. При этом анимация уже добавленных прыгунов быстро восстанавливалась до скорости 30 кадров секунду даже при наличии 75 000 мелких кролей на экране. На хорошей машине можно получить FPS на уровне 40–60+. Показатели зависят от видеокарты и браузера.

Песочница — интерактивная библиотека, где можно поиграть с заготовками кода. На сайте движка вы найдете более 60 готовых примеров работы с видео, текстом, графическими эффектами, текстурами, спрайтовой и скелетной анимацией. Скачать заготовку можно в один клик. Код подробно откомментирован — все понятно, даже если вы учите JS со вчерашнего дня. Если официальных примеров мало, загляните в папку examples GitHub-репозитория, куда участники сообщества добавляют собственные наработки. При желании можете пополнить ее своим вкладом.

Доступность. В PixiJS есть функции, которые помогают адаптировать игру для людей с нарушениями зрения. Основа доступности — озвучивание экрана и поддержка клавиатурного управления наряду с «мышиным» и тактильным.

Взгляните на эту демку. Вы можете зажигать лампочки кликом мышки по нужной дощечке (вариант для зрячих) или же выбирать дощечки клавишей Tab, а лампочки включать нажатием Enter (вариант для незрячих и слабовидящих).

Исходники на Github.

Сообщество: живое и общительное — обитает в основном на форуме HTML5GameDevs, куда можно обращаться с вопросами.

Плюсы: Стабильно быстрый 2D-рендеринг даже на слабых машинах (при условии, что браузер поддерживает WebGL). Низкоуровневость — ниже только чистый JS, так что работа движка очень прозрачна. Кроссплатформенность, поддержка тачскрина. Удобная песочница, подробная документация на английском языке, понятный вводный курс для новичка. Движок хорош для создания небольших казуальных 2D-игр для мобильных устройств и ПК.

Минусы: в сравнении с движками, заточенными именно под игры, предлагает меньше инструментов «из коробки». Мало руководств на русском языке.

Игровой движок для настольной и мобильной разработки на JS и TypeScript. Работает на основе PixiJS — использует его для визуализации сцен. Следовательно, опирается на тот же шустрый WebGL с возможностью отката на Canvas в устаревших браузерах.

Сейчас параллельно существуют две версии движка: Phaser 2 и Phaser 3. «Трешка» увидела свет 13 февраля 2018 года. По заявлению разработчиков, они полностью переписали движок, чтобы придать ему модульную структуру и сделать data-ориентированным. Знакомство с новой версией пока осложняется нехваткой документации и действующих примеров. Но работа в этом направлении идет полным ходом: уже есть базовое руководство, урок «Делаем первую игру на Phaser 3» и экспериментальная лаборатория примеров. Примеры пока с дисклеймером «Извините, может не работать». Поэтому когда люди сегодня говорят о Phaser, они обычно имеют в виду Phaser 2.

Песочница отличается фантастическим числом интерактивных примеров и заготовок — на момент написания статьи их 685! Это гораздо больше, чем у PixiJS и большинства других движков. Код можно быстро скачать в виде .zip- или .tar.gz-файлов или клонировать в GitHub. Также доступны такие фишки, как мобильный предпросмотр сцены и сменные темы оформления для редактора кода.

Игровая витрина с проектами пользователей — быстрый способ оценить возможности движка и вдохновиться на что-то свое. Можно отдельно вывести игры с пометкой STAFF PICK («Выбор команды [Phaser]»).

Исходники: на GitHub.

Сообщество: большое и активное. Для общения есть каналы в Slack и Discord, а также ветки по Phaser 2 и 3 на форуме HTML5GameDevs. Новости можно узнавать в Twitter и из еженедельной рассылки. На русском языке уроков и статей хоть и не море, но больше, чем о PixiJS. Например, на хабре есть любопытные статьи «Разработка браузерной онлайн-игры» и «Обучающая игра за неделю, или попытка таймкиллера по английскому».

Плюсы: перспективный движок, оптимизированный под мобильные платформы. Очень прост в освоении благодаря пошаговым инструкциям для новичка. Тонны примеров, постоянно выходят новые уроки и руководства.

Минусы: последняя версия — Phaser 3 — еще сырая. Плагины и утилиты к движку стоят в среднем 20$ и поддерживают только Phaser 2. У второй версии движка есть неочевидные настройки, которые трудно изменить — например, скорость движения объектов автоматически подстраивается под FPS (см. статью «История участия в Game Jam» на хабре).

Вебинар GB: «Создание игр на JavaScript с помощью Phaser».

Для разработки браузерных 3D-игр этот фреймворк так же значим, как Pixi — для 2D. Работа с мешами, освещением, материалами, физикой, позиционным звуком — вот это все — продумано, задокументировано, снабжено интерактивными примерами. С Babylon можно делать игры для Android, iOS и десктопных браузеров. Наряду с JS поддерживается TypeScript.

Движок дружелюбен к новичкам, но без сюсюканья: вас не заманивают красивыми картинками. Первое, что радует глаз в разделе документации — интерактивный Get Started, который меняется в зависимости от выбора языка (JS/TS). Вы можете сходу оценить список возможностей и доступных расширений, поиграть с примерами, посмотреть видеоуроки — например, вводное занятие для начинающих (на английском с французским акцентом).

Для первого знакомства отлично подойдет пошаговый текстовый курс Babylon 101. Но это не для тех, кто хочет «мегаигру за 30 минут». Нужно быть готовым читать, вникать, экспериментировать.
У Babylon есть свой онлайн-редактор 3D-сцен, который подробно описан в разделе Resources (тег Editor). Там же вы узнаете, как подружить Babylon.js с Unity, Blender, Ionic Angular и ReactJS.

Песочница: у движка очень удобный редактор кода (Playground) с мгновенным предпросмотром и прослушиванием (если речь о звуке, в том числе позиционном). Здесь можно писать с нуля или редактировать код примеров и заготовок. Еще одна фишка песочницы — компонент Inspector для быстрой отладки кода.Также есть Sandbox — онлайн-просмотрщик 3D-сцен и моделей, куда можно перетаскивать файлы с жесткого диска.

Игровая витрина на главной странице движка содержит более 100 красочных сцен, игр и демонстраций.

Исходники: на GitHub.

Сообщество: активное — новые сообщения на форуме появляются каждый час. В Рунете по движку много уроков, статей и переводов. Пример с хабра: «Создание шейдеров на основе Babylon.js и WebGL: теория и примеры».

Плюсы: мощный, бурно развивающийся движок со множеством онлайн-инструментов, готовых рецептов и ресурсов. Среди расширений — 60 заготовок для создания эффектов (огня, травы, частиц, меха и других), генерации ландшафта, работы с GUI и прочего. Команда регулярно фиксит баги, найденные сообществом.

Минусы: требует времени на изучение, бывают ошибки при импорте 3D-моделей из Blender и Autodesk 3ds Max.

Если вы хотите делать игры для Facebook, знайте, что Egret — в числе официально рекомендованных для этого движков. Китайский фреймворк позволяет создавать кроссплатформенные 2D-игры, которые адаптируются под размер экрана.

Лично мне нравится, что документация, инструкции по установке, примеры и справка по API доступны с одной страницы. Все это, включая комментарии в коде, добросовестно переведено на английский. НО! Языковой ступор настигает при запуске среды Egret Launcher — интерфейс на китайском. Спасают англоязычные руководства.

Параллельно с развитием 2D-движка готовится к релизу Egret Engine 3D. Пока оценить работу с трехмерной графикой можно только по приглашениям в режиме закрытого бета-теста. Из громких обещаний 3D-версии — плагин, конвертирующий заготовки из Unity 4 и 5 в сцены HTML5.

Песочница: простая и удобная — с ~50 примерами, предпросмотром на экране смартфона, возможностью быстро скачать свой код или сбросить изменения. Каждый пример также доступен по QR-коду.

Игровая витрина: около 20 разношерстных проектов, которые открываются по клику или QR, плюс еще десятка красочных мобильных игр — только по QR. Все на китайском, но казуалки интуитивно понятны (например, «Веселая Кухня»), чего не скажешь о карточной игре, комиксе-слайдере и сюрреалистическом непонятно-чем.

Исходники: на GitHub.

Сообщество: По сведениям разработчиков, 75% китайских игроделов, работающих с HTML5, используют Egret. Среда выполнения Egret-приложений за время существования движка была установлена более чем на 500 миллионах мобильных устройств. В Twitter и Facebook новости движка появляются минимум пару раз в месяц. На GitHub можно наблюдать жаркие дискуссии участников проекта — на китайском.

Плюсы: регулярные обновления, совместимость с инструментами Egret (визуальным редактором кода Egret Wing, анимационной платформой DragonBones, менеджером игровых ресурсов ResDepot и другими). Есть архив старых версий движка с описанием изменений на английском.

Минусы: интерфейс лаунчера и игр-примеров — на китайском. Лаунчер для Windows работает только с 64-битными системами. Заготовки в песочнице — очень простенькие, пока нет поддержки 3D. Документация или подробное описание на русском отсутствуют — единственная статья вышла на хабре в 2015 году.

Еще один перспективный китайский движок с амбициозной задумкой. Позволяет создавать 2D-, 3D-, AR- и VR-игры для Android, iOS, ПК и даже консолей! Да, приложения виртуальной реальности на JS — это неплохо придумано. Кстати, для этого движка можно еще писать на TypeScript и ActionScript.

Фишка в том, что вы пишете код один раз и можете получить результат в виде HTML5, Flash или мобильного приложения. Движок умеет работать с векторной графикой, растровыми шрифтами, скелетной анимацией, частицами, физикой. Еще он совместим с упомянутой выше системой анимации DragonBones. Есть свои средства работы со звуком — на основе OpenAL и HTML5 Audio.

LayaAir использует свой формат 3D-моделей (.lm). На сайте разработчика есть плагин для конвертации игровых объектов Unity3D в .lm-файлы. Об устройстве и настройке 3D-сцены в LayaAir читайте здесь, а о переносе сцен из Unity — тут.

У LayaAir своя IDE со встроенными редакторами кода, UI, сцен, покадровой анимации, частиц. Также в LayaAirIDE есть средства для упаковки игры во Flash или нативное приложение. Минус в том, что часть пунктов интерфейса в среде разработки не переведена. Контекстные меню, некоторые подсказки и названия закладок автоматически переводятся на русский или другой основной язык вашей системы. Сообщения и предупреждения в отладочной консоли — на английском. В итоге получаем такую картинку:

Если вы изначально пишете для мобильных устройств, скачайте набор LayaNative SDK, где есть средства тестирования и пересборки HTML5 для запуска на планшетах и смартфонах.

Есть документация и справка по API на английском. От сайта впечатления неоднозначные — многое переведено, но не сразу находится. Совет: если перевода нет на сайте, ищите его на GitHub — и наоборот. Критически важные разделы, в том числе страница загрузки движка — переведены полностью.

Песочница — более сотни примеров (в основном простеньких). Можно редактировать код «на лету». Интерфейс большей частью переведен на английский, а вот комментарии в коде остались на китайском.

Игровая витрина —  в Википедии пишут, что на движке сделана минимум сотня игр. На сайте представлено около 30 мобильных игр в 2D и 3D. К сожалению (для меня), все они на китайском языке и доступны после регистрации в игровой секции одного очень популярного китайского портала. Но есть и хорошие новости. Для оценки производительности в вашем браузере — смотрите демо в 2D, 3D и VR. Также можно заценить простенький шмап.

Сообщество: китайские товарищи общаются на форуме, который работает по принципу «Вопрос–ответ» и более-менее переводится Гугляндексом.

Исходники: на GitHub. Обратите внимание, что свободен только движок LayaAir, а весь фреймворк LayaBox с тонной дополнительных инструментов и примочек имеет лицензию Freeware.

Плюсы: поддержка 3D, виртуальной и дополненной реальности. Возможность создавать нативные приложения. Совместимость с Unity. Набор бесплатных дополнительных инструментов. Движок активно развивается.

Минусы: IDE на китайском (но есть англоязычная справка по настройке), сайт переведен частично и сыроват. Иногда посреди английского мануала тебя направляют в китайскую секцию сайта, хотя есть переведенная. Раздел Developers Community на момент написания статьи не работал. Материалов для новичков маловато: платные онлайн-курсы на китайском не в счет. На русском пока вообще ничего нет.

Что еще почитать/посмотреть о создании игр на JS

Вебинар «Разработка 2D-realtime игры на JavaScript» — работа на чистом JS — без фреймворков.

Вебинар «Пишем HTML5-арканоид на чистом JavaScript и Canvas» — создание игры с нуля за 2 часа.

Статья «6 интересных багов, с которыми я столкнулся, пока делал игру для „ВКонтакте”» — что бывает, когда отказался от PixiJS для рендеринга.

Вебинар «Основы работы с Immutable.js» — как JS-библиотека для работы с иммутабельными данными помогает делать игры.

Вебинар «Разработка без бюджета: что нужно знать, чтобы не потратить год жизни впустую».

Статья «Создаем игру для самых маленьких на Phaser в Intel XDK» — подробно описывает первые шаги в работе с движком, дает советы, где брать ресурсы.

Статья «Трехмерная графика в вебе» — о WebGL и библиотеках для работы с ним.

Вебинар «Как придумать популярную игру?» — не только на JS.

Статья «Многопользовательский онлайн-шутер на WebGL и asyncio» — клиентская часть на BabylonJS, серверная — на Python.

Как использовать изолированную программную среду Artyom.js на устройствах, подключенных к локальной сети

С публикацией Artyom.js V1.0.5 функция песочницы была оптимизирована и теперь позволяет ей подключаться к песочнице с любого устройства (устройства с браузером) локальной сети (LAN). Эта функция полезна, когда вы хотите работать с Artyom.js и разрабатывать пользовательские функции, так как ранее разработка в браузере была действительно простой, но, если вы хотели протестировать ее на мобильных устройствах, вам нужно было загрузить файлы на сервер а затем получить доступ к ним, чтобы проверить новые функции там, довольно неудобно.

Хотя на некоторых компьютерах использование песочницы довольно просто и с первого раза сработает, на некоторых — нет. Поэтому в этой статье мы расскажем шаг за шагом, чтобы сделать вашу разработку на Артеме удобной.

1. Запустите песочницу

Клонируйте репозиторий Artyom.js и перейдите в песочницу, после того как репозиторий будет клонирован, перейдите в папку, в которой был клонирован Артем:

git clone https://github.com/sdkcarlos/artyom.js.git
cd artyom.js

Установите зависимости:

npm install

А также на тот случай, если Nodemon не установлен уже на вашем компьютере, установите его с помощью следующей команды:

npm install -g nodemon

Теперь вам просто нужно выполнить песочницу Артема, используя:

npm run sandbox

Песочница должна быть запущена для создания вывода в консоли Node, подобного следующему:

Обычно вы получаете доступ через браузер на том же компьютере, на котором сервер был запущен с Node. js на https://localhost:8443 адрес, он должен работать нормально. Кроме того, теперь с обновлением вы можете получить доступ через IP-адреса, которые скрипт выведет в консоли в песочницу с другого устройства, находящегося в той же сети.

Важный

Помните, что вам не нужно перезагружать сервер после внесения изменений в Артём или любой из файлов в /development каталог. В этом смысл Нодемона.

2. Разрешить входящие соединения для Node.js

Сценарий server.js проекта выполняет тяжелую работу за вас, однако, если вы пытаетесь получить доступ к указанному адресу с ваших мобильных устройств (устройство Android) и Node.js заблокирован каким-то правилом брандмауэра, это не будет (вероятно) просто работать:

Если вы уверены, что сервер работает на вашем компьютере, проблема может быть вызвана ограничением брандмауэра, и для его работы вам потребуется разрешить все входящие подключения к приложению Node.js на вашем компьютере. Например, в Windows вы можете просто открыть брандмауэр, перейти к правилам для входящих подключений и найти Node. js в списке:

Щелкните правой кнопкой мыши по выбранному элементу Node.js и выберите Свойства из контекстного меню. В этом меню перейдите на вкладку «Общие» и в области «Действие» выберите Разрешить соединение переключатель:

Это должно сработать немедленно, однако, чтобы быть уверенным, перезапустите терминал, в котором был открыт Node, и запустите его снова. Наконец, повторите шаги, перейдите в папку artyom, выполните команду sandbox в терминале (когда-то находившемся в папке artyom):

npm run sandbox

И попробуйте получить доступ с предоставленными внутренними IP-адресами с другого устройства, подключенного к той же сети:

И все, теперь вы можете запустить песочницу с компьютера, и она будет доступна через частный IP-адрес с любого из устройств, подключенных к локальной сети. Основным преимуществом этого подхода является то, что теперь вы можете просто изменить некоторый код Артема на своем компьютере, и вам просто нужно обновить страницу с других устройств, чтобы протестировать ее. Если по какой-либо причине вы не знаете, как отлаживать веб-сайт с мобильных устройств с помощью Google Chrome.

Почтальон Справочник по JavaScript | Учебный центр Postman

Postman предоставляет API-интерфейсы JavaScript, которые можно использовать в сценариях запросов. Объект pm предоставляет большую часть функциональных возможностей для тестирования ваших данных запроса и ответа, а объект postman обеспечивает дополнительный контроль рабочего процесса.

Содержимое

Объект pm

Вы будете выполнять большую часть функций Postman JavaScript API, используя pm.* , который обеспечивает доступ к данным запроса и ответа, а также к переменным.

Использование переменных в сценариях

Вы можете получить доступ к переменным и управлять ими в каждой области в Postman, используя API pm .

Вы можете использовать динамические переменные для генерации значений при выполнении ваших запросов.

Postman поддерживает различные области видимости переменных. Объект pm предоставляет методы для доступа к глобальным переменным, переменным коллекции и среды, а также методы pm.variables для доступа к переменным в различных областях, а также для установки локальных переменных.

• Проверить, есть ли в текущей области переменная Postman:

  pm.variables.has(variableName:String):function → Boolean  

• Получить значение переменной Postman с указанным именем:

  pm.variables.get(имя_переменной:строка):функция → *  

• Установить локальную переменную с указанным именем и значением:

  pm.variables.set(variableName:String, variableValue:*): функция  

• Вернуть разрешенное значение динамической переменной внутри скрипта, используя синтаксис {{$variableName}} :

  вечера. переменные.replaceIn(имя_переменной:строка):функция: → *  

Например:

  const stringWithVars = pm.variables.replaceIn("Привет, меня зовут {{$randomFirstName}}");
console.log(строкаWithVars);  

• Возвращает объект, содержащий все переменные с их значениями в текущей области. В зависимости от порядка приоритета он будет содержать переменные из нескольких областей.

  pm.variables.toObject():функция → Объект  

Область видимости переменных определяет приоритет, который Postman присваивает переменным при ссылке на них, в порядке возрастания приоритета:

• Глобальный
• Коллекция
• Окружающая среда
• Данные
• Местный

Переменная с ближайшей областью действия переопределяет любые другие.Например, если у вас есть переменные с именем score как в текущей коллекции, так и в активной среде, и вы вызываете pm. variables.get('score') , Postman вернет текущее значение переменной среды. Когда вы устанавливаете значение переменной с помощью pm.variables.set , значение является локальным и будет сохраняться только для текущего запроса или запуска сбора.

 



console.log(pm.variables.get('счет'));
console.log(pm.collectionVariables.get('оценка'));
консоль.журнал (pm.environment.get ('счет'));


pm.variables.set('оценка', 3);
console.log(pm.variables.get('счет'));


console.log(pm.variables.get('счет'));  

Дополнительные сведения см. в справочнике по переменным Postman Collection SDK.

Вы также можете получить доступ к переменным, определенным в отдельных областях, через pm.environment, pm.collectionVariables и pm.globals.

Использование переменных среды в сценариях

Ваши сценарии могут использовать методы pm.environment для доступа и управления переменными в активной (выбранной в данный момент) среде.

• Имя активной среды:

  pm.environment.name:String  

• Проверить, есть ли в среде переменная с указанным именем:

  pm.environment.has(variableName:String):function → Boolean  

• Получить переменную с указанным именем в активной среде:

  pm.environment.get(variableName:String):функция → *  

• Установить переменную с указанным именем и значением в активном окружении:

  вечера.environment.set (имя переменной: строка, значение переменной: *): функция  

• Вернуть разрешенное значение динамической переменной внутри скрипта, используя синтаксис {{$variableName}} :

  pm.environment.replaceIn(variableName:String):function → *  

Например:

 
const stringWithVars = pm.environment.replaceIn("Привет, меня зовут {{firstName}} и я {{age}}. ");
console.log(строкаWithVars);  

• Вернуть все переменные с их значениями в активной среде в одном объекте:

  вечера.environment.toObject(): функция → Объект  

• Удалить переменную из активной среды, указав переменную по имени:

  pm.environment.unset (имя переменной: строка): функция  

• Очистить все переменные в активной среде:

  pm.environment.clear():функция  

Обратите внимание, что возможность редактировать переменные зависит от вашего уровня доступа в рабочей области.

Использование переменных коллекции в скриптах

Ваши скрипты могут использовать pm.collectionVariables метода для доступа к переменным в коллекции и управления ими.

• Проверить, есть ли в коллекции переменная с указанным именем:

  pm.collectionVariables.has(variableName:String):function → Boolean  

• Вернуть значение переменной коллекции с указанным именем:

  pm. collectionVariables.get(variableName:String):function → *  

• Установить переменную коллекции с указанным именем и значением:

  вечера.collectionVariables.set (имя переменной: строка, значение переменной: *): функция  

• Вернуть разрешенное значение динамической переменной внутри скрипта, используя синтаксис {{$variableName}} :

  pm.collectionVariables.replaceIn(variableName:String):function → *  

Например:

 
const stringWithVars = pm.collectionVariables.replaceIn("Привет, меня зовут {{firstName}} и я {{age}}.");
console.log(строкаWithVars);  

• Вернуть все переменные с их значениями в коллекции в объекте:

  вечера.collectionVariables.toObject(): функция → Объект  

• Удалить указанную переменную из коллекции:

  pm.collectionVariables. unset(variableName:String):function  

• Очистить все переменные из коллекции:

  pm.collectionVariables.clear():функция  

Использование глобальных переменных в скриптах

Ваши сценарии могут использовать методы pm.globals для доступа и управления переменными в глобальном масштабе в рабочей области.

• Проверить, где находится глобальная переменная с указанным именем:

  pm.globals.has(variableName:String):function → Boolean  

• Вернуть значение глобальной переменной с указанным именем:

  pm.globals.get(variableName:String):функция → *  

• Установить глобальную переменную с указанным именем и значением:

  pm.globals.set (имя переменной: строка, значение переменной: *): функция  

• Вернуть разрешенное значение динамической переменной внутри скрипта, используя синтаксис {{$variableName}} :

  вечера. globals.replaceIn(имя_переменной:строка):функция → строка  

Например:

 
const stringWithVars = pm.globals.replaceIn("Привет, меня зовут {{firstName}} и я {{age}}.");
console.log(строкаWithVars);  

• Вернуть все глобальные переменные и их значения в объекте:

  pm.globals.toObject():функция → Объект  

• Удалить указанную глобальную переменную:

  вечера.globals.unset (имя переменной: строка): функция  

• Очистить все глобальные переменные в рабочей области:

  pm.globals.clear():функция  

Обратите внимание, что возможность редактировать переменные зависит от вашего уровня доступа в рабочей области.

Использование переменных данных в скриптах

Ваши сценарии могут использовать методы pm.iterationData для доступа и управления переменными из файлов данных во время выполнения сбора данных.

• Проверить, существует ли переменная с указанным именем в данных текущей итерации:

  вечера.iterationData.has (имя переменной: строка): функция → логическое значение  

• Вернуть переменную из данных итерации с указанным именем:

  pm.iterationData.get(имя_переменной:строка):функция → *  

• Вернуть переменные данных итерации в объекте:

  pm.iterationData.toObject(): функция → объект  

• Преобразование объекта iterationData в формат JSON:

  pm.iterationData.toJSON(): функция → *  

• Удалить указанную переменную:

  pm.iterationData.unset (ключ: строка): функция  

Сценарий с данными запроса и ответа

Различные методы обеспечивают доступ к данным запроса и ответа в сценариях Postman, включая pm.request, pm.response, pm.info и pm.cookies. Кроме того, вы можете отправлять запросы, используя pm. sendRequest.

Сценарий с запросом данных

вечера.Объект request предоставляет доступ к данным для запроса, в котором выполняется скрипт. Для сценария предварительного запроса это запрос, который должен быть выполнен, а для сценария Test это уже выполненный запрос.

Вы можете использовать сценарии предварительного запроса объекта pm.request для изменения различных частей конфигурации запроса перед его выполнением.

Объект pm.request предоставляет следующие свойства и методы:

  вечера.request.headers:Список Заголовков  

• Данные в теле запроса. Этот объект неизменяем и не может быть изменен из скриптов:

  pm.request.body:RequestBody  

• Добавить заголовок с указанным именем и значением для текущего запроса:

  pm.request.headers.add(header:Header):функция  

Например:

  pm. request.headers.add({
  ключ: "идентификатор клиента",
  значение: "abcdef"
});  

• Удалить заголовок запроса с указанным именем:

  вечера.request.headers.remove (headerName: String): функция  

• Вставить указанное имя заголовка и значение (если заголовок не существует, иначе уже существующий заголовок будет обновлен до нового значения):

  pm.request.headers.upsert({ключ: headerName:String, значение: headerValue:String}):функция)  

Дополнительные сведения см. в справке по запросу Postman Collection SDK.

Сценарий с данными ответа

вечера.Объект ответа предоставляет доступ к данным, возвращенным в ответе на текущий запрос в сценариях, добавленных в Тесты .

Объект pm.response предоставляет следующие свойства и методы:

• Код состояния ответа:

  pm. response.status:String  

  pm.response.headers:HeaderList  

• Время получения ответа в миллисекундах:

  вечера.response.responseTime: номер  

• Размер полученного ответа:

  pm.response.responseSize:Number  

  pm.response.text(): Функция → Строка  

• Ответ JSON, который можно использовать для детализации полученных свойств:

  pm.response.json(): Функция → Объект  

Дополнительные сведения см. в справочнике по ответам Postman Collection SDK.

Сценарий с информацией о запросе

вечера.info предоставляет данные, относящиеся к запросу и самому сценарию, включая имя, идентификатор и количество итераций.

Объект pm.info предоставляет следующие свойства и методы:

• Событие, которое будет либо «предзапрос», либо «тест» в зависимости от того, где скрипт выполняется в запросе:

• Общее количество запланированных итераций:

  pm. info.iterationCount:Число  

• Сохраненное имя выполняемого запроса:

  вечера.info.requestName: строка  

• Уникальный GUID, идентифицирующий выполняющийся запрос:

Сценарии с файлами cookie запросов

Объект pm.cookies предоставляет доступ к списку файлов cookie, связанных с запросом.

Объект pm.cookies предоставляет следующие свойства и методы:

• Проверить, существует ли конкретный файл cookie (указанный по имени) для запрошенного домена:

  вечера.cookies.has(cookieName:String):Функция → логическое значение  

• Получить значение указанного файла cookie:

  pm.cookies.get(cookieName:String):Function → String  

• Получить копию всех файлов cookie и их значений в объекте. Возвращает все файлы cookie, определенные для домена запроса и пути:
.

  pm. cookies.toObject(): Функция → Объект  

Дополнительные сведения см. в справочнике по списку файлов cookie SDK Postman Collection.

Вы также можете использовать pm.cookies.jar , чтобы указать домен для доступа к запросам файлов cookie.

Чтобы включить программный доступ с помощью методов pm.cookies.jar , сначала внесите URL-адрес файла cookie в белый список.

• Доступ к объекту банки с печеньем:

  pm.cookies.jar(): Функция → Объект  

Например:

  const jar = pm.cookies.jar();
  

• Установить файл cookie, используя имя и значение:

  банка.set (URL: строка, имя файла cookie: строка, значение файла cookie: строка, обратный вызов (ошибка, файл cookie)): функция → объект  

  jar.set(URL:String, { name:String, value:String, httpOnly:Bool }, callback(ошибка, cookie)): Функция → Объект  

Например:

  const jar = pm. cookies.jar();
jar.set("httpbin.org", "идентификатор сеанса", "abc123", (ошибка, cookie) => {
  если (ошибка) {
    console.error(`Произошла ошибка: ${error}`);
  } еще {
    console.log(`Файл cookie сохранен: ${cookie}`);
  }
});  

• Получить печенье из банки с печеньем:

  банка.get (URL: строка, cookieName: строка, обратный вызов (ошибка, значение)): функция → объект  

• Достаньте все печенье из банки с печеньем. Файлы cookie доступны в функции обратного вызова:
.

  jar.getAll (URL: строка, обратный вызов (ошибка, файлы cookie)): функция  

  jar.unset (URL: строка, токен: строка, обратный вызов (ошибка)): функция → объект  

• Очистить все файлы cookie из банки с печеньем:

  jar.clear (URL: строка, обратный вызов (ошибка)): функция → объект  

Дополнительные сведения см. в справочнике по cookie-файлам Postman Collection SDK.

Отправка запросов из скриптов

Можно использовать метод pm.sendRequest для асинхронной отправки запроса из сценария Pre-request или Test . Это позволяет вам выполнять логику в фоновом режиме, если вы выполняете вычисления или отправляете несколько запросов одновременно, не дожидаясь завершения каждого из них. Вы можете избежать проблем с блокировкой, добавив функцию обратного вызова, чтобы ваш код мог отвечать, когда Postman получает ответ.Затем вы можете выполнить любую дополнительную обработку данных ответа, которая вам необходима.

Вы можете передать методу pm.sendRequest строку URL или предоставить полную конфигурацию запроса в формате JSON, включая заголовки, метод, тело и многое другое.

 
pm.sendRequest('https://postman-echo.com/get', (ошибка, ответ) => {
  если (ошибка) {
    console.log(ошибка);
  } еще {
  console.log(ответ);
  }
});


константа postRequest = {
  URL-адрес: «https://postman-echo. com/post»,
  метод: «ПОСТ»,
  заголовок: {
    «Тип контента»: «приложение/json»,
    'X-Foo': 'бар'
  },
  тело: {
    режим: «сырой»,
    необработанный: JSON.stringify({ ключ: 'это json' })
  }
};
pm.sendRequest(postRequest, (ошибка, ответ) => {
  console.log(ошибка? Ошибка: response.json());
});


pm.sendRequest('https://postman-echo.com/get', (ошибка, ответ) => {
  если (ошибка) {
    console.log(ошибка);
  }

  pm.test('ответ должен быть обработан', () => {
    pm.expect(ошибка).to.equal(null);
    pm.expect(response).to.have.property('код', 200);
    pm.expect(response).to.have.property('status', 'OK');
  });
});  

Дополнительные сведения см. в справочных документах «Определение запроса» и «Структура ответа».

Сценарии рабочих процессов

Объект postman предоставляет метод setNextRequest для создания рабочих процессов запросов при использовании сборщика коллекций или Newman.

Обратите внимание, что setNextRequest не действует при выполнении запросов с помощью кнопки Отправить , он вступает в силу только при запуске коллекции.

Когда вы запускаете коллекцию (используя средство запуска коллекции или Newman), Postman будет запускать ваши запросы в порядке по умолчанию или в порядке, указанном вами при настройке запуска.Однако вы можете переопределить этот порядок выполнения, используя postman.setNextRequest , чтобы указать, какой запрос должен выполняться следующим.

• Запустить указанный запрос после этого (имя запроса, как определено в коллекции, например, «Получить клиентов»):

  postman.setNextRequest(requestName:String):Функция  

• Запустить указанный запрос после этого (идентификатор запроса, возвращенный pm.info.requestId ):

  почтальон.setNextRequest (requestId: строка): функция  

Например:

 

postman.setNextRequest(pm.environment.get('следующий'));  

Скрипты визуализации

Используйте pm.visualizer.set , чтобы указать шаблон для отображения данных ответа в визуализаторе.

  pm.visualizer.set(layout:String, data:Object, options:Object):Function  

• макет обязательный
• данные опционально
  • Объект JSON, который привязывается к шаблону, и вы можете получить к нему доступ внутри строки шаблона
• опции опция

Пример использования:

  var template = `
{{res.информация}}
`;
pm.visualizer.set (шаблон, {
    рез: pm.response.json()
});  

Встраивание данных ответа в визуализацию

Используйте pm.getData для получения данных ответа внутри строки шаблона визуализации.

  pm.getData(обратный вызов): функция  

Функция обратного вызова принимает два параметра:

Пример использования:

  pm.getData(функция (ошибка, данные) {
  значение переменной = data.res.info;
});  

Написание тестовых утверждений

• вечера. test(testName:String, specFunction:Function):Function

Вы можете использовать pm.test для написания тестовых спецификаций внутри сценариев Pre-request или Tests . Тесты включают имя и утверждение — Postman будет выводить результаты тестов как часть ответа.

Метод pm.test возвращает объект pm , что делает вызов цепочкой. В следующем примере теста проверяется допустимость ответа для продолжения.

  вечера.test("Ответ должен обрабатываться", function () {
  pm.response.to.not.be.error;
  pm.response.to.have.jsonBody('');
  pm.response.to.not.have.jsonBody('ошибка');
});  

Необязательный обратный вызов done может быть передан в pm.test для тестирования асинхронных функций.

  pm.test('асинхронный тест', функция (выполнена) {
  setTimeout(() => {
    pm.expect(pm.response.code).to.equal(200);
    Выполнено();
  }, 1500);
});  

• Получить общее количество тестов, выполненных из определенного места в коде:

  вечера. test.index(): Функция → Число  

Метод pm.expect позволяет вам писать утверждения для ваших данных ответа, используя синтаксис ChaiJS expect BDD.

  pm.expect(утверждение:*):Функция → Утверждение  

Вы также можете использовать pm.response.to.have.* и pm.response.to.be.* для построения своих утверждений.

Дополнительные утверждения см. в разделе Примеры тестов.

Использование внешних библиотек

  требуется (имя модуля: строка): функция → *  

Метод require позволяет использовать встроенные библиотечные модули песочницы.Список доступных библиотек приведен ниже со ссылками на соответствующую документацию.

Ряд модулей NodeJS также доступен для использования в песочнице:

Чтобы использовать библиотеку, вызовите метод require , передайте имя модуля в качестве параметра и назначьте возвращаемый объект из метода переменной.

Следующие шаги

Вы можете использовать тесты для встраивания Postman в свои проекты разработки различными способами, используя утилиты Postman.

песочниц Node.js открыты для загрязнения прототипа

Бен Диксон 22 октября 2021 г., 14:58 UTC
Обновлено: 25 октября 2021 г., 07:27 UTC.

Взлом песочницы может привести к удаленному выполнению кода, предупреждают исследователи атак, обнаружила группа исследователей.

Страница GitHub vm2 описывает библиотеку как «песочницу, которая может запускать ненадежный код со встроенными модулями Node из белого списка. Надежно!»

Однако Центр информационной безопасности имени Гельмгольца CISPA, исследовательская группа по кибербезопасности в Германии, обнаружил, что библиотека открыта для прототипных атак загрязнения.

Загрязнение прототипа — это своего рода уязвимость в JavaScript и других объектных языках, позволяющая злоумышленникам запускать произвольный код путем динамического внедрения свойств в конфиденциальные объекты.

Прорыв в песочнице

Проверка концепции (PoC) на Snyk показывает, как несколько строк кода могут использовать уязвимость в vm2 для выполнения атаки прототипа и RCE на хост.

Хотя ошибка была зарегистрирована как «загрязнение прототипа», Кристиан-Александру Стайку, один из исследователей, который помог обнаружить и сообщить об ошибке, сказал The Daily Swig, что лучшим названием было бы «прорыв в песочнице».

СВЯЗАННЫЕ Уязвимости прототипного загрязнения широко распространены среди веб-сайтов с высоким трафиком, исследование показывает

«В PoC, опубликованном Snyk, мы показываем как полезную нагрузку прототипного загрязнения, так и выполнение произвольного кода.Они оба являются результатом прорыва песочницы», — сказал Стайку. «Предполагается, что vm2 предотвращает доступ к глобальным объектам/привилегированным операциям (например, require), и мы показываем, как злоумышленник может обойти этот контроль безопасности».

Хотя уязвимость не предоставляет root-доступ к хост-устройству, она дает полный доступ к Node. js API, что vm2 пытается ограничить, пояснил Стайку.

Повторяющаяся ошибка

Команда обнаружила ошибку в ходе многомесячного исследования уязвимостей в песочницах JavaScript.

В марте они сообщили об ошибке взлома песочницы в изолированной виртуальной машине, еще одной песочнице, которая позволяла злоумышленникам получить ссылку на объект «функция» контекста Node.js.

Они обнаружили аналогичные ошибки как минимум в трех других библиотеках-песочницах, сказал Стайку, хотя он не может поделиться подробностями, поскольку процесс раскрытия информации с соответствующими разработчиками продолжается, а исправления еще не выпущены.

«Наши результаты показывают, что изолированная программная среда кода JavaScript с прокси-серверами ES6 сложна», — сказал он.«Мы обнаружили взломы в большинстве проанализированных нами систем, поэтому нужно быть очень осторожным при выполнении вредоносного кода с использованием этих библиотек».

ВАМ ТАКЖЕ МОЖЕТ ПОНРАВИТЬСЯ Историческая научная нотация, фольга для защиты от ошибок WAF

Песочница процессов | Electron

Одной из ключевых функций безопасности в Chromium является то, что процессы могут выполняться в песочнице. Песочница ограничивает вред, который может причинить вредоносный код, ограничивая доступ к большинству системные ресурсы — процессы в песочнице могут свободно использовать только циклы ЦП и память.Для выполнения операций, требующих дополнительных привилегий, процессы в песочнице использовать выделенные каналы связи для делегирования задач более привилегированным процессам.

В Chromium песочница применяется к большинству процессов, кроме основного процесса. Сюда входят процессы рендеринга, а также служебные процессы, такие как аудиосервис, служба GPU и сетевая служба.

Для получения дополнительной информации см. проектный документ Chromium Sandbox.

Политики песочницы Electron

Electron поставляется со смешанной средой песочницы, что означает возможность запуска изолированных процессов рядом с привилегированными.По умолчанию процессы визуализации не изолированы, а служебные процессы есть. Обратите внимание, что, как и в Chromium, основным (браузерным) процессом является привилегированный и не может быть помещен в песочницу.

Исторически этот смешанный подход к песочнице был установлен, потому что доступность Node.js в рендерере — чрезвычайно мощный инструмент для разработчиков приложений. К сожалению, это особенность также является столь же серьезной уязвимостью безопасности.

Теоретически средства визуализации без песочницы не являются проблемой для настольных приложений, которые отображают только доверенный код, но они делают Electron менее безопасным, чем Chromium для отображение ненадежного веб-контента.Однако даже предположительно доверенный код может быть опасны — существует бесчисленное множество векторов атак, которые могут использовать злоумышленники, от межсайтовый скриптинг для внедрения контента в атаки «человек посередине» на удаленно загруженные веб-сайты, и это лишь некоторые из них. По этой причине мы рекомендуем включить песочницу рендерера. для подавляющего большинства случаев при изобилии осторожности.

Обратите внимание, что в системе отслеживания проблем ведется активное обсуждение включения песочницы средства визуализации. по умолчанию. Подробнее см. # 28466).

Поведение в песочнице в Electron У Electron есть несколько дополнительных концепций, которые следует учитывать, поскольку он взаимодействует с Node.js.

Процессы визуализации

Когда процессы визуализации в Electron изолированы, они ведут себя так же, как обычный рендерер Chrome. Средство визуализации в песочнице не будет иметь Node.js среда инициализирована.

Таким образом, когда песочница включена, процессы визуализации могут выполнять только привилегированные задачи (такие как взаимодействие с файловой системой, внесение изменений в систему или порождение подпроцессы), делегируя эти задачи основному процессу через межпроцессный связь (IPC).

Предварительная загрузка сценариев

Чтобы разрешить процессам визуализации взаимодействовать с основным процессом, сценарии, прикрепленные к изолированным средствам визуализации, по-прежнему будут иметь полифиллированное подмножество Node.js. Доступны API. Функция требует , аналогичная модулю Node , требующему , но может импортировать только подмножество встроенных модулей Electron и Node:

Кроме того, сценарий предварительной загрузки также полифиллирует некоторые примитивы Node. js как глобальные:

Поскольку функция require является полифиллом с ограниченной функциональностью, не быть возможность использовать модули CommonJS для разделения вашего сценария предварительной загрузки на несколько файлы.Если вам нужно разделить код предварительной загрузки, используйте сборщик, например webpack. или Посылка.

Обратите внимание, что поскольку среда, представленная сценарию предварительной загрузки , существенно более привилегированный, чем у рендерера в песочнице, все еще возможна утечка привилегированные API к ненадежному коду, работающему в процессе рендеринга, если contextIsolation включен.

Настройка песочницы

Включение песочницы для одного процесса

В Electron песочницу рендерера можно включить для каждого процесса с помощью песочница : истинное предпочтение в конструкторе BrowserWindow .

  
 app.whenReady().then(() => { 
 const win = new BrowserWindow({ 
 webPreferences: {
 sandbox: true 
 } 
 }) 
 win. loadURL('https://google. com') 
 }) 
  

Копировать

Глобальное включение песочницы

app.enableSandbox API. Обратите внимание, что этот API должен быть вызван до приложение готово к событию .

  
 приложение.enableSandbox() 
 app.whenReady().then(() => { 
 
 const win = new BrowserWindow() 
 win.loadURL('https://google.com') 
 }) 
  

Копировать

Отключение Песочница Chromium (только тестирование)​

Вы также можете полностью отключить песочницу Chromium с помощью --no-sandbox Флаг CLI, который отключит песочницу для всех процессов (включая служебные процессы). Мы настоятельно рекомендуем использовать этот флаг только в целях тестирования, а никогда не использовать . в производстве.

Обратите внимание, что параметр песочницы : true по-прежнему отключает Node.js средства визуализации. окружающая обстановка.

Примечание по рендерингу ненадежного контента хотя некоторые приложения пользуются успехом (например, Beaker Browser). Наша цель — максимально приблизиться к Chrome с точки зрения безопасности изолированный контент, но в конечном итоге мы всегда будем отставать из-за нескольких фундаментальных Issues:

1. У нас нет выделенных ресурсов или опыта, необходимых Chromium для применять к безопасности своего продукта.Мы делаем все возможное, чтобы использовать то, что мы есть, чтобы унаследовать все, что мы можем от Chromium, и быстро реагировать на проблемы с безопасностью, но Electron не может быть таким безопасным, как Chromium, без ресурсы, которые Chromium может выделить.
2. Некоторые функции безопасности в Chrome (например, безопасный просмотр и Прозрачность) требуют централизованного управления и выделенных серверов. которые противоречат целям проекта Electron. Таким образом, мы отключаем эти функции в Electron за счет связанной с ними безопасности, которую они иначе бы принес.
3. Существует только один Chromium, тогда как создано много тысяч приложений на Electron, все они ведут себя немного по-разному. Учет тех. различия могут привести к огромному пространству возможностей и затруднить обеспечить безопасность платформы в нестандартных случаях использования.
4. Мы не можем отправлять обновления безопасности пользователям напрямую, поэтому мы полагаемся на поставщиков приложений обновить версию Electron, лежащую в основе их приложения, чтобы обновления безопасности для пользователей.

Несмотря на то, что мы делаем все возможное для переноса исправлений безопасности Chromium на старые версии Electron, мы не даем гарантии, что каждое исправление будет перенесено.Ваш лучший шанс оставаться в безопасности — использовать последнюю стабильную версию версия Электрона.

Песочница JavaScript — Изучение JavaScript [Книга]

Когда JavaScript был впервые выпущен, было понятно беспокойство по поводу открытия веб-страница, которая будет выполнять часть кода прямо на вашем компьютере. Что если JavaScript содержит что-то вредоносное, например код для удаления всех Документы Word или, что еще хуже, копировать их для создателя скрипта?

Чтобы предотвратить подобные случаи и успокоить пользователей браузера, JavaScript был создан для работы в песочнице : защищенной среде, в которой скрипт не может получить доступ к ресурсам компьютера браузера.

Кроме того, браузеры реализуют условия безопасности выше и помимо тех, которые установлены как минимум для языка JavaScript. Эти определены в безопасности конкретного браузера политика , которая определяет, что может и что не может делать скрипт. Одна из таких политик безопасности предписывает, чтобы сценарий не мог взаимодействовать с страницы, отличные от тех, которые находятся в том же домене, где был создан скрипт. Большинство браузеров предоставляют средства для дальнейшей настройки этой политики. делая среду, в которой работает скрипт, более или менее ограничительный.

К сожалению, даже с песочницей JavaScript и браузером политики безопасности, у JavaScript были тяжелые времена, и хакеры обнаружил и воспользовался несколькими ошибками JavaScript — некоторые зависит от браузера, некоторые нет. Один из наиболее серьезных известен как межсайтовый скриптинг (XSS). На самом деле это класс нарушений безопасности (некоторые приходят через JavaScript, другие через дыры в браузерах, и другие через сервер), что может привести к краже файлов cookie и раскрытие данных клиента или сайта и множество других серьезных проблемы.

Мы рассмотрим это позже более подробно, а также то, как предотвратить XSS, а также другие проблемы безопасности и предупреждения, а также этот печально известный маленький куки-файл в главе 8.

Важно знать, что JavaScript может быть уязвим, даже из лучших побуждений со стороны поставщиков браузеров. Тем не мение, это не должно отговаривать вас от использования JavaScript; большинство проблем может быть предотвратить путем понимания их природы и выполнения рекомендуемых шагов экспертами по безопасности.

Полнофункциональная песочница JavaScript, часть 1

Предпосылки

Инструменты командной строки, показанные в таблице 1, необходимы для выполнения упражнений в этом лабораторном занятии. Пожалуйста, установите и настройте их перед началом лабораторной работы.

Настройте тестовую среду для разработчиков

Этот раздел знакомит вас с тестовой средой разработчика для Red Hat OpenShift и с самим OpenShift.

Создать учетную запись тестовой среды разработчика

Первым шагом к развертыванию вашего приложения является поиск кластера для его размещения.Для этой демонстрации вы можете использовать любой кластер OpenShift, но если у вас нет доступа к нему, вы можете использовать Песочницу разработчика, чтобы получить доступ к бесплатному кластеру OpenShift в течение 14 дней.

Чтобы создать учетную запись, перейдите в раздел «Начало работы» в тестовой среде разработчика. Нажмите красную кнопку с надписью Запустите тестовую среду разработчика для Red Hat OpenShift , как показано на рисунке 1.

Рисунок 1: Запуск тестовой среды разработчика.

Используйте существующую учетную запись Red Hat или создайте новую, затем следуйте инструкциям на экране.Когда вы закончите, вы должны быть перенаправлены обратно на страницу тестовой среды разработчика, но на этот раз она должна отображать кнопку с надписью  Начать использование тестовой среды . При нажатии на нее открывается экран входа в систему OpenShift, показанный на рис. 2.

Рисунок 2. Вход в OpenShift для доступа к тестовой программной среде разработчика.

После входа в систему вы должны увидеть кнопку DevSandbox . Нажав эту кнопку, вы откроете новую консоль кластера OpenShift. Не стесняйтесь пройти экскурсию или пропустить ее и продолжить эту лабораторную работу.

Настройка OpenShift

Для взаимодействия с кластером OpenShift вам потребуется инструмент командной строки oc . К счастью, команда OpenShift упростила вам его установку. Чтобы получить oc для вашей операционной системы, щелкните значок вопросительного знака в правом верхнем углу экрана OpenShift. В появившемся раскрывающемся списке выберите Средства командной строки , показанные на рис. 3. Этот параметр открывает страницу со ссылками, необходимыми для установки oc .

Рисунок 3: Получение инструмента командной строки oc.

После установки инструмента щелкните ссылку Копировать команду входа в систему на той же странице инструментов командной строки. Откроется новое окно с экраном аутентификации. Выберите DevSandbox , затем нажмите ссылку Display Tokens  на следующей странице.

На этой новой странице вы можете найти команду, начинающуюся с oc login . Скопируйте всю эту строку с параметрами --token и --server и вставьте в свой терминал:

  $ oc логин --token=sha256~%TOKEN% --server=https://%SERVER%:6443  

Вы должны получить сообщение, подтверждающее, что вы успешно вошли в тестовую программную среду разработчика:

  Вы вошли в «https://%SERVER%:6443» как «%USERNAME%», используя предоставленный токен. У вас есть доступ к следующим проектам, и вы можете переключаться между ними с помощью 'oc project ':

  * %USERNAME%-код
    %USERNAME%-dev
    %USERNAME%-этап

Использование проекта "%USERNAME%-code".  

Установить приложение локально

Приложение, которое вы развернете в этом кластере OpenShift, представляет собой службу сокращения и перенаправления URL-адресов. Он имеет внешний интерфейс React для управления вашими ссылками и подключается к API Node.js. Затем этот экспресс-сервер подключается к базе данных Mongo для хранения и извлечения URL-адресов.

Другое приложение, называемое микрослужбой «перенаправитель», выполняет поиск в базе данных и перенаправляет трафик на соответствующий URL-адрес. Этот сервис построен на PHP.

Вам нужна копия исходного кода для создания образов контейнеров. Чтобы получить исходный код, вы можете использовать git clone :

.

  $ клон git https://github.com/nodeshift-blog-examples/urlshortener  

Не стесняйтесь исследовать исходный код приложения. Если вы хотите запустить его локально, вы можете сделать это с помощью docker-compose или podman-compose .Следующая команда запускает приложение в режиме разработки:

  $ docker-compose up  

Чтобы просмотреть приложение, откройте браузер и посетите http://localhost:3000.

Сборка передней части

В этом разделе показано, как создать контейнер для внешнего интерфейса. Если вы хотите пропустить этот раздел и сразу перейти к развертыванию, вы можете использовать уже существующий образ и перейти к разделу Развертывание внешнего интерфейса.

Создание интерфейсного контейнера

Чтобы развернуть это приложение, вы не можете просто использовать тот же контейнер, который вы использовали при разработке.Этот контейнер предназначен для среды разработки и включает, среди прочего, сервер горячей перезагрузки.

Для вашей производственной среды вы упакуете свое приложение React и развернете его на сервере Nginx. В идеале он будет использовать переменные среды для своей конфигурации и будет работать от имени пользователя без полномочий root для максимальной безопасности.

Примечание . Дополнительные сведения о создании интерфейсных контейнеров см. в статье Создание контейнеров без корневого каталога для интерфейсных интерфейсов JavaScript.Мы будем использовать шаблоны, представленные в этой статье, для этой лабораторной работы.

Сначала скопируйте файлы Dockerfile , nginx.conf и start-nginx.sh из упомянутого ранее репозитория Git:

  $ передний диск
$ curl https://raw.githubusercontent.com/nodeshift-blog-examples/frontend-containers/main/react-project/Dockerfile.rootless -o Dockerfile
$ curl https://raw.githubusercontent.com/nodeshift-blog-examples/frontend-containers/main/react-project/start-nginx.ш -о start-nginx.sh
$ curl https://raw.githubusercontent.com/nodeshift-blog-examples/frontend-containers/main/react-project/nginx. conf -o nginx.conf  

Чтобы избежать копирования всей папки node_modules в контейнер, вы также можете создать файл .dockerignore  :

.

  $ эхо "node_modules" > .dockerignore  

Теперь вы готовы построить этот образ:

  $ docker build -t urlshortener-front .  

Примечание . Если вы используете Podman вместо Docker, вам необходимо использовать параметр --format=docker , чтобы отправить образ в Docker Hub.

Поместите образ в реестр

Теперь, когда у вас есть образ, готовый к развертыванию, вы можете использовать команду docker push для сохранения этого образа в реестре. Не стесняйтесь использовать любой реестр для этого шага. Если у вас нет доступа к реестру образов, вы можете создать бесплатную учетную запись на Quay.io или перейти к этапу развертывания и использовать общедоступный образ.

Чтобы отправить этот образ в реестр, используйте следующую команду, заменив %REGISTRY_USERNAME% на ваше фактическое имя пользователя:

  $ docker push urlshortener-front %REGISTRY_USERNAME%/urlshortener-front  

Этот образ приложения теперь доступен для использования OpenShift.

Развертывание внешнего интерфейса

Теперь вы готовы развернуть этот образ в своем кластере OpenShift. Используя инструмент командной строки oc , вы можете инициировать развертывание с помощью одной команды:

  $ oc новое приложение %REGISTRY_USERNAME%/urlshortener-front  

Если вы не отправили свое пользовательское изображение в общедоступный реестр, вы также можете использовать это изображение с последней версией внешнего интерфейса для сокращения URL-адресов:

.

  $ oc новое приложение nodeshift/urlshortener-front  

Теперь OpenShift загрузит образ из вашего реестра и создаст с ним новое приложение.

Примечание . Если вы столкнулись с сообщением об ошибке о достижении ограничения скорости, см. статью Как обойти новое ограничение скорости загрузки Docker в Red Hat OpenShift.

Предоставление доступа к приложению

Внешний интерфейс был развернут в вашем кластере, но пока никто не может получить к нему доступ из-за пределов кластера. Чтобы включить доступ, вам нужно открыть службу, созданную с помощью маршрута. Введите следующую команду:

  $ oc выставить svc/urlshortener-front --port=8080  

Теперь ваше приложение полностью развернуто в OpenShift, и вы должны увидеть его в представлении OpenShift Topology вашего приложения, показанном на рисунке 4.

Рисунок 4: Просмотр демонстрационного приложения в представлении топологии OpenShift.

Проверить статус приложения

Если вы нажмете кнопку  Open URL  рядом с вашим приложением в представлении топологии, должно открыться интерфейсное приложение.

Здесь вы можете просмотреть список URL-адресов перенаправления (в настоящее время пуст). Вы также можете увидеть форму для добавления новых URL-адресов (в настоящее время нерабочих). Наконец, третья ссылка на панели навигации ведет на страницу «О программе».Там вы можете увидеть состояние API Node.js, базы данных Mongo и службы перенаправления, как показано на рис. 5.

Рисунок 5: Службы, доступные после развертывания.

Все индикаторы в настоящее время красные, потому что передняя часть не имеет задней части, с которой можно было бы поговорить. Мы рассмотрим этот вопрос во второй части лабораторной работы.

Заключение к части 1

В части 1 этой лабораторной работы вы начали работу в тестовой среде разработчика. Вы загрузили приложение, развернули его в OpenShift, и внешний интерфейс работает.Мы заполним приложение в частях 2 и 3 этой лабораторной работы.

JavaScript растет и играет в песочнице

Около 12 лет назад я боролся с проигрышной кампанией против повсеместного распространения JavaScript. Было время, когда JavaScript был кошмаром с точки зрения безопасности, и я ругал и бредил его. С тех пор многое изменилось, и все в лучшую сторону. Несколько лозунгов, которые я и мои коллеги выкрикивали с крыш в прошлом тысячелетии, похоже, застряли в общественном сознании: «Использование JavaScript небезопасно» или «JavaScript нельзя использовать для шифрования». Эти лозунги уже не соответствуют действительности. В этом посте немного рассказывается о том, как все изменилось.

То, что произошло за последние десять лет, можно разделить на две категории. Первая связана с тем, как разработчики браузеров смотрят на JavaScript. Все уязвимости в обработке JavaScript научили разработчиков браузеров более систематично и осторожно обращаться с самим JavaScript. За это время дизайн JavaScript и браузеров претерпел множество изменений.

Игра в песочнице

Вторая категория изменений более поздняя, ​​и она действительно меняет игру.Модное слово «песочница» требует большого пояснения, потому что оно используется повсюду по-разному. Грубо говоря, идея состоит в том, что что-то может делать то, что хочет, в пределах ограниченной области и не может реально взаимодействовать ни с чем за пределами этой песочницы. Это безопасное место для игр.

Расширенная песочница браузера влияет на 1Password двумя очень важными способами, и они связаны с двумя разными видами песочницы, которые имеют отношение к нам.

Песочница браузера

Первая песочница, которая важна для нас, заключается в том, что браузеры становятся все более ограничивающими в том, с какими элементами вашей системы они могут взаимодействовать.То, как 1Password взаимодействует с Safari 5.0 и более ранними версиями, сильно отличается от того, как 1Password может взаимодействовать с Safari 5.1 и более поздними версиями. До Safari 5.1 в Safari были «перехватчики», которые позволяли внешним приложениям взаимодействовать с Safari. Но в Chrome с самого начала и в Safari с версии 5.1 такое общение запрещено. Это серьезное улучшение безопасности; он ограничивает ущерб, который может нанести эксплойт браузера. Успешный эксплойт браузера теперь может взаимодействовать только с данными и процессами, которые находятся в песочницах браузера.

В результате нам пришлось полностью переработать наше расширение Safari, чтобы оно соответствовало более жесткой и лучшей модели безопасности Safari. Это означает, что 1Password должен работать в браузере, чтобы выполнять свою работу. Эта работа должна быть выполнена с использованием только CSS, HTML и JavaScript. Очевидно, что для 1Password большая часть этой работы будет выполняться на JavaScript.

Песочница расширения

Расширения браузера не должны наступать друг другу на пятки. Нам нужно предотвратить это не только из соображений безопасности, но и из соображений стабильности.Расширение X не должно видеть базу данных, созданную расширением Y. Поэтому каждое расширение Safari также помещается в собственную песочницу. Это не только защищает других от неправильного поведения расширения, но и защищает расширение от внешнего вмешательства из других источников, включая JavaScript на веб-странице, которую посещает браузер.

JavaScript и шифрование

Раньше люди говорили, что в JavaScript нельзя выполнять шифрование (потому что в нем нет правильных типов данных и потому что интерпретируемый язык слишком медленный).Я подозреваю, что большинство читателей заметили, что за последние 10 лет компьютеры стали немного быстрее. Таким образом, хотя JavaScript, возможно, не является первым выбором процедур шифрования кодирования языка, в настоящее время существуют хорошо разработанные, общедоступные реализации всех алгоритмов и протоколов, на которые мы полагаемся.

Пользователи 1PasswordAnywhere на протяжении многих лет уже сталкивались с тем, что JavaScript открывал их данные 1Password.

Времена и практические правила меняются

Кажется, вчера (хотя на самом деле это было много лет назад) я говорил людям распространять документы в формате PDF, а не в текстовом редакторе, потому что PDF-файлы нельзя использовать в той же способ.(Кроме того, я хотел бы упомянуть, что есть новое обновление безопасности для iPhone, которое исправляет эксплойт, который может жить во вредоносном PDF-файле). Верно также и то, что совет по поводу пароля, который я бы дал 10 лет назад, сильно отличается от того, что я дал бы сейчас. Инструменты и угрозы сильно изменились. Так и с JavaScript.

Джеффри Голдберг

Главный архитектор безопасности

Понимание выражений JavaScript · Песочница Cribl

Добро пожаловать в нашу учебную песочницу! Этот интерактивный курс покажет вам, как использовать различные типы выражений в вашей среде Cribl LogStream. Курс должен занимать не более 10 минут.

Этот экземпляр песочницы будет работать в течение 24 часов, после чего вы сможете получить новую песочницу, но ваш прогресс будет потерян. Чтобы повторно подключиться к песочнице, просто вернитесь на https://sandbox.cribl.io/ и повторно введите свой адрес электронной почты.

В этом руководстве следующее форматирование указывает (соответственно) действия, которые мы ожидаем от вас; контент, который вы можете пропустить; и команды или содержимое, которое необходимо вставить в LogStream.

Важный текст показывает действия, которые необходимо предпринять.Для каждого из этих разделов дальнейшие разделы будут зависеть от того, предприняли ли вы эти действия в LogStream.

Примечания содержат необязательные шаги. Вы можете пропустить их, не нарушая инфраструктуру, которую мы строим.

  Предварительно отформатированный текст содержит команды,
вставленный в терминал, или содержимое
для вставки в LogStream.  Там есть
возможность простого копирования доступна на этих
правый верхний угол разделов.
  

Если вы где-то застряли в этом руководстве, мы включили простой способ запросить помощь.Просто пообщайтесь с нами, нажав на виджет внутренней связи.

LogStream должен автоматически войти в систему, но если вы слишком долго бездействуете или отключитесь, возможно, вам будет предложено войти в систему. Имя пользователя — это admin , а пароль — cribldemo .

Эта песочница включает консоль терминала. Мы будем работать исключительно в пользовательском интерфейсе LogStream, поэтому по умолчанию терминал скрыт для экономии места на экране. Однако вы можете щелкнуть значок терминала, чтобы отобразить его.

Чтобы снова скрыть терминал, нажмите X в правом верхнем углу. Вы можете переключить отображение терминала в любое время.

Теперь давайте взглянем на обзор курса!

.