Что такое clickjacking и как от него защищаются (X-Frame-Options, CSP frame-ancestors)?

1️⃣ Как кратко ответить

Clickjacking — это атака, при которой злоумышленник обманывает пользователя, заставляя его взаимодействовать с элементами веб-страницы, скрытыми под другим контентом. Защита от clickjacking осуществляется с помощью HTTP-заголовков X-Frame-Options и Content Security Policy (CSP) с директивой frame-ancestors, которые ограничивают возможность встраивания страницы в iframe.

2️⃣ Подробное объяснение темы

Clickjacking, или "кража кликов", — это тип атаки, при которой злоумышленник обманывает пользователя, заставляя его взаимодействовать с элементами веб-страницы, которые он не видит. Это достигается путем встраивания целевой страницы в iframe на другой странице и наложения поверх нее элементов, которые вводят пользователя в заблуждение. Например, пользователь может думать, что нажимает на кнопку "Play", но на самом деле он нажимает на кнопку "Подтвердить покупку".

Зачем это нужно

Clickjacking может привести к серьезным последствиям, таким как несанкционированные транзакции, изменение настроек безопасности или даже кража личных данных. Поэтому защита от clickjacking является важной частью обеспечения безопасности веб-приложений.

Как это работает

Для защиты от clickjacking используются специальные HTTP-заголовки, которые ограничивают возможность встраивания страницы в iframe. Основные из них:

1. X-Frame-Options: Этот заголовок позволяет указать, может ли страница быть встроена в iframe, и если да, то на каких условиях.

   • DENY: Запрещает встраивание страницы в iframe.
   • SAMEORIGIN: Разрешает встраивание только на страницах того же происхождения (домен, протокол и порт).
   • ALLOW-FROM uri: Разрешает встраивание только на указанном URI (не поддерживается всеми браузерами).

   Пример использования:

   X-Frame-Options: SAMEORIGIN
   

   Этот заголовок указывает, что страница может быть встроена только на страницах того же происхождения, что и сама страница.

2. Content Security Policy (CSP) с директивой frame-ancestors: CSP — это более современный и гибкий способ управления безопасностью контента. Директива frame-ancestors определяет, какие источники могут встраивать страницу в iframe.

   • none: Запрещает встраивание страницы в iframe.
   • self: Разрешает встраивание только на страницах того же происхождения.
   • <uri>: Разрешает встраивание на указанных URI.

   Пример использования:

   Content-Security-Policy: frame-ancestors 'self' https://trusted.com
   

   Этот заголовок указывает, что страница может быть встроена только на страницах того же происхождения и на страницах с доменом https://trusted.com.

Пример кода

Рассмотрим пример, как можно настроить защиту от clickjacking с помощью заголовков в Node.js с использованием Express.js:

const express = require('express');
const helmet = require('helmet');
​
const app = express();
​
// Используем Helmet для установки заголовков безопасности
app.use(helmet());
​
// Устанавливаем X-Frame-Options заголовок
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
  next();
});
​
// Устанавливаем Content Security Policy заголовок
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', "frame-ancestors 'self' https://trusted.com");
  next();
});
​
app.get('/', (req, res) => {
  res.send('Hello, world!');
});
​
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

• helmet(): Мидлварь для установки различных заголовков безопасности.
• res.setHeader('X-Frame-Options', 'SAMEORIGIN'): Устанавливает заголовок X-Frame-Options, разрешая встраивание только на страницах того же происхождения.
• res.setHeader('Content-Security-Policy', "frame-ancestors 'self' https://trusted.com"): Устанавливает заголовок CSP, разрешая встраивание только на страницах того же происхождения и на страницах с доменом https://trusted.com.

Эти меры помогают защитить веб-приложение от clickjacking, ограничивая возможность встраивания страниц в iframe на ненадежных сайтах.