Как работает HTML Code Runner

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

Обзор архитектуры

HTML Code Runner — это исключительно клиентское приложение. Нет кода обработки внутреннего сервера, фрагментов базы данных, хранящих фрагменты, и вызовов API к внешним службам. Весь инструмент запускается в браузере пользователя с использованием стандартных веб-технологий: HTML, CSS и JavaScript.

Конвейер выполнения кода

При нажатии кнопки «Выполнить» происходит следующая последовательность действий:

  1. Захват кода. HTML-содержимое редактора текстовой области считывается как строка.
  2. Создание Blob — строка кода заключена в объект Blob с типом MIME text/html
  3. Генерация URL-адреса – временный URL-адрес BLOB-объекта создается с помощью URL.createObjectURL()
  4. Загрузка Iframe – URL-адрес большого двоичного объекта присваивается атрибуту src изолированного iframe.
  5. Рендеринг. Браузер отображает HTML-документ внутри iframe, выполняя любой встроенный CSS и JavaScript.
  6. Захват консоли – методы console.log, console.error и console.warn iframe переопределяются для передачи вывода на панель вывода консоли.
  7. Очистка – URL-адрес BLOB-объекта отзывается после загрузки, чтобы освободить память.

Модель безопасности

Безопасность является ключевым моментом при проектировании. Мы используем несколько уровней изоляции:

Iframe в песочнице

В окне предварительного просмотра iframe используется атрибут HTML5 песочница со следующими разрешениями:

  • allow-scripts — включает выполнение JavaScript внутри iframe (необходимо для предварительного просмотра JS).
  • allow-modals — разрешает диалоговые окна alert(), confirm() и prompt()
  • allow-same-origin — требуется для загрузки URL-адреса BLOB-объекта (содержимое должно иметь общее происхождение с URL-адресом BLOB-объекта).

Песочница явно не включает в себя:

  • allow-top-navigation — iframe не может перемещаться по родительской странице.
  • allow-forms — отправка форм блокируется (предотвращает случайную утечку данных).
  • allow-popups — всплывающие окна блокируются.

Изоляция URL-адреса BLOB-объекта

Вместо внедрения кода через document.write() или srcdoc мы используем URL-адреса Blob. Это обеспечивает лучшую изоляцию, поскольку браузер рассматривает URL-адрес BLOB-объекта как отдельный документ со своим собственным контекстом выполнения.

Нет обработки на стороне сервера

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

Редактор дизайна

Редактор кода представляет собой стилизованный элемент

  • Номера строк — синхронизированная панель, доступная только для чтения, которая отображает номера строк и прокручивается вместе с редактором.
  • Поддержка табуляции: клавиша Tab вставляет два пробела вместо перемещения фокуса (стандартное поведение редактора кода).
  • Шрифт Monospace — использует JetBrains Mono для оптимальной читаемости кода.
  • Проверка орфографии отключена: браузер не подчеркивает «опечатки» в коде.

Вопросы производительности

  • Весь инструмент загружается в один файл HTML с двумя небольшими файлами JS и одним файлом CSS.
  • Никакие фреймворки или библиотеки JavaScript не используются — весь код — это ванильный JS.
  • Шрифты загружаются асинхронно с помощью font-display: swap
  • Инструмент становится интерактивным в течение миллисекунд после загрузки страницы.
  • URL-адреса больших двоичных объектов отзываются после использования во избежание утечек памяти.

Доступность

Инструмент разработан с учетом доступности:

  • Все интерактивные элементы имеют метки ARIA.
  • В аккордеоне часто задаваемых вопросов используются правильные состояния aria-expanded.
  • Фокус четко виден на всех интерактивных элементах.
  • Цветовой контраст соответствует рекомендациям WCAG AA.
  • Инструмент полностью управляем с помощью клавиатуры.
  • В всплывающих уведомлениях используются role="status" и aria-live="polite".

Адаптивный дизайн

Интерфейс адаптируется ко всем размерам экрана:

  • Рабочий стол (1024 пикселя и выше) – параллельные панели редактора и предварительного просмотра.
  • Планшет (768–1024 пикселей) – расположенные друг над другом панели с макетом на всю ширину.
  • Мобильные устройства (<768 пикселей) – сгруппированные панели, свернутая навигация, оптимизированные сенсорные цели.

SEO-реализация

Каждая страница этого сайта включает в себя:

  • Уникальные теги заголовков и метаописания.
  • Семантические элементы HTML5 (заголовок, основной, нижний колонтитул, навигация, раздел, статья)
  • Канонические URL-адреса для предотвращения проблем с дублированием контента
  • Структурированные данные (JSON-LD) для схем WebPage, SoftwareApplication, FAQPage и BreadcrumbList.
  • Теги Hreflang для многоязычной поддержки.
  • Один H1 на странице с правильной иерархией заголовков.

Попробуйте HTML Code Runner →