Кликджекинг, также известный как исправление пользовательского интерфейса, — это тип атаки, при которой злоумышленники обманом заставляют пользователей нажать на что-то, отличное от того, что они воспринимают, путем встраивания веб-страниц в iframe. Это может привести к несанкционированным действиям и поставить под угрозу безопасность пользователя. В этом блоге мы рассмотрим, как предотвратить атаки кликджекинга с помощью JavaScript и конфигураций серверов для Apache и Nginx, а также приведем удобные примеры.

Понимание кликджекинга

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

Реальный пример

Рассмотрим сценарий, в котором злоумышленник встраивает скрытый iframe с банковского сайта в доверенную веб-страницу. Когда пользователь нажимает на, казалось бы, безобидную кнопку, он на самом деле может авторизовать банковскую транзакцию.

Вот пример уязвимой страницы:

    
Welcome to Our Site
    Click Me
    

Предотвращение кликджекинга с помощью JavaScript

Чтобы предотвратить атаки кликджекинга, вы можете использовать JavaScript, чтобы гарантировать, что ваш сайт не будет фреймирован. Вот пошаговое руководство по реализации этой защиты:

1. Разрушение фреймов JavaScript
Блокировка фреймов предполагает использование JavaScript для определения того, загружен ли ваш веб-сайт внутри iframe и выходит из него.

Пример:

    
Secure Site
    
This site is protected from clickjacking attacks.

В этом примере JavaScript проверяет, не является ли текущее окно (window.self) самым верхним окном (window.top). Если это не так, он перенаправляет самое верхнее окно на URL-адрес текущего окна, фактически выходя за пределы iframe.

2. Улучшенная обработка кадров с помощью прослушивателей событий
Вы можете еще больше усовершенствовать технику удаления кадров, используя прослушиватели событий для постоянной проверки наличия фреймов на вашей странице.

Пример:

    
Secure Site
    
This site is protected from clickjacking attacks.

В этом примере функция предотвращенияClickjacking вызывается для событий DOMContentLoaded, загрузки и изменения размера, чтобы обеспечить непрерывную защиту.

Защита на стороне сервера

Хотя методы JavaScript полезны, реализация защиты на стороне сервера обеспечивает дополнительный уровень безопасности. Вот как настроить HTTP-заголовки в Apache и Nginx для предотвращения кликджекинга:

1. Заголовок X-Frame-Options
Заголовок X-Frame-Options позволяет указать, может ли ваш сайт быть встроен в iframe. Есть три варианта:

DENY: запрещает встраивание вашей страницы в любой домен.
SAMEORIGIN: разрешает встраивание только из того же источника.
ALLOW-FROM uri: разрешает встраивание из указанного URI.
Пример:

X-Frame-Options: DENY

Конфигурация Apache
Добавьте этот заголовок в конфигурацию вашего сервера:

# Apache
Header always set X-Frame-Options "DENY"

Конфигурация Nginx
Добавьте этот заголовок в конфигурацию вашего сервера:

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

Пример:

Content-Security-Policy: frame-ancestors 'self'

Конфигурация Apache
Добавьте этот заголовок в конфигурацию вашего сервера:

Пример:

# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"

Конфигурация Nginx
Добавьте этот заголовок в конфигурацию вашего сервера:

# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'";

Заключение

Кликджекинг представляет собой серьезную угрозу веб-безопасности, но, применяя методы блокировки кадров JavaScript и средства защиты на стороне сервера, такие как заголовки X-Frame-Options и Content-Security-Policy, вы можете эффективно защитить свои веб-приложения. Используйте приведенные примеры, чтобы повысить безопасность вашего сайта и обеспечить более безопасную работу для ваших пользователей.