JS

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

• Используйте Popover API для большинства поповеров.
• Используйте Dialog API только для модальных диалогов.

Firefox 148 стал первым браузером, реализовавшим стандартизированный Sanitizer API — новый инструмент, который встраивает санитизацию HTML непосредственно в процесс вставки содержимого в DOM и делает защиту от XSS доступной по умолчанию.

Межсайтовый скриптинг (XSS) по-прежнему остаётся одной из наиболее распространённых уязвимостей в интернете. Новый стандартизированный Sanitizer API даёт веб-разработчикам простой способ очищать ненадёжный HTML перед его вставкой в DOM. Firefox 148 стал первым браузером, поставившим этот API в стабильную версию, — ожидается, что остальные браузеры последуют примеру в ближайшее время.

XSS-уязвимость возникает, когда сайт непреднамеренно позволяет злоумышленникам внедрять произвольный HTML или JavaScript через пользовательский контент. С её помощью атакующий может отслеживать и подменять действия пользователей и систематически похищать их данные — до тех пор, пока уязвимость не будет устранена. XSS исторически крайне сложен в предотвращении и на протяжении почти десяти лет стабильно входит в тройку самых опасных веб-уязвимостей (CWE-79).

Mozilla участвовала в борьбе с XSS с самого начала: ещё в 2009 году Firefox инициировал разработку стандарта Content-Security-Policy (CSP). CSP позволяет сайтам ограничивать, какие ресурсы (скрипты, стили, изображения и т. д.) браузер вправе загружать и исполнять, формируя надёжный рубеж обороны. Тем не менее, несмотря на постоянные улучшения, CSP так и не получил широкого распространения: его внедрение требует существенных архитектурных изменений и регулярного внимания специалистов по безопасности.

Sanitizer API призван заполнить этот пробел, предоставляя стандартизированный механизм преобразования вредоносного HTML в безопасный. Метод setHTML() встраивает санитизацию непосредственно в процесс вставки HTML, обеспечивая защиту на уровне умолчаний. Пример очистки небезопасного HTML:

document.body.setHTML(`<h1>Hello my name is <img src="x" 
onclick="alert('XSS')">`);

При такой санитизации элемент <h1> будет сохранён, а элемент <img> вместе с атрибутом onclick — удалён, что устраняет XSS-атаку. В результате останется следующий безопасный HTML:

<h1>Hello my name is</h1>

Разработчики могут усилить защиту от XSS с минимальными изменениями в коде, заменив подверженные ошибкам присваивания innerHTML на вызовы setHTML(). Если настройки по умолчанию окажутся слишком строгими или, напротив, недостаточно строгими для конкретного случая, можно передать пользовательскую конфигурацию, определяющую, какие элементы и атрибуты следует сохранить или удалить. Для экспериментов до внедрения API на продакшн-сайте рекомендуется воспользоваться песочницей Sanitizer API.

Для ещё более надёжной защиты Sanitizer API можно сочетать с Trusted Types, которые централизуют контроль над разбором и вставкой HTML. После перехода на setHTML() включить принудительное применение Trusted Types становится проще — зачастую без необходимости создавать сложные пользовательские политики. Строгая политика может разрешать setHTML(), блокируя остальные небезопасные способы вставки HTML, что помогает предотвращать регрессии в безопасности.

Sanitizer API упрощает замену присваиваний innerHTML на вызовы setHTML() в существующем коде, устанавливая новый безопасный стандарт и защищая пользователей от XSS-атак. Firefox 148 поддерживает как Sanitizer API, так и Trusted Types. Принятие этих стандартов позволит любому разработчику предотвращать XSS без выделенной команды безопасности и масштабных архитектурных изменений.

Наверняка вы сто раз видели кнопку Скопировать, например, возле блоков кода в любимой нейронке, чтобы быстро их скопипастить. Давайте разберемся, как самостоятельно сделать такую же (кнопку, а не нейронку).

Генерация UUID — одна из тех фундаментальных задач, с которой сталкивается каждый разработчик. Universally Unique Identifier, или универсальный уникальный идентификатор, решает простую, но критически важную задачу: создание гарантированно уникального идентификатора.

JSON (JavaScript Object Notation) — это текстовый формат для представления структурированных данных. Он повсеместно используется для обмена информацией между клиентом и сервером, хранения конфигураций и сериализации состояний. В JavaScript его преобразование в рабочие объекты выполняется стандартным методом JSON.parse(). Ниже описаны корректные и надёжные способы его применения — от базового использования до промышленных практик.

Часто бывает нужна какая-нибудь конкретная регулярка — например, проверить почту или номер телефона. Собрали 40 часто встречаемых, чтобы они всегда были под рукой (или, на худой конец, в закладках).

Сохрани страницу — и 40 самых полезных регулярных выражений всегда под рукой!

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

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Инструменты разработчика в браузере Chrome лишатся одной из своих экспериментальных возможностей — «живого редактирования» JavaScript-кода. Как сообщила команда разработчиков в официальном блоге, функция будет полностью удалена в феврале 2026 года с выходом версии Chrome 145. Это решение отражает эволюцию современных инструментов веб-разработки.

API Intl.RelativeTimeFormat доступно в Baseline в статусе «Widely Available» с 16 марта 2023 года. Это мощный инструмент для отображения относительного времени в локализованном виде, например, «через минуту», «вчера» или «2 недели назад». Он автоматически адаптируется к языку и культурным особенностям региона, делая интерфейс более понятным и дружелюбным для пользователей.

В этой статье мы разберём, как работает Intl.RelativeTimeFormat, и приведём несколько примеров его использования.

Операторы ?? и ??= стали доступны в Baseline в статусе «Widely Available» с 16 марта 2023 года. Они упрощают работу с переменными, которые могут быть null или undefined, позволяя задавать значения по умолчанию или обновлять переменные только в этих случаях. Это делает код чище и понятнее, особенно при работе с потенциально отсутствующими данными.

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