Невидимий трекінг у браузері: як зловживають каскадними таблицями стилів (CSS)

03.11.2025 1 хвилин Автор: Cyber Witcher

У статті ви дізнаєтеся, як буденні механізми оформлення здатні стати частиною складної схеми спостереження, чому така техніка проходить повз традиційні системи безпеки та які ризики це створює для звичайних користувачів і бізнесу. Ми пояснимо, що саме викликало занепокоєння у дослідників, наведемо зрозумілий контекст і підкажемо, як підвищити захист без занурення в складні специфікації.

Вступ

Каскадні таблиці стилів (CSS) давно перестали бути лише засобом для візуального оформлення сторінок: сьогодні ними вміють зловживати задля прихованого обходу фільтрів і непомітного відстеження користувачів. За допомогою спеціальних правил і селекторів злоумисники можуть маскувати текст, змінювати рендеринг елементів і збирати сигнали про дії та налаштування пристрою — навіть коли виконання JavaScript обмежене. Наслідки — від втрати приватності до ускладнення систем виявлення і фільтрації спаму — роблять цю тему важливою для всіх, хто працює з поштою, веб-сторінками чи аналітикою. У матеріалі розглянуто основні підходи зловживань CSS, приклади їхнього застосування та прості кроки для зниження ризиків.

Зловживання каскадними таблицями стилів для ухилення від вимог

Функції HTML та CSS можна використовувати разом для включення коментарів та нерелевантного контенту, які не видно жертві (або одержувачу) під час відображення електронного листа в поштовому клієнті, але можуть впливати на ефективність парсерів та механізмів виявлення. Зловмисники можуть використовувати властивість text_indent у CSS, щоб приховати вміст у тілі електронного листа. Нижче наведено приклад фішингового листа, який містить текст у різних місцях, але цей текст не видно під час відображення в поштовому клієнті.

Фішинговий електронний лист із кількома незрозумілими символами, доданими між оригінальними словами.

Перевірка вихідного HTML-коду вищезгаданого електронного листа показує, що приховане засолення тексту було використано в кількох місцях. Наприклад, у фрагменті, наведеному нижче, властивості CSS text-indent та font-size використовуються разом, щоб приховати незрозумілі символи, додані між оригінальними словами, видимими для одержувача цього електронного листа.

Фрагмент вихідного HTML-коду вищезгаданого фішингового листа показує, як властивість text-indent у CSS використовується для приховування нерелевантних символів, вставлених між оригінальними словами, видимими для одержувача електронного листа.

Властивість text-indent має значення –9999px , що переміщує текст далеко за межі видимої області під час відображення електронного листа в поштовому клієнті. Крім того, властивість font-size має надзвичайно малий розмір, що робить текст практично невидимим для людського ока на більшості екранів. У деяких випадках колір тексту також встановлюється як прозорий , щоб забезпечити повну невидимість тексту шляхом відображення його кольором, який не відображається на жодному фоні.

Або ж зловмисники можуть використовувати властивість непрозорості CSS, щоб приховати нерелевантний контент. Нижче наведено приклад фішингового електронного листа, який також видає себе за організацію Blue Cross Blue Shield.

Фішинговий електронний лист, що видає себе за організацію Blue Cross Blue Shield.

Ретельне вивчення вихідного HTML-коду вищезгаданого електронного листа виявляє численні спроби приховати вміст як у тілі листа, так і в його прехедері. Більшість шаблонів електронних листів дозволяють зловмисникам додавати текст прехедера до своїх листів. Такий текст одразу йде після основної теми листа та є технікою, яка дозволяє зловмисникам заманювати читачів додатковою інформацією. Зверніть увагу, що це поле також використовується в багатьох email-маркетингових та спам-кампаніях.

У цьому прикладі зловмисник встановив властивість opacity (прозорість ) CSS на нуль, зробивши елемент повністю прозорим і невидимим. Зверніть увагу, що цей текст прехедера прихований завдяки кільком властивостям CSS, включаючи color (кольоровий ) , height (висота) , max-height (максимальна висота ) та max-width (ширина).

Крім того, властивість mso-hide має значення all, щоб зробити прехедер невидимим і в поштових клієнтах Outlook. Також зверніть увагу, що невидимий текст прехедера абсолютно не має значення та виглядає нешкідливим (наприклад, «ЧОТИРИ рецепти смачного супу тільки для вас!»), щоб він виглядав менш підозріло для спам-фільтрів.

Фрагмент вихідного HTML-коду вищезгаданого фішингового електронного листа показує, як властивість opacity у CSS використовується для приховування тексту прехедера у вищезгаданому електронному листі.

У третьому прикладі використовується метод контрабанди HTML для перенаправлення користувача на кінцеву фішингову сторінку. Це був електронний лист з метою фішингу, надісланий одному з наших клієнтів у лютому 2025 року. Крім того, вкладення HTML містить низку німецьких слів і фраз, які не утворюють зв’язних або граматично правильних речень, і вони зроблені невидимими для одержувача електронного листа за допомогою прихованого текстового сальтування.

Фішинговий електронний лист із вкладенням HTML.

Електронний лист містить фразу «з повагою» двома іншими мовами, зокрема фінською та естонською. Відображений HTML-вкладений файл також показано нижче. Зверніть увагу, що зловмисник намагається переконати одержувача натиснути кнопку та переглянути документ, показуючи логотип Microsoft SharePoint.

Відображений HTML-файл вкладення вищезазначеного електронного листа.

Під час перевірки HTML-вкладення вищезазначеного електронного листа можна помітити, що властивості CSS використовуються різними способами для приховування недоречних німецьких фраз. По-перше, позиції абзаців встановлюються на абсолютні , що дозволяє розміщувати їх будь-де на сторінці, що часто є методом, який використовується для приховування елементів шляхом переміщення їх за межі екрана. Крім того, ширина та висота абзаців встановлюються на нуль, що робить їх невидимими з точки зору простору. Непрозорість також встановлюється на нуль, що робить вміст прозорим і невидимим для одержувача. Крім того, використовується метод відсікання, щоб гарантувати, що додана сіль залишається прихованою від жертви.

Зокрема, перший абзац обрізається за допомогою прямокутника з властивістю CSS clip (яка є застарілою на момент написання цього тексту), який має нульову ширину та висоту, що фактично робить його невидимим, обмежуючи його видиму область. Інші абзаци обрізаються в кола за допомогою більш сучасної властивості CSS, відомої як clip-path . Нарешті, властивість overflow встановлюється на hidden , що гарантує, що будь-який вміст, який виходить за межі елемента div, залишається прихованим.

Фрагмент вихідного HTML-коду вищезгаданого фішингового електронного листа показує, як використовується прихована текстова засолення для додавання нерелевантних німецьких фраз до тіла електронного листа, водночас залишаючись невидимим для одержувача.

Зловживання каскадними таблицями стилів для відстеження

Поштові клієнти по-різному візуалізують контент і підтримують різні CSS-правила та властивості. Водночас CSS можуть використовуватися зловмисниками для відстеження дій і налаштувань користувачів. Також можливе зчитування апаратно-системних «відбитків пальців» одержувачів, проте багато таких підходів працюють лише в окремих поштових клієнтах і залежать від конкретних припущень щодо конфігурації.

Маркетингові кампанії можуть використовувати ці властивості CSS для відстеження залученості користувачів та оптимізації майбутніх кампаній, тоді як спамери та зловмисники можуть використовувати цей підхід для покращення своїх цільових фішингових кампаній, збору інформації та створення цільових експлойтів. Далі ми наводимо лише кілька прикладів спроб порушення конфіденційності наших клієнтів.

Відстеження дій та налаштувань користувачів (або одержувачів електронних листів) було однією з найпоширеніших моделей зловживання CSS, виявлених протягом останніх місяців. Ці зловживання можуть варіюватися від визначення налаштувань шрифту та колірної схеми одержувачів, а також мови клієнта, до навіть відстеження їхніх дій (наприклад, перегляду або друку електронних листів). Нижче наведено приклад спам-листа з кількома можливостями відстеження.  

Приклад спам-листа.

Нижче показано HTML-код вищезгаданого електронного листа, де використовується кілька підходів до відстеження. По-перше, кампанія використовує зображення для відстеження, щоб записувати, коли одержувач відкриває електронний лист. По-друге, різні URL-адреси відстеження реєструють уподобання колірної схеми одержувача (див. символи rd та rl в URL-адресах). Цього можна досягти за допомогою правила CSS media at.

По-третє, URL-адреса відстеження записує, коли цей електронний лист друкується (див. символ p в URL-адресі). Нарешті, різні URL-адреси відстеження використовуються для запису, коли електронний лист відкривається в певному поштовому клієнті. Також зверніть увагу, що кожному одержувачу призначається унікальний ідентифікатор, який використовується в URL-адресі відстеження.

Фрагмент вихідного HTML-коду вищезгаданого спам-листа показує, як відстежуються дії та налаштування одержувача.

Нижче наведено другий приклад електронного листа, який відстежує ще більше інформації, зокрема геолокацію одержувача та інформацію про пристрій.

Приклад спам-листа.

Перевірка вихідного HTML-коду вищезгаданого повідомлення, показаного нижче, виявляє кілька ознак відстеження. По-перше, зображення відстеження використовується для запису, коли одержувач відкриває електронний лист. По-друге, уподобання колірної схеми одержувача відстежуються за допомогою окремих URL-адрес. По-третє, у це повідомлення вбудовано URL-адресу відстеження, яка записує, коли воно друкується.

По-четверте, різні URL-адреси відстеження використовуються для запису, коли електронний лист відкривається в певному поштовому клієнті. Нарешті, до кінця електронного листа додається піксель відстеження для збору IP-адреси одержувача, поштового клієнта, який використовувався для відкриття електронного листа, та деяку інформацію, специфічну для пристрою.

Фрагмент вихідного HTML-коду вищезгаданого спам-листа показує, як відстежуються дії та налаштування одержувача, а також як збирається його геолокаційна інформація та інформація про пристрій.

Як пояснювалося раніше, CSS надає широкий спектр правил та властивостей, які можуть допомогти спамерам та зловмисникам ідентифікувати користувачів, їхні веб-поштові клієнти або поштові клієнти, а також їхню систему. Наприклад, правило media at-rule може виявляти певні атрибути середовища користувача, включаючи розмір екрана, роздільну здатність та глибину кольору. Фрагмент HTML-коду нижче демонструє, як правило media at-rule CSS можна використовувати для таких цілей. Зловмисники можуть налаштовувати різні стилі або завантажувати різні ресурси на основі таких критеріїв, як ширина екрана пристрою одержувача.

Приклад фрагмента HTML-коду, який показує, як правило CSS media at можна використовувати для визначення ширини екрана (або роздільної здатності екрана) пристрою одержувача.

Зняття відбитків пальців операційної системи пристрою одержувача також можливе, і це можна зробити щонайменше двома основними способами. У першому підході наявність певних шрифтів у системі одержувача може вказувати на те, яку операційну систему він може використовувати. Крім того, зловмисники можуть блокувати відображення певних елементів на основі передбачуваної операційної системи. Цього можна досягти за допомогою правила font-face у CSS.

У наведеному нижче прикладі в тілі повідомлення використовується шрифт Segoe UI, який за замовчуванням зазвичай доступний в операційних системах Windows. Крім того, правило font-face визначає шрифт під назвою MacFont, який залежить від локальної доступності Helvetica Neue. Цей шрифт зазвичай зустрічається в системах macOS. Зверніть увагу, що в цьому прикладі елементи з класом .mac-style приховані за замовчуванням (display: none;). Вони відображаються одержувачу (display: block;) лише якщо гіпотетичне правило медіа виявляє MacFont.

Приклад фрагмента HTML-коду, який показує, як правило CSS font-face at-rule можна використовувати для ідентифікації операційної системи пристрою одержувача, а потім для відображення або блокування певного вмісту за допомогою доступності певних шрифтів.

Другий метод, який можна використовувати для ідентифікації операційної системи пристрою одержувача, полягає у використанні унікальних URL-адрес для ресурсів (наприклад, зображень) на основі відповідних стилів. Коли електронний лист завантажує ці ресурси, журнали сервера можуть надавати підказки щодо операційної системи одержувача. У наведеному нижче прикладі фрагмента коду завантажуються різні зображення залежно від операційної системи жертви, що можна визначити за наявністю певних застосованих шрифтів і стилів.

Приклад фрагмента HTML-коду, який показує, як CSS можна використовувати для ідентифікації операційної системи пристрою одержувача шляхом завантаження різних зображень.

Пом’якшення наслідків

Як пояснювалося на кількох прикладах, CSS надає функції, правила та властивості, якими зловмисники можуть зловживати для обходу спам-фільтрів та систем виявлення, а також для відстеження або зняття відбитків пальців користувачів та їхніх пристроїв. Таким чином, під загрозою перебувають як безпека, так і конфіденційність вашої організації та бізнесу. Далі пропонуємо кілька рішень для зменшення ризиків для кожного домену.

Заходи безпеки

Одним із рішень для зниження ризиків є використання вдосконалених механізмів фільтрації, які можуть ефективніше виявляти приховане використання солі в тексті та приховування контенту. Ці системи можуть перевіряти різні частини електронних листів, щоб знаходити та фільтрувати прихований контент. Як альтернатива, корисним може бути використання додаткових функцій, таких як візуальні характеристики електронних листів. Цей підхід особливо корисний у випадку загроз, пов’язаних із зображеннями.

Засоби захисту конфіденційності

Одним із найефективніших рішень у цій галузі є використання проксі-серверів для забезпечення конфіденційності електронної пошти. Цей засіб захисту розроблено для поштових клієнтів і передбачає переписування електронних листів для підвищення конфіденційності та підтримки цілісності електронної пошти між різними клієнтами.

Зокрема, проксі-сервіс повинен мати можливість виконувати дві основні функції:

1) перетворення правил CSS верхнього рівня на атрибути стилю та 2) переписування віддалених ресурсів (наприклад, зображень) для безпосереднього включення до електронного листа через URL-адреси даних. Перша функція обмежує стилі самим електронним листом і запобігає конфліктам зі стилями, визначеними клієнтом, тоді як друга функція запобігає витоку інформації та підриває пікселі відстеження, забезпечуючи цілісність електронного листа з часом.

Захист

Захист від цих складних загроз вимагає комплексного рішення для безпеки електронної пошти, яке використовує виявлення на основі штучного інтелекту. Secure Email Threat Defense використовує унікальні моделі глибокого та машинного навчання, включаючи обробку природної мови, у своїх складних системах виявлення загроз.

Захист від загроз безпечної електронної пошти виявляє шкідливі методи, що використовуються в атаках на вашу організацію, витягує незрівнянний контекст для конкретних бізнес-ризиків, пропонує дані про загрози з можливістю пошуку та класифікує загрози, щоб визначити, які сектори вашої організації найбільше піддаються ризику атаки.

Висновок

CSS перестав бути лише стилем — його використовують для прихованого обходу фільтрів, стеження та зняття «відбитків» пристроїв. Захист вимагає багаторівневого підходу: посилена фільтрація, переписування листів через проксі, блокування зовнішніх ресурсів і навчання персоналу. Простими словами — не ігноруйте стилі в безпековому аналізі: вони можуть бути сигналом атаки.

Підписатися
Сповістити про
0 Коментарі
Найстаріші
Найновіше Найбільше голосів
Знайшли помилку?
Якщо ви знайшли помилку, зробіть скріншот і надішліть його боту.