Посетитель моего веб-сайта однажды сообщил мне, когда он нажал на одну из моих ссылок в Твиттере; он попал на мой сайт с большим всплывающим предупреждением о вредоносном коде. Этого достаточно, чтобы напугать любого, поэтому я начал проводить некоторые тесты. С моим сайтом все было в порядке — проблема была со ссылкой.

Ссылка другого сайта создала панель инструментов вверху, которая побуждала людей нажимать на вредоносную ссылку, загружая мой сайт в iframe ниже. Большинству людей мой сайт может показаться распространяющим вредоносный код. Я бы не сказал, что мне нравится, когда мой сайт загружается внутри iFrame, поэтому я сделал то, что сделал бы любой здравомыслящий ученый… Я загрузил прерыватель фреймов.

Однако iframe веб-сайта не обязательно является вредоносным. Недавно мы поделились инструментом под названием Sniply, чтобы добавить призыв к действию (CTA) к любой дополнительной ссылке, которой вы делитесь. Это делается путем встраивания всего сайта в iframe и добавления к содержимому элемента div с призывом к действию.

Но я очень тщательно отношусь к своему контенту и усилиям, которые я вкладываю в Martech Zone, поэтому я не хочу, чтобы кто-то приукрашивал мой контент, даже через платформу обмена ссылками. После проведения некоторых исследований, есть довольно много способов сделать это.

Как остановить кадрирование с помощью JavaScript

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

<script type='text/javascript'>
if (top !== self) top.location.href = self.location.href;
</script>

Этот подход имеет несколько недостатков:

1. Использование JavaScript: если у пользователя отключен JavaScript, этот метод не сработает.
2. Задерживать: может быть небольшая задержка перед выполнением JavaScript, в течение которой версия вашего сайта во фреймах может быть видна.
3. Ограничения различного происхождения: в некоторых ситуациях та же политика происхождения может помешать этому сценарию работать должным образом. Если родительский документ находится в другом домене, он может быть недоступен top.location.href.
4. Возможность пробивных ударов: Существуют также сценарии (называемые сценариями разрыва кадров), которые могут помешать работе сценариев разрыва кадров.

Лучшим подходом является использование заголовков ответа HTTP.

X-Frame-Options и Content-Security-Policy

Оба X-Frame-Options и Content-Security-Policy (CSP) — это заголовки ответа HTTP, используемые для повышения безопасности веб-сайта. Каждый из них служит несколько разным целям и имеет разный уровень гибкости.

X-Frame-Options — это старый HTTP-заголовок, специально предназначенный для управления тем, может ли ваш сайт встраивать <frame>, <iframe>, <embed>или <object> на другом сайте. Он имеет три возможных директивы:

1. DENY – Страница не может отображаться во фрейме, независимо от сайта, который пытается это сделать.
2. SAMEORIGIN – Страница может отображаться только в кадре того же происхождения, что и сама страница.
3. ALLOW-FROM uri – Страница может отображаться только в месте, указанном во фрейме.

однако X-Frame-Options ограничен, потому что он не может обрабатывать более сложные сценарии, такие как разрешение фреймворков из нескольких разных источников или использование подстановочных знаков для поддоменов. Не все браузеры поддерживают ALLOW-FROM директива.

Content-Security-Policy, с другой стороны, является гораздо более гибким и мощным HTTP-заголовком. Хотя может все X-Frame-Options может делать и многое другое, его основная цель — предотвратить широкий спектр атак с внедрением кода, включая межсайтовый скриптинг (XSS) и кликбейт. Он работает, занося в белый список надежные источники контента (скрипты, стили, изображения и т. д.).

CSP используется для управления фреймами. frame-ancestors директива. Вы можете указать несколько источников, включая несколько доменов и субдоменов с подстановочными знаками. Вот пример:

cssCopy codeContent-Security-Policy: frame-ancestors 'self' yourdomain.com *.domain2.com;

Это позволит вам обрамить страницу на вашем сайте ('self'), На yourdomain.comи в любом поддомене domain2.com.

CSP рекомендуется в качестве замены X-Frame-Optionsпотому что он может справиться со всем X-Frame-Options можно сделать и многое другое. Хотя большинство современных браузеров поддерживают CSP, все еще могут быть некоторые старые или менее распространенные браузеры, которые не поддерживают его полностью.

Как перестать создавать собственный контент в iFram с помощью HTML

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

<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self' yourdomain.com">

Эффективность метатега HTML ограничена, поскольку не все браузеры его соблюдают. Content-Security-Policy если установлено с помощью метатега.

Как остановить рендеринг iFrame с HTTP-заголовками

Лучше использовать заголовки HTTP X-Frame-Options или Content-Security-Policy контролировать кадрирование. Эти параметры более надежны и безопасны и работают даже при отключенном JavaScript. Метод JavaScript следует использовать только в крайнем случае, если вы не можете управлять сервером для установки заголовков HTTP. Для каждого примера замените yourdomain.com с вашим фактическим доменом.

Апачи — Измени свой .htaccess файл следующим образом:

Header always set X-Frame-Options SAMEORIGIN
Header always set Content-Security-Policy "frame-ancestors 'self' yourdomain.com"

Nginx — Измените блок сервера следующим образом:

add_header X-Frame-Options SAMEORIGIN;
add_header Content-Security-Policy "frame-ancestors 'self' yourdomain.com";

ИИС — сделать это, добавив следующее web.config файл:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="frame-ancestors 'self' yourdomain.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

Вордпресс – сделайте это, добавив этот код в ваш файл functions.php:

function add_security_headers() {
  header('X-Frame-Options: SAMEORIGIN');
  header("Content-Security-Policy: frame-ancestors 'self' yourdomain.com");
}
add_action('send_headers', 'add_security_headers');

Эти конфигурации позволят вашей странице встраивать iframe только в указанный вами домен, а не в какой-либо поддомен домена. Если вы хотите разрешить определенные поддомены, вам нужно будет явно указать их, например subdomain1.yourdomain.com subdomain2.yourdomain.comи так далее.

Разрешить iframe для вашего контента из нескольких доменов

Вы можете указать несколько доменов, используя HTTP-заголовок ответа Content-Security-Policy и директиву frame-predecessor. Каждый домен должен быть разделен пробелом. Вот пример:

Content-Security-Policy: frame-ancestors 'self' domain1.com domain2.com domain3.com;

Апачи — Измени свой .htaccess файл следующим образом:

Header always set X-Frame-Options SAMEORIGINHeader always set Content-Security-Policy "frame-ancestors 'self' domain1.com domain2.com domain3.com"

Nginx — Измените блок сервера следующим образом:

add_header X-Frame-Options SAMEORIGIN;add_header Content-Security-Policy "frame-ancestors 'self' domain1.com domain2.com domain3.com";

ИИС — сделать это, добавив следующее web.config файл:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
      <add name="Content-Security-Policy" value="frame-ancestors 'self' domain1.com domain2.com domain3.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

Разрешить кадрирование контента из подстановочного домена

Вы также можете указать подстановочный знак для всех поддоменов, используя Content-Security-Policy Заголовок ответа HTTP и директива предков кадров. Вот примеры Content-Security-Policy код для обновления:

Content-Security-Policy: frame-ancestors 'self' *.yourdomain.com;

Апачи — Измени свой .htaccess файл следующим образом:

Header always set Content-Security-Policy "frame-ancestors 'self' *.yourdomain.com"

Nginx — Измените блок сервера следующим образом:

add_header Content-Security-Policy "frame-ancestors 'self' *.domain1.com *.domain2.com *.domain3.com";

ИИС — сделать это, добавив следующее web.config файл:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="frame-ancestors 'self' *.yourdomain.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>