React Frontend Developer

Question 1

Как работают Content Security Policy (CSP) заголовки и атрибуты вроде integrity в теге <script>?

Accepted Answer

Content Security Policy (CSP) — это механизм безопасности, который позволяет разработчикам контролировать, какие ресурсы могут быть загружены и выполнены на веб-странице. CSP реализуется с помощью HTTP-заголовка Content-Security-Policy, где можно указать разрешенные источники скриптов, стилей и других ресурсов. Это помогает предотвратить загрузку вредоносного контента и снижает риск атак типа XSS.

Чтобы внедрить CSP, достаточно добавить соответствующий заголовок на сервер или в мета-тег на странице.

Question 2

Что такое Content Delivery Network (CDN) и как правильно подключать ресурсы HTML через CDN для повышения производительности?

Accepted Answer

Content Delivery Network (CDN) — это сеть серверов, расположенных по всему миру, которые хранят копии статических ресурсов веб-сайта, таких как изображения, CSS и JavaScript. Подключение ресурсов через CDN позволяет загружать их с ближайшего сервера, что ускоряет время загрузки страницы и снижает нагрузку на основной сервер. Для подключения через CDN обычно используют URL внешних ресурсов, например:

Question 3

Как реализовать Content Security Policy (CSP) для защиты веб-приложений на JavaScript?

Accepted Answer

Content Security Policy (CSP) — это механизм безопасности, который позволяет разработчикам контролировать, какие ресурсы могут быть загружены и выполнены на веб-странице. CSP реализуется с помощью HTTP-заголовка Content-Security-Policy, где можно указать разрешенные источники скриптов, стилей и других ресурсов. Это помогает предотвратить загрузку вредоносного контента и снижает риск атак типа XSS.

Чтобы внедрить CSP, достаточно добавить соответствующий заголовок на сервер или в мета-тег на странице.

Question 4

Как работает flex-direction и как он влияет на justify-content и align-items?

Accepted Answer

flex-direction задает направление главной оси (row — горизонтально, column — вертикально).justify-content выравнивает элементы по главной оси.align-items выравнивает по поперечной оси.

Question 5

За что отвечает align-content?

Accepted Answer

Свойство align-content управляет распределением пространства между рядами (линиями) внутри flex-контейнера по поперечной оси, когда есть дополнительное свободное место. Оно работает только если у контейнера задано flex-wrap: wrap (или wrap-reverse) и существует более одной строки flex-элементов. Основные значения: stretch (по умолчанию, строки растягиваются), flex-start (строки группируются в начале), center (строки группируются по центру), space-between (равномерное распределение), space-around (равномерное распределение с отступами по краям).

Question 6

Что такое First Contentful Paint (FCP)?

Accepted Answer

First Contentful Paint (FCP) — это метрика производительности, которая измеряет время от начала загрузки страницы до момента, когда браузер отображает первый фрагмент контента, например текст или изображение. Она помогает оценить, насколько быстро пользователь видит, что страница начинает загружаться. Хорошее значение FCP — менее 1.8 секунды.

Question 7

Какие существуют CSP directives?

Accepted Answer

CSP директивы определяют, какие ресурсы могут загружаться на странице. Основные: default-src (базовое правило), script-src (скрипты), style-src (стили), img-src (изображения), connect-src (сетевые запросы), font-src (шрифты), frame-src (фреймы), object-src (плагины). Они помогают предотвратить XSS и инъекции.

Question 8

Что такое hash в CSP?

Accepted Answer

Hash в CSP — это криптографический хеш (SHA-256, SHA-384 или SHA-512) от содержимого inline-скрипта или стиля. Он добавляется в заголовок Content-Security-Policy, чтобы разрешить выполнение только тех inline-кодов, чей хеш совпадает. Это позволяет безопасно использовать inline-скрипты без отказа от CSP.

Question 9

Какие угрозы решает CSP?

Accepted Answer

CSP (Content Security Policy) — это HTTP-заголовок, который позволяет контролировать, какие ресурсы (скрипты, стили, изображения) могут загружаться на странице. Он предотвращает XSS-атаки, блокируя выполнение инлайн-скриптов и загрузку ресурсов с недоверенных источников. CSP задаётся через заголовок Content-Security-Policy и может быть настроен для разных типов контента.

Question 10

Что такое Content-Type и Accept заголовки и в чём разница между ними?

Accepted Answer

Content-Type указывает, в каком формате сервер отправляет данные (например, application/json). Accept сообщает серверу, какие форматы данных клиент готов принять. Разница в том, что Content-Type описывает текущий формат тела запроса или ответа, а Accept — предпочтения клиента для ответа. Сервер использует Accept, чтобы выбрать подходящий формат для ответа.

Вопросы React Frontend Developer