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/
Прочитал пост Пауло Кальвано про эвристическое кеширование в браузерах — "HTTP Heuristic Caching (Missing Cache-Control and Expires Headers) Explained".

Для установки времени жизни контента в кэше браузера веб-серверы отправляют http-заголовки Cache-Control и Expires. Если установлены оба заголовка то приоритет получает Cache-Control. Есть ошибочное мнение, что если не отдавать эти заголовки, то браузеры не будут кэшировать контент, но на самом деле браузеры всё равно будут его сохранять. Время жизни обычно составляет 10% от промежутка времени между датой последнего изменения файла Last-Modified и текущей датой. Этот нюанс может принести много проблем, поэтому не рекомендуется удалять заголовки Cache-Conrol и Expires. Для отключения кэширования лучше всего использовать Cache-Control: no-store или Cache-Control: max-age=0.

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

#http #cache

https://paulcalvano.com/index.php/2018/03/14/http-heuristic-caching-missing-cache-control-and-expires-headers-explained/
Энди Дэвис — автор книг про web-производительность — написал статью про проблемы хинта prefetch — "Rel=prefetch and the Importance of Effective HTTP/2 Prioritisation".

Prefetch используется для загрузки ресурсов с низким приоритетом, например, чтобы подгрузить шрифт, который с большой вероятностью будет использоваться на следующей странице. Проблема в том, что в некоторых случаях второстепенные ресурсы начинают конкурировать с основными ресурсами страницы, ухудшая метрики производительности.

Энди провёл несколько экспериментов. При использовании сервера с полноценной поддержкой приоритизации HTTP/2, второстепенные ресурсы были загружены без проблем, проблема была только с ресурсами, которые загружались с других доменов. Когда тестировался сервер без поддержки приоритизации HTTP/2 (Netlify, Amazon Cloudfront), в Chrome второстепенные ресурсы конкурировали с основными ресурсами страницы, а в Safari они конкурировали с запросами критических ресурсов страницы. У Firefox не было проблем с планированием загрузки ресурсов вне зависимости от типа сервера.

Если поменять сервер невозможно, то для решения этой проблемы нужно сделать так, чтобы браузер обнаружил prefetch-хинты как можно позднее. Например, их можно поместить в конце документа или вставить динамически после полной загрузки страницы.

#performance #http

https://andydavies.me/blog/2020/07/08/rel-equals-prefetch-and-the-importance-of-effective-http-slash-2-prioritisation/
Збигнев Банах написал статью про HSTS — "Why Websites Need HTTP Strict Transport Security (HSTS)".

Как правило, пользователи при переходе на сайт вводят его имя в адресную строку без протокола. Браузеры по умолчанию переходят на сайт по незащищённому протоколу HTTP. Для того чтобы браузер всегда использовал HTTPS-протокол, сервер на первый запрос должен отправить ответ с редиректом на HTTPS-версию сайта и с помощью заголовка Strict-Transport-Security передать дополнительную информацию о том, что сайт должен работать только HTTPS и закэшировать этот ответ. Время жизни кэша обычно устанавливают на год или два. В следующий раз при посещении сайта пользователь сразу попадёт на HTTPS-версию без редиректа.

Но есть небольшая проблема. Теоретически злоумышленник может перехватить первый запрос и заблокировать работу HSTS. Чтобы этого избежать, браузеры проверяют список сайтов, которые должны работать только по HTTPS (HSTS preload list). В этот список можно добавить свой сайт, но для этого нужно выполнить все условия, например, чтобы все поддомены работали по HTTPS.

Хорошая статья. Рекомендую почитать, если хотите узнать больше про HSTS.

#http #security

https://www.netsparker.com/blog/web-security/http-strict-transport-security-hsts/
Разработчики Chromium сообщили о своих планах полностью удалить поддержку Server Push и gQUIC — "Intent to Remove: HTTP/2 and gQUIC server push".

Server Push — фича HTTP/2, благодаря которой сервер может отправлять браузеру ресурсы, не дожидаясь от него явных запросов; gQUIC — нестандартный протокол, разработанный Google, который также позволяет пушить ресурсы. Пуши сложно настроить так, чтобы использующий их сайт всегда работал быстро, в самых плохих случаях они могут быть причиной деградации производительности.

Разработчики Chromium хотят удалить поддержку Server Push и gQUIC. Они ссылаются на проблемы производительности и на то, что оставлять их поддержку нет смысла, так как доля HTTP/2 соединений, использующих пуши, составляет 0.05%. Также реализация пушей в коде довольно сложная и её дорого поддерживать.

С другой стороны баррикад находятся разработчики, которые в комментариях пишут о том, что это проблема курицы и яйца, то есть просто ещё нет удобных средств для работы с пушами, чтобы они стали популярны. Также есть разработчики, которые успешно используют Server Push и не хотят, чтобы он был удалён из Chromium.

#performance #chromium #http

https://groups.google.com/a/chromium.org/g/blink-dev/c/K3rYLvmQUBY
Марк Ноттингэм написал статью о текущем состоянии Early Hints — "Beyond Server Push: experimenting with the 103 Early Hints Status Code".

Обычно известно, какие ресурсы будут нужны на странице. Было бы полезно каким-то образом сообщить о них браузеру заранее, чтобы он мог начать загружать код, стили, шрифты, пока бэкенд выполняет свою работу. Для решения этой задачи предназначен Early Hints — стандарт, разработанный в 2018 году инженерами Fastly (RFC8297). По своей сути Early Hints это HTTP-ответ с кодом 103 и списком ресурсов, который браузер может начать загружать перед ответом бэкенда. В HTTP/2 есть похожий механизм Server Push, но по сравнению с Early Hints он гораздо сложнее в настройке и использовании.

Пока браузеры не поддерживают эту спеку, так как она сложна в реализации. Для оценки пользы её внедрения в Google Chrome начался сбор метрик с сайтов, отправляющих экспериментальный код 103 Early Hints. Марк призывает всех желающих поучаствовать в этом эксперименте.

#http #performance

https://www.fastly.com/blog/beyond-server-push-experimenting-with-the-103-early-hints-status-code