Defront — про фронтенд-разработку и не только
12.9K subscribers
21 photos
1.09K links
Ламповый канал про фронтенд и не только. Всё самое полезное для опытных web-разработчиков

Обсуждение постов @defrontchat

Также советую канал @webnya
Download Telegram
Прочитал статью про атаку, про которую как-то не приходилось слышать раньше — "Slow Loris attack using JavaScript on a PHP Server".

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

Современные web-серверы из коробки идут с защитой от этой атаки, но она актуальна для кастомных серверов. Один из вариатов защиты от атаки, описанный в статье, использование reverse-proxy на nginx, с ограничением числа одновременных соединений от одного ip-адреса.

#security #http #tcp

https://www.freecodecamp.org/news/slow-loris-attack-using-javascript-on-php-server/
Марк Ноттингэм — участвует в разработке протоколов HTTP и QUIC — написал пост про возможности, которые предоставляет HTTP/2 при проектировании классических HTTP API — "How Multiplexing Changes Your HTTP APIs".

HTTP API подвержен проблеме избыточной детализации. Например, при запросе большого количества однотипных сущностей каждый запрос будет отправляться независимо ( /widgets/id1, /widgets/id2 ). Такой подход неоптимален. Для решения этой проблемы создают дополнительные эндпойнты, которые могу обрабатывать запросы "батчами" ( /widgets/id1,id2,id3 ). Ещё можно использовать GraphQL, описывая список необходимых сущностей с помощью специального синтаксиса.

Марк пишет о том, что появление мультиплексирования в HTTP/2 (отправка множества параллельных запросов в рамках одного соединения), позволяет избавиться от необходимости создания специальных API для обработки батч-запросов. В статье, есть пример синтетического теста с 40 запросами. Для HTTP/1 накладные расходы на передачу данных составляют около 6Kb, для HTTP/2 — всего в 1440 байт. То есть благодаря HTTP/2 можно проектировать API любой степени детализации, не беспокоясь о проблемах неоптимальной передачи данных.

Мысли в статье интересные. Но мне не хватило сравнения описываемого подхода с GraphQL (плюсы, минусы, бенчмарки).

#http #performance #musings

https://www.mnot.net/blog/2019/10/13/h2_api_multiplexing
На этой неделе в сообществе web-разработчиков развернулся спор "HTTP/2 vs GraphQL". Марк-Андрэ Жиру встал на защиту GraphQL со статьёй "Is GraphQL Still Relevant in an HTTP2 World?"

В статье говорится о том, что HTTP/2 может помочь в снижении количества запросов к серверу и в более быстрой доставке ресурсов клиенту. Но тем не менее он не решает проблему поддержки большого количества эндпойнтов, с которым хорошо справляется GraphQL. Марк ещё пишет о том, что GraphQL очень удобен при разработке приложений, построенных на базе компонентов. GraphQL предоставляет много разных возможностей из коробки (интроспекция, типизированная схема и т.п.). Поддержка GraphQL существует во многих языках. В статье ещё есть раздел про сетевые ограничения, которые сказываются на дизайне API, построенных на базе HTTP/2, но мне он показался неубедительным.

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

#http #graphql

https://medium.com/@__xuorig__/is-graphql-still-relevant-in-an-http2-world-64964f207b8
Лоит Бэллад из Cloudflare написал статью про то, как они тестируют разрабатываемые протоколы — "How to develop a practical transport protocol".

На данный момент Cloudflare участвует в разработке QUIC и HTTP/3. Отладка сетевого стека — нетривиальная задача, особенно, если речь идёт об отладке на реальных мобильных устройствах. В самом простом случае разрабатывать протокол можно на одном компьютере, используя сеть из docker-контейнеров. Но такой подход не может выявить проблемы, которые могут возникнуть в реальном мире. Поэтому для полноценного тестирования создаются специальные "лаборатории" — выделенные машины, соединённые между собой в сеть. Для эмуляции edge, 3g, lte используется netem (на Linux) и ipfw + dummynet (на FreeBSD). Меня немного позабавило, что ребята взламывают девайсы на iOS, для того, чтобы понять, как будут работать новые протоколы на реальном железе от Apple.

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

#http #debug #net

https://calendar.perfplanet.com/2019/how-to-develop-a-practical-transport-protocol/
Эверт Пот провёл эксперимент по измерению скорости HTTP/1.1 и HTTP/2 в разных условиях — "Performance testing HTTP/1.1 vs HTTP/2 vs HTTP/2 + Server Push for REST APIs".

Основные выводы из статьи. Если очень критична скорость, то нужно продолжать компоновать множество запросов в один. Если вас интересует более элегантный дизайн API, то получение каждой сущности по уникальному URL вполне хорошее решение в условиях HTTP/2. Кэширование ответов в Firefox незначительно влияет на общий результат, в Chrome эксперимент с использованием кэша показал прирост скорости в 2.3 раза. Есть проблемы с HTTP/2 Push в Firefox — автор статьи пишет, что push в его экспериментах работал через раз.

В общем, эта статья — ещё один повод задуматься о переходе с HTTP/1.1 на HTTP/2, если вы этого ещё не сделали.

#http #benchmark #performance

https://evertpot.com/h2-parallelism/
Разработчики браузеров начинают задумываться о том, чтобы перевести HTTP-заголовок User-Agent в статус deprecated.

User-Agent не был надёжным средством для определения возможностей браузера, но тем не менее многие сайты его используют. Более того на некоторых логика работы с UA сломана, из-за чего возникают неприятные ошибки. Шима Видас решил проверить, как будут вести себя современные сайты, если на наделю отключить User-Agent. Что из этого получилось, он описал в статье "My findings after browsing the web without a User-Agent header for one week".

Большинство сайтов работало без каких-либо проблем, включая Amazon, Reddit, Instagram, Google Photos. Но в Google Docs выскакивало сообщение о том, что могут быть недоступны некоторые функции. iCloud рекомендовал использовать последние версии браузеров. Twitter переключал на старую версию сайта, а поиск Google отдавал HTML-only версию сайта. Были баги. В Google Docs перестали работать некоторые горячие клавиши, в Twitter сломалось копирование и вставка в текстовых полях. Twitch падал с ошибкой в JS из-за того, что не был учтён случай, когда navigator.userAgent пустая строка. Некоторые сайты начали воспринимать пользователя как бота и переставали открываться (Facebook, Arstechnica, Apple Developer).

Я лично поддерживаю начинание объявить устаревшим User-Agent. Но, думаю, что этот процесс может легко растянуться на несколько лет.

#http #web

https://webplatform.news/issues/2020-03-19
Недавно в Firefox была обнаружена проблема с кешированием данных в Twitter. Любой пользователь с физическим доступом к компьютеру теоретически мог прочитать чужие личные сообщения. Мартин Томсон из команды разработки Firefox рассказал, почему это произошло, в статье "Twitter Direct Message Caching and Firefox".

Чтобы предотвратить кеширование контента в браузерах, сайт должен отправить в ответе http-заголовок Cache-Control: no-store. В любом другом случае в Firefox начинает работать механизм эвристического кеширования. Этот механизм используется для предсказания, какой контент может быть закеширован и на какое время. Контент без Cache-Control: no-store сохраняется в кэше на семь дней. Как вы наверное уже догадались Twitter не отправлял этот заголовок в ответе из-за чего в Firefox включался механизм кеширования. Вместо него Twitter отправлял заголовок Content-Disposition, который используется для добавления метаинформации (например, имени файла) к загружаемым файлам. В статье говорится, что в "other browser" (как я понимаю Chrome) наличие этого заголовка отключает кеширование, но это поведение не является частью стандарта.

Какие можно сделать выводы из этой истории? Нужно проверять работу сайта в разных браузерах (Chrome, Firefox, Safari) и не стоит полагаться на поведение браузера, которое не соответствует стандартам.

#firefox #cache #http

https://hacks.mozilla.org/2020/04/twitter-direct-message-caching-and-firefox/
В блоге Cloudflare была опубликована статья со сравнением производительности HTTP/2 и HTTP/3 — "Comparing HTTP/3 vs. HTTP/2 Performance".

Cloudflare объявил об экспериментальной поддержке HTTP/3 в сентябре 2019 (подробнее про HTTP/3 можно почитать тут https://xn--r1a.website/defront/268). За прошедшие полгода протокол был обновлён до 27-ой версии черновика протокола, а также были получены живые данные, которые помогли рабочей группе, занимающейся разработкой HTTP/3.

0-RTT — фича HTTP/3, которая позволяет сократить время при установке соединения. В сравнении с HTTP/2 метрика time to first byte (TTFB) для HTTP/3 при включённом RTT-0 улучшилась на 12%. С текущей реализацией алгоритма управления потоком (спецификация не накладывает на него ограничений) нельзя корректно сравнить время загрузки, но эксперименты показывают, что она как мининмум не хуже HTTP/2.

Экспериментальная поддержка HTTP/3 есть во всех основных браузерах: Chromium-based (Crhome, Edge, Opera), Firefox Nightly, Safari Technology Preview.

#http #performance

https://blog.cloudflare.com/http-3-vs-http-2/
Марк Ноттингэм — участвует в разработке http и других протоколов — написал статью про малоизвестный http-заголовок Prefer: Safe — "On RFC8674, the safe preference for HTTP".

Этот заголовок говорит о том, что в браузере включена опция "безопасного интернета" для упрощения механизма фильтрации контента со стороны владельцев сайтов, например, для родительского контроля. Тем не менее он поддерживается только в Firefox и Internet Explorer.

Заголовок Prefer: Safe не получил широкого распространения из-за того, что он может потенциально использоваться для идентификации пользователей. А также из-за того, что понятие "Safe" каждый воспринимает по-своему. В статье рассказывается про случай с youtube, который сделал похожую настройку в своём приложении. После её добавления пользователи стали массово жаловаться на то, что они не видят нужный контент. Как оказалось, понятие "Safe" очень субъективно. То что было "Non-Safe" для youtube, было вполне "Safe" для пользователей. Тем не менее Марк считает RFC8674 шагом в правильном направлении, так как он обеспечивает фильтрацию контента на стороне пользователя без участия третьих сторон.

Cтатья интересная. В ней также немного рассказывается про процесс принятия новых фич на уровне IETF.

#http #musings

https://www.mnot.net/blog/2019/12/05/safe_hint
Барри Поллард — специалист в области web-производительности и автор книги “HTTP/2 in Action” — рассказал, почему совет про упаковку html-кода в первых 14kb не стоит воспринимать как жёсткое правило.

Дело в том, что цифра 14kb основана не на реальных данных, а на теоретических вычислениях. В первой транзакции передачи tcp-пактов можно отправить 10 пакетов. Каждый пакет весит 1500 байт, в каждом пакете 40 байт занимает служебная информация. На основе этих данных и получается 14kb (10 * (1500 - 40)). Барри на примере показывает, что в реальных условиях это не всегда так. При использовании HTTPS и HTTP/2 служебные данные могут занимать до 5 пакетов, то есть половину всего теоретического лимита. Но это не означает, что нужно пренебрегать размером отправляемых ресурсов. Всё также достаточно важно размещать в первых ~14kb отправляемого html ссылки на критические ресурсы, чтобы браузер начал их загрузку во время парсинга html.

Очень прикольная статья. Рекомендую прочитать всем, кто занимается производительностью.

#performance #http

https://www.tunetheweb.com/blog/critical-resources-and-the-first-14kb/