web и сети Flashcards
https://github.com/RomE-HK/QA_Interview_Questions/blob/main/MiddleQA.md
REST - расшифровка
Representational State Transfer
REST - суть
REST (Representational State Transfer) — это архитектурный стиль. В отличие от SOAP, который является протоколом, он не подчиняется строгим стандартам, более гибкий, простой и легковесный.
В основе REST лежат стандартные HTTP-методы (GET, POST, PUT, DELETE), а основным форматом данных для него является JSON. Также он позволяет передавать данные в виде текста, XML, HTML и другие.
SOAP - расшифровка
Simple Object Access Protocol
SOAP - суть
SOAP (Simple Object Access Protocol) - это протокол обмена данными, основанный на XML, который используется для передачи сообщений между приложениями. Он более строгий и более сложный для использования, чем REST.
Отличия SOAP и REST
SOAP | REST
Протокол | архитектурный стиль
Any transport protocol | HTTPS only
XML only | JSON, HTML, plain text, XML
Slower | Faster (message size)
Плохо масштабируется | Хорошо масштабируется (stateless)
Шифрование через WS-Secure | Шифрование через HTTPS
SOAP - legacy and private APIs
REST - modern applications and public APIs
Статус коды 1XX
1xx: Информационные
- 100 Continue: Промежуточный ответ, указывающий, что начальная часть запроса принята и клиент может продолжать отправку данных.
- 101 Switching Protocols: Сервер соглашается переключить протоколы в соответствии с запросом клиента, отправленным в заголовке Upgrade.
Статус коды 2ХХ
2xx: Успешные
- 200 OK: Стандартный ответ для успешных HTTP-запросов. Ресурс успешно обработан и передан в теле ответа.
- 201 Created: Запрос был успешно выполнен, и в результате был создан новый ресурс.
- 204 No Content: Запрос успешно обработан, но в ответе нет содержимого.
Статус коды 3XX
3xx: Перенаправления
- 301 Moved Permanently: Запрашиваемый ресурс был окончательно перемещен на URL, указанный в заголовке Location. Клиент должен использовать этот новый URL в будущем.
- 302 Found: Запрашиваемый ресурс временно находится по другому URI, указанному в заголовке Location.
- 304 Not Modified: Ресурс не был изменен с момента последнего запроса клиента, использующего условные заголовки типа If-Modified-Since или If-None-Match.
Статус коды 4XX
4xx: Ошибки клиента
- 400 Bad Request: Сервер не может обработать запрос из-за неверного синтаксиса.
- 401 Unauthorized: Для доступа к запрашиваемому ресурсу требуется аутентификация.
- 403 Forbidden: Сервер понял запрос, но отказывается его авторизовать.
- 404 Not Found: Запрашиваемый ресурс не найден на сервере.
- 405 Method Not Allowed: Метод, указанный в запросе, не поддерживается для данного ресурса.
- 418 I’m a Teapot: Сервер не может приготовить кофе, т.к. он чайник
Статус коды 5XX
5xx: Ошибки сервера
- 500 Internal Server Error: Общая ошибка сервера, когда сервер сталкивается с непредвиденными обстоятельствами.
- 501 Not Implemented: Сервер не поддерживает функциональные возможности, необходимые для обработки запроса.
- 502 Bad Gateway: Сервер, выступая в роли шлюза или прокси, получил неверный ответ от вышестоящего сервера.
- 503 Service Unavailable: Сервер временно не может обработать запрос из-за перегрузки или технического обслуживания.
- 504 Gateway Timeout: Шлюз или прокси-сервер не получил вовремя ответ от вышестоящего сервера для завершения запроса.
HTML
HTML (HyperText Markup Language) - язык разметки веб-страниц на основе тегов и атрибутов.
CSS
CSS (Cascading Style Sheets - язык для описания внешнего вида и форматирования документа.
JavaScript
JavaScript (JS) — это легковесный интерпретируемый язык программирования с функциями первого класса.
Мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Часто используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Что такое клиент-серверная архитектура?
Клиент-серверная архитектура - вычислительная или сетевая архитектура, в которой задания или сетевая нагрузка распределены между поставщиками услуг, называемыми серверами, и заказчиками услуг, называемыми клиентами.
Фактически клиент и сервер - это программное обеспечение. Обычно эти программы расположены на разных вычислительных машинах и взаимодействуют между собой через вычислительную сеть посредством сетевых протоколов, но они могут быть расположены также и на одной машине. Программы-серверы ожидают от клиентских программ запросы и предоставляют им свои ресурсы в виде: данных (например, загрузка файлов посредством HTTP, FTP, BitTorrent, потоковое мультимедиа или работа с базами данных); сервисных функций (например, работа с электронной почтой, общение посредством систем мгновенного обмена сообщениями или просмотр web-страниц во всемирной паутине).
Поскольку одна программа-сервер может выполнять запросы от множества программ-клиентов, ее размещают на специально выделенной вычислительной машине, настроенной особым образом, как правило, совместно с другими программами-серверами, поэтому производительность этой машины должна быть высокой. Из-за особой роли такой машины в сети, специфики ее оборудования и программного обеспечения, её также называют сервером, а машины, выполняющие клиентские программы, соответственно, клиентами.
Как работает данная модель простыми словами?
- Клиент (браузер, мобильное приложение) отправляет HTTP-запрос к серверу. Пользователь ввел запрос в поисковую строку интернет-магазина
- Сервер обрабатывает запрос и присылает HTTP-ответ клиенту. Сервер магазина обработал запрос и обратился к базе данных в поиске искомого товара (см. шаг 3). После этого сервер вернул массив карточек товаров в ответе и пользователь увидел их на клиенте (в браузере).
- Если необходимо получить данные, которые сохраняются в базе данных, то сервер обращается к базе и получает ответ от нее. Сервер базы данных обработал запрос и выдал серверу идентификаторы товаров, которые подходят поисковому запросу.
Основные характеристики:
- Разделение функций: Отвечает за представление данных пользователю и взаимодействие с пользователем, в то время как сервер занимается обработкой данных, управлением ресурсами и выполнением задач.
- Централизованное управление: Данные и управляющая логика часто централизованы на сервере, что облегчает обновление, обслуживание и управление безопасностью.
- Масштабируемость: Архитектура позволяет легко добавлять, обновлять и масштабировать серверные ресурсы в ответ на изменяющиеся требования без необходимости изменения клиентской части.
- Гибкость: Могут взаимодействовать с различными серверами, а сервера могут обслуживать различных клиентов, что обеспечивает высокую степень гибкости и повторное использование компонентов.
Компоненты:
- Клиент (Client): Приложение или устройство, используемое пользователем для доступа к сервисам и ресурсам сервера. Клиенты инициируют запросы к серверам.
- Сервер (Server)^ Мощная система или программное обеспечение, обрабатывающее запросы клиентов, выполняет обработку данных, управляет ресурсами (например, базами данных) и предоставляет различные сервисы.
- Сеть (Network): Среда передачи данных, которая соединяет клиентов и серверы, обычно через Интернет или локальную сеть (LAN).
Типы клиент-серверных архитектур:
- Одноуровневая (1-Tier): Клиент и сервер находятся на одной машине, и нет сетевого взаимодействия.
- Двухуровневая (2-Tier): Прямое взаимодействие между клиентом и сервером, например, клиентское приложение взаимодействует напрямую с базой данных на сервере.
- Трёхуровневая (3-Tier): Включает промежуточный уровень, например, приложение сервера, которое действует как посредник между клиентом и сервером базы данных, облегчая процесс обработки запросов.
- Многоуровневая (N-Tier): Более сложная структура с несколькими уровнями, которые могут включать балансировщики нагрузки, сервера приложений, сервера баз данных, сервера кэширования и т.д.
Клиент-серверная архитектура остаётся основным выбором для разработки современных приложений благодаря своей гибкости, масштабируемости и эффективности в управлении ресурсами и обработке данных.
Что может выступать в качестве клиента?
- Браузер
- Десктопное приложение
- Мобильное приложение
Какие протоколы передачи данных знаете?
- IP
- TCP
- UDP
- HTTP
- DNS
- SSH
- FTP
- SSL/TLS
- WebSockets
Internet Protocol — IP
IP отвечает за поиск компьютеров в сети по их IP-адресам. Ещё он предоставляет стратегию маршрутизации, то есть составляет оптимальный маршрут для передачи данных.
Данные в интернете передаются IP-пакетами. У каждого пакета есть заголовок и данные. В заголовке находятся IP-адреса источника и пункта назначения. Данные — это само содержимое, например, часть веб-страницы.
Работу IP можно сравнить с почтовым отделением: протокол направляет IP-пакеты по интернету так же, как почта рассылает письма по всему миру. При доставке почта использует пункты передачи: письмо из отделения сначала попадает на поезд, потом на грузовик и в конце вручается адресату. В интернете тоже есть «пункты передачи» — их называют маршрутизаторами. Цель маршрутизатора — отправить пакет в пункт назначения по самому короткому пути. Если всё идёт хорошо, пакет прибывает на ближайший к получателю маршрутизатор, который точно знает, куда его отправить. Но бывает и так, что какой-то из маршрутизаторов на пути взломан или вышел из строя, и тогда выбирается другой путь.
DNS
Уникальный IP-адрес есть у каждого домена. Он записывается в виде четырёх чисел от нуля до 255 — например, 74.125.20.113.
DNS связывает IP-адрес с понятным для людей доменным именем, например, 178.79.181.169 превращается в htmlacademy.ru
Принцип работы DNS похож на поиск и вызов контактов в телефоне. Вряд ли кто-то помнит 1317а друзей — да это и необязательно, ведь они хранятся в списке контактов. Когда мы хотим кому-то позвонить, то просто находим нужное имя и нажимаем кнопку вызова — в этот момент начинается соединение, но не по имени, а по 1317у телефона.
DNS-сервер — это и есть «список всех контактов», то есть IP-адресов, которые там хранятся. Каждому IP-адресу присвоен домен. И когда мы вводим в строке браузера имя домена, то происходит запрос к DNS-серверу — запрашивается IP-адрес.
SSL/TLS
SSL — криптографический протокол шифрования запросов и ответов, он нужен для безопасного перемещения данных по интернету, а TLS — его продвинутая версия. SSL уже почти не используют, но это название было таким популярным, что его до сих пор употребляют, а любой SSL-сертификат у хостинг-компаний — TLS-сертификат.
TCP и UDP
Оба протокола отвечают за передачу данных и работают поверх IP, но с небольшой разницей. TCP доставляет данные без потерь, поэтому его используют для передачи фотографий, сообщений и другой важной информации. А вот UDP не гарантирует доставку, но зато он гораздо быстрее. Его используют, когда скорость важнее надёжности, например, при передаче аудиосообщений или видеотрансляциях.
HTTP и HTTPS
HTTP и HTTPS предназначены для передачи данных и в итоге пользователи могут просматривать веб-страницы. На самом деле HTTPS — это не отдельный протокол, а расширение HTTP. Он безопаснее, так как использует SSL/TLS для шифрования обычных запросов и ответов.
HTTP
HTTP — один из самых используемых протоколов в интернете, поэтому посмотрим подробнее, как он работает.
Протокол работает в формате запрос-ответ с двумя участниками общения:
клиент — формирует запросы и обрабатывает ответы;
сервер — обрабатывает запросы и формирует ответы.
Клиент делает запрос на сервер для передачи каждого ресурса: файлов HTML, CSS, JavaScript, изображений или видеофайлов. Затем сервер отвечает на запрос, отправляя ресурс.
Для каждого запроса и ответа открывается своё TCP-соединение. При каждом соединении происходит трёхстороннее «рукопожатие»: клиент и сервер трижды обмениваются пустыми пакетами данных, чтобы удостовериться в существовании друг друга и готовности к работе с данными.
Трёхстороннее «рукопожатие» нужно проводить в каждом TCP-соединении, так как HTTP не запоминает состояния, поэтому ни клиент, ни сервер не могут сохранять информацию между различными запросами. HTTP — один из самых ранних протоколов, и при его создании никто не ожидал, что на веб-странице придётся загружать так много ресурсов.
Такое «рукопожатие» делает загрузку страницы медленнее. Чтобы решить проблему, разработчикам приходится сокращать количество загружаемых ресурсов, например, использовать спрайты или разделять файлы по разным доменам — этот метод называется domain sharding. Такие манипуляции уменьшают количество TCP-соединений, хотя и создают свои трудности.
HTTP/2
HTTP/2 — улучшенная версия HTTP. По данным Can I Use, его поддерживают большинство браузеров.
Главное нововведение этого протокола — одно TCP-соединение на разные запросы, или мультиплексирование.
Ещё в HTTP/2 появился push-сервер, то есть сервер может отправлять больше ответов на один клиентский запрос. Например, если клиент запрашивает файлы index.html, style.css и logo.svg, то сервер отправит сразу три файла. Без push-сервера клиенту нужно запрашивать каждый файл отдельно
Поэтому многие оптимизации под HTTP при переходе на HTTP/2 уже не нужны. Например, можно отказаться от разделения ресурсов по доменам.
HTTP/3
HTTP/3 — третья версия HTTP, основанная на QUIC — протоколе, который предполагает быстрое подключение к интернету через UDP.
Главное преимущество HTTP/3 — сокращение задержки при установке соединения. QUIC достаточно одного «рукопожатия», чтобы установить безопасный сеанс. А ещё HTTP/3 работает поверх UDP, поэтому скорость доставки данных быстрее, чем у HTTP и HTTP/2 поверх TCP.
Протокол уже получил статус предложенного стандарта, то есть браузеры почти завершили работу над поддержкой протокола. Но пока поддержки недостаточно, чтобы переводить сайт с HTTP/2 на HTTP/3.
WebSockets
В этом протоколе соединение устанавливается гораздо быстрее, чем в HTTP — здесь отправляется «рукопожатие» сразу со всей необходимой информацией для передачи данных. Канал при этом остаётся открытым, пока кто-то из сторон не прервёт его. Это означает, что запросы и ответы будут происходить практически мгновенно. А если сервер получит новые данные, он отправит их клиенту без запроса.
Протокол WebSockets используют там, где важна скорость доставки данных, например, в чатах и мессенджерах, играх, онлайн-трансляциях. Он, скорее всего, не пригодится при разработке простых веб-приложений, небольших CMS или при использовании REST API, где достаточно HTTP-запросов GET, POST, PUT и DELETE.
HTTP методы
- GET
- HEAD
- POST
- PUT
- DELETE
- CONNECT
- OPTIONS
- TRACE
- PATCH
__
- GET - запрашивает представление ресурса. Запросы с использованием этого метода могут только извлекать данные.
- HEAD запрашивает ресурс так же, как и метод GET, но без тела ответа.
- POST используется для отправки сущностей к определённому ресурсу. Часто вызывает изменение состояния или какие-то побочные эффекты на сервере.
- PUT заменяет все текущие представления ресурса данными запроса.
- DELETE удаляет указанный ресурс.
- CONNECT устанавливает “туннель” к серверу, определённому по ресурсу.
- OPTIONS используется для описания параметров соединения с ресурсом.
- TRACE выполняет вызов возвращаемого тестового сообщения с ресурса.
- PATCH используется для частичного изменения ресурса.
Какие методы взаимодействия с API существуют?
В чем разница между ними?
SOAP (Simple Object Access Protocol) - Простой Протокол Доступа к Объектам. Клиент и сервер обмениваются сообщениями посредством XML. Это менее гибкий API, который был более популярен в прошлом.
RPC (Remote Procedure Call) - Удалённый Вызов Процедур. Клиент выполняет функцию (или процедуру) на сервере, и сервер отправляет результат обратно клиенту.
Websocket – современная разработка web API, которая использует объекты JSON для передачи данных. WebSocket поддерживает двустороннюю связь между клиентскими приложениями и сервером. Сервер может отправлять сообщения обратного вызова подключенным клиентам, что делает его более эффективным, чем REST.
REST - на сегодняшний день это самые популярные и гибкие API-интерфейсы в Интернете. Клиент отправляет запросы на сервер в виде данных. Сервер использует этот клиентский ввод для запуска внутренних функций и возвращает выходные данные обратно клиенту.
GraphQL
gRPC
Как можно протестировать API, что там нужно проверять?
Через отправку запросов по соответствующему протоколу (REST, SOAP).
- Код ответа
- Корректность ответа
- Заголовки ответа?
- Сверка ответа со схемой
Проверка спецификации:
эндпоинты правильно именованы
ресурсы и их типы правильно отражают объектную модель
нет отсутствующей или дублирующей функциональности
отношения между ресурсами правильно отражаются в API
Как расшифровывается CRUD?
- Create
- Read
- Update
- Delete
Терамин обозначающий четыре базовые функции: создание (create), чтение (read), редактирование (update) и удаление (delete). Как правило, термин “CRUD” употребляется в контексте работы с хранилищем данных.
Чем отличается GET от POST?
- GET для получения данных
- POST используется для обновления, отправляет данные в теле запроса
Какие отличия между XML и JSON?
XML - язык разметки.
JSON - формат для обмена данными, обычно реализуемый, как массив данных.
JSON более компактен, чем XML, его конструкции легче анализируются средствами Java Script, для которого JSON является внутренним используемым типом данных.
Ключевые различия:
- Объект JSON имеет тип, тогда как объекты XML не содержат типов
- В JSON проще получить объект нежели в XML (данные XML должны быть проанализированы)
- Читабельность JSON файла выше по сравнению с XML
- JSON не обеспечивает поддержку пространства имен, в то время как XML обеспечивает
- JSON не имеет возможностей отображения, тогда как XML имеет такую возможность
- JSON менее защищен, тогда как XML более безопасен по сравнению с JSON
- JSON поддерживает только кодировку UTF-8, тогда как XML поддерживает различные кодировки
Какие основные форматы передачи данных?
- JSON (JavaScript Object Notation) - текстовый формат обмена данными, основанный на JavaScript, но при этом независим от JS.
- XML (eXtensible Markup Language/расширяемый язык разметки) - используется для хранения и передачи данных. формат рекомендован Консорциумом Всемирной паутины (W3C), поэтому часто используется для передачи данных по API. Единственно возможный формат входных и выходных данных в SOAP.
- CSV (Comma-Separated Values/значения, разделенные запятыми) – текстовый формат, предназначенный для представления табличных данных с фиксированным количеством столбцов. Каждая строка файла — это одна строка таблицы.
- YAML (YAML Ain’t markup language/YAML не язык разметки; ранее Yet Another Markup Language) - язык для сериализации данных, который позволяет хранить сложноорганизованные данные в компактном и читаемом формате. Похож на XML и JSON, но использует более минималистичный синтаксис при сохранении аналогичных возможностей.
Как происходит шифрование? Или как шифруются сообщения между браузером и сервером?
Handshake:
1. Клиент отправляет запрос серверу со списком SSL\TLS версий шифрования
2. Сервер выбирает лучший из доступных
2. Затем отправляет публичный ключ и свой сертификат клиенту
2. Клиент проверяет сертификат сервера
3. Затем шифрует публичным ключем сервера промежуточный ключ
4. Отправляет серверу
5. Сервер расшифровывает предварительный ключ
6. Формируется общий симметричный ключ
Виды баз данных?
- Простейшие типы БД
- Текстовые файлы, csv-файлы
- Иерархические (файловые системы, DNS, LDAP)
- Сетевые (IDMS)
- Реляционные БД (MySQL, PostgreSQL..)
- NoSQL БД
- «Ключ-значение» (Redis, memcached)
- Документные (MongoDB, RethinkDB)
- Графовые (Neo4j, Dgraph)
- Колоночные (Cassandra, HBase)
- БД временных рядов (OpenTSDB, TimescaleDB)
- Комбинированные типы БД
- NewSQL (MemSQL, VoltDB, CockroachDB)
- Многомодельные (OrientDB, Couchbase)
Охарактеризуйте каждый класс status code (1хх; 2xx; 3xx; 4xx; 5xx).
- 1xx: Информационные
- 2xx: Успешные
- 3xx: Перенаправления
- 4xx: Ошибки клиента
- 5xx: Ошибки сервера
Какие знаете Web elements?
What is Web Element?
Компоненты веб страницы:
- кнопка
- radio button
- текстовое поле,
- чекбокс,
- выпадающее поле
Зачем необходимы инструменты разработчика в браузере (Chrome DevTools) и как они помогают в тестировании.
- Переопределение геолокации и подмена User-Agent
- Определение JS пути к строке
- Изменение HTML-кода и стилей CSS у элементов
- Тестирование производительности и неиспользуемых CSS и Javascript в вёрстке
- Debug JavaScript
- Имитация медленного сетевого соединения
- Мониторинг сетевых запросов
- Информация о cookies во вкладке applications
Что такое кэш?
Кэш — это уже полученные данные и использованные один раз, а потом сохраненные на будущее.
Смысл кэша в том, чтобы в следующий раз взять данные не с далёкого и медленного сервера, а из собственного быстрого кэша.
То же самое, что закупиться продуктами на неделю и потом ходить не в магазин, а в холодильник.
Что такое сессия?
Сессия (session) – это некоторый отрезок во времени, в пределах которого веб-приложение может определять все запросы от одного клиента.
Зачем нужны cookies?
текстовые файлы небольшого размера со служебной информацией для браузера. Часто в таких файлах хранится статистика посещений, логин и пароль от сайтов или сервисов, индивидуальные настройки пользователя - регион, дизайн оформления и прочее.
В них хранятся:
- Данные для аутентификации.
- Данные о пользователе, например, язык, валюта, что он смотрел?
- Данные для сбора статистики.
Что такое фрейм?
Разделитель браузерных окон на отдельные области.
В современном мире почти не используется.
Фрейм (от англ. Frame) — это самостоятельный документ, который отображается в отдельном окне браузера и представляет собой полностью законченную HTML-страницу.
В 2022 году фрейм как отдельный элемент HTML практически не используется на публичных сайтах и технологию можно назвать устаревшей. Этот тег даже не поддерживается в HTML5. Одна из главных причин — неудобство для поисковых систем, которые формируют выдачу на основе множества фреймов одного сайта, а не единичного.
Какую структуру имеет веб-страница?
- Заголовок: <header>
- Навигационное меню: <nav>.
- Основное содержимое: <main>, с различными подразделами содержимого, представленными элементами <article>, <section> и <div>.
- Боковая панель: <aside>, обычно располагается внутри <main>.
- Нижний колонтитул: <footer>.
Зачем чистить кэш?
Чтобы браузер скачал свежие данные с сервера.
Веб-страницы могут отображаться некорректно в связи с тем, что в них были внесены изменения, а браузер продолжает использовать устаревшие данные из кэша. Также устаревший кэш может занимать место на ЖД.
Для чего в веб страницах используют JavaScript?
- Динамическое обновление содержимого
- Работа с пользовательскими событиями (клики мыши, нажатия клавиш, отправки форм и других)
- Валидация данных
- AJAX-запросы (асинхронные запросы без перезагрузки страницы)
- Создание динамических элементов интерфейса (выпадающие меню, модальные окна, слайдеры)
- Анимация
Что такое AJAX?
Ajax (Asynchronous JavaScript and XML) — это набор технологий, позволяющий веб-приложениям обмениваться данными с сервером асинхронно, то есть без необходимости перезагрузки страницы.
Расскажите об алгоритмах шифрования трафика.
-
Симметричное шифрование использует один и тот же ключ и для зашифровывания, и для расшифровывания.
- DES
- AES
- Blowfish
-
Асимметричное шифрование использует два разных ключа: один для зашифровывания (который также называется открытым), другой для расшифровывания (называется закрытым).
- RSA
Что такое NIC?
Сетевая карта или сетевой адаптер (Network interface card) - он обеспечивает физическое соединение между компьютером и сетью, обеспечивая передачу данных по сети.
Что такое NAT?
Network Address Translation - перевод локальных IP-адресов во внешние IP адреса.
- Безопасность локальной сети
- Расширение количества доступных IP
Как взаимодействовать с запросами, отправляемыми из браузера.
- DevTools
- Расширения браузера
- Перехватчики траффика - charles, fiddler
Как происходит авторизация на сервере?
- Идентификация пользователя (логин)
- Проверка данных (сравнение введенных данных с данными на сервере)
- Предоставление доступа (при верных данных)
Какая разница между идентификацией, авторизацией и аутентификацией?
Подтверждение личности и предоставление прав доступа после подтверждения личности.
Идентификация - подтверждение существования пользователя (логин)
Аутентификация - это процесс проверки подлинности пользователя, подтверждение его личности или подлинности устройства (пароль)
Авторизация - это процесс предоставления прав доступа к определенным ресурсам или функциям после успешной аутентификации пользователя или устройства.
Как протестировать адаптивную верстку?
- ПК + планшет + телефон
- DevTools
- Сервисы типа responsinator, Responsive Design Checker
Как выполнить Debug странички в браузере?
Вкладка Sources в DevTools
Что такое WebSocket и как проверить обрыв соединения?
WebSocket - это протокол передачи данных в реальном времени между клиентом и сервером через постоянное двунаправленное соединение.
Протокол для общения между клиентом и сервером, предоставляющий двухсторонне общение сверх протокола TCP.
Мы подключаем WS один раз, а затем сервер может отдавать нам ответы тогда, когда посчитает нужным.
Network - Подвкладка ws
Какая разница между методами GET и POST?
Запрос данных с сервера и отправка данных на сервер
Какая разница между методами PUT и PATCH?
PUT - создаёт заново сущность
PATCH - обновляет часть сущности
Какие знаете снифферы?
Анализатор трафика (sniffer/сниффер) — программа или устройство для перехвата и анализа сетевого трафика (своего и/или чужого).
Виды:
- аппаратные
- программные
- аппаратно-программные
- онлайн-апплеты
Известные снифферы
- Wireshark/Ethereal
- ZxSniffer
- IRIS
Что такое схема GraphQL?
GraphQL Schema– описание типов данных на сервере, связей между ними и логики получения этих самых данных.Включает в себя параметры:
- query- для операций получения данных
- mutation- для операций изменения данных
- subscription- для подписки на события
Обязательным параметром является только query, без него схема просто не запустится.
Состояние операций в GraphQL:
- stateless- все операции в query и mutation должны быть без состояния, т.е. если в кластере много машин обслуживающих запросы клиентов, то неважно на какой из серверов прилетел запрос. Его может выполнить любая нода.
- statefull- должно быть у операций subscription, т.к. требуется установка постоянного подключения с клиентом, хранение данных о подписках, механизм переподключения и восстановления данных о существующих подписках. Пакет graphql никак не помогает в решении этих админских проблем.
Движки браузеров
- Blink - chrome, opera, edge
- EdgeHTML - Edge
- Gecko - firefox
- Webkit - chrome (blink на основе webkit), safari
User-agent
Request header.
Lets identify:
1. Приложение,
2. ОС,
3. vendor,
4. version of the requesting user agent.
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Что такое GraphQL?
Это язык запросов и серверная среда для API с открытым исходным кодом.
Он появился в Facebook в 2012 году и был разработан для упрощения управления конечными точками для API на основе REST.
Проблемы REST и плюсы GraphQL
- избыточность или недостаток данных в ответе. В REST API клиенты часто получают либо слишком много данных, которые им не нужны, либо слишком мало, что вынуждает делать несколько запросов для получения необходимой информации. GraphQL позволяет клиентам запрашивать только те данные, которые им нужны, и получать их в одном запросе, что делает коммуникацию более эффективной.
- Также в REST API каждый эндпойнт обычно соответствует определенному ресурсу, что может привести к проблемам с расширяемостью и поддержкой разных версий API. В GraphQL же существует единая конечная точка для всех запросов, и схема API определяется на стороне сервера. Это делает API более гибким и облегчает его развитие.
- Ну а также во многих REST API при работе со связанными данными возникает проблема “N+1 запросов”, когда для получения связанных данных нужно делать дополнительные запросы к серверу. GraphQL позволяет выразить связи между данными и получать все необходимые данные в одном запросе.
Пример запроса GraphQL
query {
users {
id
name
posts(last: 5) {
id
text
timestamp
}
}
}Может ли сервер отправить код 400, если проблема на его стороне
400 (Bad Request) - напрямую связан с клиентом (браузером, к примеру) и намекает на то, что отправленный запрос со стороны пользователя приводит к сбою еще до того, как его обработает сервер, по крайней мере так считает сам сервер. Зачастую сервер отправляет этот код, когда появившаяся неисправность не подходит больше ни под одну категорию ошибок.
Из-за чего всплывает Bad Request:
- Некорректно настроенные HTTP-заголовки в запросе. Некоторые приложения и сайты мониторят заголовки на предмет наличия в них чего-нибудь подозрительного. Если запрос не соответствует ожиданиям сервера, то высока вероятность появления ошибки 400 (это не всегда вина пользователя).
- Если клиент пытается загрузить на сервер файл слишком большого размера. На большинстве сайтов есть ограничения по размеру загружаемых данных. Причем ограничение может быть как в 2 гигабайта, так и в 600 килобайт.
- Пользователь пытается получить доступ к несуществующей странице. То есть в браузер банально ввели ссылку с опечаткой, некорректным доменом или поддоменом.
- Устаревшие или измененные куки-файлы. Сервер может воспринять подмену куки-файлов как попытку атаковать или воспользоваться дырой в безопасности. Такие запросы сходу блокируются.
Основные виды уязвимости веб-приложений
- SQL инъекции
- RCE - удалённое выполнение кода
- XSS (межсайтовый скриптинг)
- LFI/RFI
- JSON Injection
- JSON Hijacking
- Атака внешней сущности XML
- Инъекции. Уязвимости подобного класса начинаются SQL-инъекциями, в различных вариациях, и замыкаются RCE — удаленным выполнением кода.
- XSS (Межсайтовый скриптинг) — уязвимость, встречающаяся на данный момент куда реже, чем раньше, но несмотря на это не стала менее опасной. Особенно для пользователей, ведь атака XSS нацелена именно на них. В общем случае злоумышленник внедряет скрипт в веб-приложение, который срабатывает для каждого пользователя, посетившего вредоносную страницу.
- LFI/RFI. Уязвимости данного класса позволяют злоумышленникам через браузер включать локальные и удаленные файлы на сервере в ответ от веб-приложения. Эта брешь присутствует там, где отсутствует корректная обработка входных данных, которой может манипулировать злоумышленник, инжектировать символы типа path traversal и включать другие файлы с веб-сервера.
- JSON Injection - Простая инъекция JSON на стороне сервера может быть выполнена для похищения cookie.
- JSON Hijacking (Захват JSON) — атака, в некотором смысле похожая на подделку межсайтовых запросов (CSRF), при которой злоумышленник старается перехватить данные JSON, отправленные веб-приложению с веб-сервера.
- Атака внешней сущности XML (XML External Entity/XXE) — тип атаки, в котором используется широко доступная, но редко используемая функция синтаксических анализаторов XML. Используя XXE, злоумышленник может вызвать отказ в обслуживании (DoS), а также получить доступ к локальному и удаленному контенту и службам. XXE может использоваться для выполнения подделки запросов на стороне сервера (SSRF), заставляя веб-приложение выполнять запросы к другим приложениям. В некоторых случаях c помощью XXE может даже выполнить сканирование портов и удаленное выполнение кода.
Какие инструменты для тестирования Web performance client-side знаете
Playwright with Lighthouse
https://nuancesprog.ru/p/15590/
Разница между OLTP и OLAP
OLTP (Online Transaction Processing/оперативная обработка транзакций)- метод проведения транзакций в режиме реального времени с использованием онлайновой БД, которая автоматически обновляется по мере совершения транзакций. Такие предприятия, как банки, отели и рестораны, часто используют OLTP, чтобы их сотрудники и клиенты могли одновременно и эффективно выполнять несколько транзакций в реальном времени, сохраняя при этом точность данных. По мере совершения транзакций системы OLTP автоматически обновляют остатки на счетах и сохраняют другую важную информацию, такую как дата и время. Обычно это реляционные БД.
OLAP (Online Analytical Processing/оперативная аналитическая обработка)- сервис для анализа большого объема данных по нескольким измерениям. Здесь измерение относится к элементу определенного набора данных. Например, если компания владеет данными о своих рекламных кампаниях, включая такие элементы, как воздействие на потребителей, продолжительность рекламы, доход от продукта и стоимость рекламы, она может использовать OLAP для сортировки и анализа данных по каждому элементу. Предприятия часто используют OLAP для сложных аналитических расчетов, интеллектуального анализа данных, финансового анализа, составления бюджета и прогнозирования. Обычно это многомерные БД.
Нормализация- подразумевает хранение информации максимально просто и не избыточно.
Максимально просто: не хранить в одном столбце ФИО, а сделать 3 отдельных.
Не избыточно: фамилия клиента должна храниться только в справочнике клиентов, и ее не нужно добавлять в сделанные клиентом заказы.
Денормализация- процесс противоположный нормализации.
Ключевые различия:
- OLAP – категория программных инструментов, которые анализируют данные, хранящиеся в БД, тогда как OLTP поддерживает ориентированные на транзакции приложения в трехуровневой архитектуре.
- OLAP создает единую платформу для всех типов потребностей бизнес-анализа, которая включает планирование, бюджетирование, прогнозирование и анализ, а OLTP полезен для администрирования повседневных транзакций организации.
- OLAP характеризуется большим объемом данных, тогда как OLTP характеризуется большим количеством коротких онлайн-транзакций.
- В OLAP хранилище данных создается уникальным образом, чтобы в него можно было интегрировать разные источники данных для построения консолидированной БД, тогда как OLTP использует традиционные СУБД.
CORS и принцип одинакового источника
CORS (Cross-Origin Resource Sharing) — это механизм, который позволяет веб-приложениям запрашивать ресурсы с других доменов, чем тот, с которого они загружены.
Ключевые моменты:
- Безопасность: Предотвращает атаки, такие как CSRF, ограничивая доступ к ресурсам.
CORS настраивается на сервере для управления доступом к ресурсам.
https://yandex.cloud/ru/docs/glossary/cors?utm_referrer=about%3Ablank
Где настраивается CORS
CORS настраивается на сервере для управления доступом к ресурсам.
https://yandex.cloud/ru/docs/glossary/cors?utm_referrer=about%3Ablank
HTTP заголовки CORS
- Access-Control-Allow-Origin: Указывает, какие домены могут обращаться к ресурсам.
- Access-Control-Allow-Methods: Перечисляет разрешенные методы (GET, POST и т.д.).
- Предварительные запросы: Для некоторых запросов браузер отправляет запрос OPTIONS, чтобы проверить разрешения.
https://yandex.cloud/ru/docs/glossary/cors?utm_referrer=about%3Ablank
Как работает CORS на практике?
- Предварительный запрос (Preflight Request): Для методов, которые изменяют данные (PUT, DELETE, или нестандартные заголовки/методы), браузер сначала отправляет предварительный запрос с методом OPTIONS на сервер.
- Цель: запросить у сервера, разрешает ли он этот межсайтовый запрос.
- В запросе OPTIONS браузер отправляет следующие заголовки:
- Origin: источник, откуда исходит запрос (например, example.com).
- Access-Control-Request-Method: метод основного запроса (POST, PUT и т.д.).
- Access-Control-Request-Headers: специальные заголовки (если есть) для основного запроса.
- Ответ сервера: Сервер должен ответить с набором CORS-заголовков, если разрешает межсайтовый доступ:
- Access-Control-Allow-Origin: указывает, какой домен может обращаться к ресурсу. Это может быть конкретный домен (например, example.com) или символ * для разрешения запросов от любых доменов.
- Access-Control-Allow-Methods: список разрешённых HTTP-методов (например, GET, POST).
- Access-Control-Allow-Headers: список заголовков, которые могут быть использованы в запросе.
- Access-Control-Allow-Credentials (опционально): если сервер разрешает отправку запросов с учётными данными (например, cookies), этот заголовок должен быть установлен в true.
- Access-Control-Max-Age (опционально): указывает, как долго браузер может кэшировать ответ на предварительный запрос.
- Основной запрос: Если сервер разрешает запрос, браузер отправляет основной запрос, и сервер обрабатывает его как обычно. Если же сервер не возвращает нужные заголовки, браузер блокирует запрос, и ресурс недоступен.
Пример:
- Клиентский сайт example.com отправляет запрос POST на сервер api.another.com.
- Браузер отправляет предварительный запрос OPTIONS с заголовком Origin: example.com.
- Сервер api.another.com отвечает с заголовками:
Access-Control-Allow-Origin: example.com Access-Control-Allow-Methods: POST, GET Access-Control-Allow-Headers: Content-Type
- Браузер проверяет, что сервер разрешил запрос, и отправляет основной POST запрос.
- Сервер возвращает данные, и браузер их обрабатывает.
Примечание:
Если сервер неправильно настроен и не отправляет нужные CORS-заголовки, браузер отклоняет межсайтовый запрос.
https://yandex.cloud/ru/docs/glossary/cors?utm_referrer=about%3Ablank
Браузерные движки
The browser engine is responsible for rendering web pages, it is actually a piece of software or hard-coded logic which renders the web page from the internet for their user.
Rendering a web page refers to the process of converting the HTML, CSS, and JavaScript code into something that a user can see and interact with it. If I spell it in simple terms, it is just a fancy word for “visual display or representation” of a web page in the development world.
- Parsing: The browser engine parses the HTML code of the web page. This involves breaking the code down into its component parts, such as tags, attributes, and text.
- Rendering: The browser engine then renders the HTML code into a visual representation. This involves applying the CSS styles to the HTML elements and displaying them on the user’s screen.
- Executing JavaScript: The browser engine then executes the JavaScript code on the web page. which involve updating the DOM tree, animating elements, or performing other tasks.
- Blink (Chrome)
- Gecko (firefox)
- WebKit (Safari)
https://medium.com/@rahul660singh/web-browsers-engine-5a4522621f00
https://web.dev/articles/howbrowserswork?hl=ru
https://habr.com/ru/companies/ruvds/articles/351802/
Современные фреймворки разработки веб-приложений
- Angular - Google
- React - Facebook
- Vue
https://webformyself.com/sravnenie-angular-react-i-vue-v-2019-godu/
Стратегии развертывания в DevOps
- Повторное создание (Recreate)
- Постепенное развертывание (Rolling)
- Мультиверсии
- Сине-зеленое развертывание (Blue/Green)
- Канареечное развертывание (Canary)
- A/B-тестирование
Повторное создание (Recreate):
Стратегия состоит из двух шагов:
- удаление текущей версии приложения;
- развертывание новой версии.
Это самая простая стратегия, но в то же время наименее оптимальная: у вас будет простой на время деплоя новой версии, а если что-то пойдет не так, то сложно будет откатиться к предыдущей версии.
Постепенное развертывание (Rolling)
В этой стратегии все инстансы приложения будут последовательно обновляться до новой версии. Каждый инстанс проходит следующий цикл:
- удаляется один из инстансов со старой версией приложения (остальные продолжают работать);
- запускается инстанс с новой версией;
- проверяется корректный запуск нового инстанса. Если все хорошо, переходим к следующему инстансу и проделываем то же самое.
Мультиверсии
В рамках этой стратегии в продуктиве поддерживаются сразу несколько версий приложения. Ее используют, когда в новой версии приложения запланированы какие-то значительные изменения в функционале: такой апдейт даст пользователям время адаптироваться к нововведениям. В других случаях трудозатраты на тесты и поддержку разных версий на продуктиве просто неоправданны.
Сине-зеленое развертывание (Blue/Green)
Эта стратегия базируется на двух продуктивных средах:
- «синяя» — там, где живут старые версии приложения;
- «зеленая» — зона, где мы запускаем новую версию приложения.
Когда «зеленая» зона готова стать продуктивом (после тщательного тестирования, конечно же), на нее переключается пользовательский трафик. Если с «зеленой» версией приложения возникают проблемы, трафик снова можно переключить на старую, «синюю» версию.
Канареечное развертывание (Canary)
«Канареечный» деплой схож с зелено-синей стратегией. Отличие в том, что пользователи приложения постепенно переключатся на новую версию.
Часть текущих инстансов приложения заменяется новой версией, на которую переключается часть трафика. Если новая версия работает стабильно, можно постепенно увеличивать долю пользователей, использующих новую версию приложения, до тех пор, пока все неактуальные инстансы не будут заменены. Если же в процессе обновления возникают сложности, то можно переключиться на старую версию.
A/B-тестирование
Фактически это вариация канареечного развертывания применительно для фронтенда. Здесь также запускается ограниченное количество инстансов c новой версией приложения, на которую переключается часть пользовательского трафика.
Эта стратегия используется больше в экспериментах, для проверки идей и гипотез. Например, с помощью такой стратегии релиза можно узнать, как пользователи реагируют на слайдер из баннеров на главной странице в новой версии сайта.
https://mws.ru/blog/strategii-razvertyvaniya-v-devops/
TCP - расшифровка
Transmission Control Protocol
TCP - суть
Протокол управления передачей), является надежным протоколом с установлением соединений, позволяющим без ошибок доставлять байтовый поток с одной машины на любую другую машину объединенной сети. Используется для передачи электронных сообщений, отправка файлов.
UDP - расшифровка
User Datagram Protocol
UDP - суть
Протокол пользовательских дейтаграмм), является ненадежным протоколом без установления соединения, не использующим последовательное управление потоком протокола TCP, а предоставляющим свое собственное. Он также широко используется в одноразовых клиент-серверных запросах и приложениях, в которых оперативность важнее гарантии отправки всех данных, например при передаче речи и видео (стриминг, онлайн-игры).
Суть разницы TCP и UPD
Отличаются гарантией доставки сообщений. В TCP происходит переотправка.
HTTP, HTTPs - расшифровка
HyperText Transfer Protocol
HyperText Transfer Protocol Secure
SSL - расшифровка
Secure Sockets Layer
TLS - расшифровка
Transport Layer Security
