JavaScript и Браузерные отпечатки #тред
Не для кого не секрет, но за интернет пользователями следят, причем давно, а что если я скажу тебе, что это происходит и с помощью браузера тоже
Кому нужны мои данные?

Рекламные сети: Google AdSense
Брокеры данных: DoubleClick, ComScore, cXense
Сервисы аналитики: Google Analytics, Yandex metrika
Социальные сети: Facebook, Google Plus

и так далее
Когда правительства собирают данные, мы называем это «слежкой», когда компании делают то же самое, мы ошибочно называем это «пользовательскими службами».

myshadow.org/trackography#w…
Причем тут браузеры?

Как правило в веб-сайты встраиваются трекеры, которые отправляют данные о пользовательской активности, в дальнейшей формируется статистика
1/2 Причем тут браузерные отпечатки?

Можно пометить браузер пользователя, и отслеживать его перемещения. Как только он авторизируется на веб-сайте или воспользуется социальными сетями — его метка (отпечаток) будет связан с его реальным профилем
2/2 Далее если пользователь будет неавторизованным, то мы все равно сможем все равно сказать, что это вот тот самый.
Отпечатком может воспользоваться как одиночный сайт и анализировать активность анонимов
Так и сеть сайтов, которая может следить какие сайты сети посещает пользователь с этой меткой, можно даже выстроить маршрут
Например, рекламные сервисы. Сделав запрос на поиск товара на одном сайте, свяжем метку и запрос. Зайдешь на другой сайт из этой сети, мы порекомендуем тебе похожий на твой запрос товар

Встречали как гугл подсовывает вам похожую рекламу, а вы нигде не логинились? Вот это оно
Отчасти дело в трекерах, трекеры повсюду!

Одно время был популярен сторонний сервис комментирования disqus. Некий Дон Вильямсон отключил его на своем сайте и снизил количество сетевых запросов с 105 до 16

Статья за апрель, 2017
donw.io/post/github-co…
Далее, чтобы не затягивать спойлер, многое буду брать из доклада про отпечатки
Отпечаток это своего рода идентификатор id

Отпечатки бывают трех видов

Пассивные, когда мы ориентируемся на заголовки http и ip протокола, берём хэш от их суммы, коллизий определённо будет много, по таким полям делать id проблемно, но подход имеет место быть
Пассивные отпечатки могут использоваться HTTP-заголовки: Accept, Accept-Encoding, Accept-Language, Connection, Host, User-Agent, Version + Source Address из IP протокола
Пример реализации: github.com/actionhero/bro…

Звезд мало, тк пассивные отпечатки малоэффективны, не интересны
Активные отпечатки для сбора характеристик запускают какой-нибудь код, как правило это JavaScript-код. Здесь также берутся характеристики, например в строковом виде, конкатенируются, затем берется от большой строки хэш - это и есть id
Для активных отпечатков большое раздолье, можно брать очевидные характеристики браузера: включены ли Cookies, timezone, список плагинов, глубина цвета экрана и его разрешение, поддержка Do Not Track, Поддержка LocalStorage/SessionStorage/OpenDatabase, Название UserAgent
Грубо говоря, все то, что можно вытащить из navigator может попасть в активный отпечаток:
Прежде чем продолжить необходимо ввести еще несколько понятий:

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

Каждую характеристику можно описать использую факторы: энтропия, обнаруживаемость, живучесть, доступность, масштаб
Важным фактором является энтропия, она показывает насколько бит поверхность одного отпечатка, может отличаться от другого отпечатка.

Покажу важность на примере
1/2 У вас есть 100 знакомых все из них живут на улице Большая Садовая, и вы знаете адрес каждого но без личности

если все живут в 1ом доме, то разницы м/у таким отпечатком, как номер дома, нет, он бесполезен, энтропия ноль
2/2

Если, каждый будет жить по своему номеру доме, тогда вести, слежку и устанавливать личность будет проще.

Если в одном доме будут жить скажем 5еро, тогда если кто-то выйдет из него, нужно будет понять кто же это из тех 5ых
Можно посчитать какой длинны необходима в идеале определяющая характеристика, население планеты ~7,5 млрд -> 33 бита

Грубо говоря, если мы сможем собрать такую строку из характеристик браузера, которая будет отличаться от других строк на 33-бита каждый будет под колпаком
Есть еще другие факторы определяющих характеристик, которые описывает спецификация

да, да, да не удивляйтесь такое существует

с браузерными отпечатками уже давно борются,
первая версия спеки март 2013 год
w3c.github.io/fingerprinting…
Вернемся к техникам получения активных отпечатков, а именно к неочевидным и возможно самым практичным
1/2 Canvas Fingerprint, 2012 год
hovav.net/ucsd/papers/ms…
Самая эффективная и самая простая в реализации техника, необходимо отрисовать текст разными шрифтами и необычными символами, далее canvas переводим в base64, далее хэшируем - получаем id
2/2 Один и тот же текст может отображаться по-разному на разных компьютерах в зависимости от операционной системы, библиотеки шрифтов, видеокарты, графического драйвера и браузера.

Не помню какая у этого отпечатка энтропия, но поверьте мне наслово, что достаточная для слежки
Есть еще техники получения через работу с audioContext (почти устарело), через WebGL как продолжение идеи canvas fingerprint

Интересным является то, что в свое время Battery API позволял также получать строку с высокой энтропией, считай быть отпечатком, но это пофиксили
Кстати и у браузера Tor, есть своя дока, которая описывает как она борется со всеми этими трекерами и фингепринтами

2019.www.torproject.org/projects/torbr…
Несмотря наличие встроенных механизмов можно все таки провернуть одну технику для браузера Tor
browserleaks.com/rects
Повторюсь для закрепления активные отпечатки позволяют через выполнение кода получить наблюдаемые характеристики очевидные или не очевидные, ценность характеристик определяется факторами (см спеку w3c)
Реализации:

- github.com/fingerprintjs/… (github ~11,6k stars)
- github.com/Song-Li/cross_… (github ~1k stars)
- github.com/jackspirou/cli… (github ~1,2k stars)
- github.com/carlo/jquery-b… (github ~150 starts)
- github.com/RobinLinus/ube… (github <100 stars)
Первая реализации это похоже на реинкарнацию другой библиотеки от Валентина Васильева, тк он майнтейнер в новой по первому линку, прошлая реализация жила до 2018 года. Была оч популярна. Кстати вот его доклад на эту тему

Как заметил @Vitalliumm реализаций FP (fingerprint) очень много, есть даже веб-сайт библиотека таких техник и подходов browserleaks.com

Перейдем к 3ему виду отпечатков, cookie-like или куки-подобные отпечатки, суть: формируем значение (на сервере) отдаем клиенту, он записывает в хранилища, браузера и вы извлекаем по имени это значение из них

Очевидными к использованию здесь является localStorage, sessionStorage
Самый интересный баг, который мог стать экзотическим хранилищем - могли читать историю браузера, записать и прочитать "значение".

Доступ к истории браузера был возможен благодаря атаке по времени, существовала разница по отрисовке посещенной и нет ссылки

owasp.org/www-pdf-archiv…
Было еще одно экзотическое хранилище на основе HSTS, но изначальный pdf документ исследование недоступен, radicalresearch.co.uk/lab/hstssuperc…

техника называется HSTS Supercookies или HSTS Fingerprint
Окей, есть 3 вида отпечатков, с нас собирают характеристики, чтобы из них сформировать уникальный id, что делать?

Браузерные расширения, блэклист на известные трекеры на уровне расширения, прокси это хорошо, но это не все.
И кстати парадокс, но чем больше вы боретесь, тем более уникальным вы становитесь, лучшая тактика быть как все.

Но если серьезно, стоит снова заглянуть в спеку w3c
И эти меры уже предпримаются браузерами, но по разному
w3c.github.io/fingerprinting…
Из браузеров по слухам рекомендуется браузер brave.com, там из коробки больше анти трекинговых механизмов
Информации по теме много, но нужно завершить тред

Добавлю, если браузерный отпечаток основан на общеизвестных характеристиках, то долго он не проживет, по 1ому из исследований около недели, потом у вас будет уже другой fp.

Но помните интернет ничего не забывает

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with jsunderhood

jsunderhood Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @jsunderhood

19 Oct
Если вы ищете пакеты на сайте NPM, то попробуйте npms.io — их поиск IMHO работает лучше.

Разница в выдаче выглядит странно, учитывая тот факт, что на npmjs.com написано об использовании движка от https://t.co/5xmU9kkonN:

docs.npmjs.com/searching-for-… Image
В общих чертах, о том как работает анализатор пакетов от npms.io написано у них на сайте: npms.io/about

Если нужно больше деталей, то можно изучить репозиторий (github.com/npms-io/npms-a…) или уговорить меня собрать в тред результаты моего исследования =) Image
Если хотите сравнить насколько лучше работает поиск npms.io, посмотрите, например, на выдачу все по тому же запросу "react color picker":
npmjs.com/search?q=react…
npms.io/search?q=react…
Read 4 tweets
19 Oct
Окей, на GH и NPM метрик маловато, как же тогда оценить пакет не ковыряясь полдня в репозитории и не устанавливая его в свой проект?

На помощь приходят такие классные сервисы и инструменты как:
bundlephobia.com
npm.anvaka.com
— npm-consider
1) Проект bundlephobia.com я очень люблю и пользуюсь им почти каждый день. Здесь можно получить такую информацию как: вес импорта JS-кода (min и gzip), число прямых зависимостей и поддержка tree-shaking. Image
Также очень полезно посмотреть распределение веса. Зачастую авторы библиотек выбирают зависимости так неудачно, что для маленьких опциональных фич используются зависимости, которые весят в несколько раз больше кода самого пакета.

Пример: bundlephobia.com/result?p=react… Image
Read 11 tweets
19 Oct
Если вы видите, что популярный пакет сложно сделать легче или автор не хочет принимать PR-ы на эту тему, вы можете просто попробовать найти альтернативу.

Моя мысль в том, что если мы все изменим подход к подбору зависимостей, то лучшие библиотеки станут популярнее.
Учитывая, например, алгоритм сортировки поиска NPM: чем больше пакет скачивают, тем выше он в выдаче. Поэтому самое простое, и при этом не такое бесполезное, что вы можете сделать — не устанавливать плохие пакеты.

Но как заранее понять что пакет плохой/хороший, спросите вы?
Давайте сперва посмотрим на типичный флоу по поиску и установке пакетов:

Google/NPM → GitHub → npm install looks-good

Проблема в том, что на этих шагах мы почти не встречаем метрик, которые характеризовали бы качество пакета.
Read 12 tweets
19 Oct
Как можно сделать существующую библиотеку легче? Вариантов много, но начал бы со следующих пунктов:

1. Удалить зависимости или заменить их на более легкие.

Пример: заменить moment на date-fns (или на стандартный Date) или styled-components на какой-нибудь goober.
2. Настроить tree-shaking, чтобы неиспользуемый код зависимости не попадал в бандлы сайтов. Особенно актуально если библиотека предоставляет множество различных экспортов (как lodash).

По сути, нужно просто настроить поле sideEffects в package.json.

webpack.js.org/guides/tree-sh…
3. Если пакет публикуется в виде транспилированного кода, то "упростив" исходный код можно избавиться от лишних полифиллов.

Отбрасывание современных "фишек" (классы, async/await, генераторы, spread-операторы и тд) значительно уменьшает вес того, что "выдает" Babel.
Read 6 tweets
19 Oct
Итак, пакеты которые разработаны без заботы о размере и доступности зачастую становятся очень популярны и делают веб хуже. Что же мы, как комьюнити, можем сделать?

Разумеется, раз это open-source, то можем делать Pull Request-ы, чтобы улучшить эти популярные либы.
Звучит разумно и благородно, но получается не всегда.

Например, однажды я решил помочь одной библиотеке: сделал PR, где настроил инструменты для отслеживания размера и сказал автору, что помогу ему сделать либу легче. Однако мейнтейнер сказал, что ему это не интересно.
К тому же, зачастую, если пакет изначально разрабатывался без мыслей о размере, то его либо сложно, либо невозможно сделать легче хотя бы на 10%

Тот же tinycolor2 спроектирован как moment: сделать его ощутимо легче без потери функционала и без кучи breaking changes уже не выйдет
Read 6 tweets
19 Oct
Почему я вообще считаю, что надо заморачиваться на тему числа и веса зависимостей? Кто-то скажет: «10 КБ или 100 КБ — какая разница? Все равно это мало! Не мегабайт же!»
Проблема в том, что в проектах редко бывает только одна зависимость, а если у вас 10 зависимостей по 100 КБ, то это уже мегабайт, а если 10 зависимостей по 10 КБ — это в сумме всего 100 КБ.
Представим, что вам надо по-быстрому сделать форму на нескольких языках с колор-пикером, автосаджестом и еще парой каких-нибудь кастомных полей...
Read 5 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!