Content Marketing

Разбиване на iframe: Как да спрете неупълномощеното iframe на вашето съдържание

Веднъж посетител на моя сайт ме информира, когато е кликнал върху една от моите връзки на Twitter; той беше доведен до моя сайт с голям изскачащ прозорец и предупреждение за злонамерен код. Това е достатъчно, за да изплаши някого, така че започнах да правя някои тестове. Нямаше нищо лошо в сайта ми – проблемът беше връзката.

Връзката на друг сайт създава лента с инструменти отгоре, която насърчава хората да кликват върху злонамерена връзка, докато зареждат моя сайт във вградена рамка отдолу. За повечето хора сайтът ми може да изглежда като разпространяващ зловреден код. Не бих казал, че харесвам който и да е сайт, който зарежда сайта ми във вградена рамка, така че направих това, което всеки разумен маниак би направил... Заредих разбивач на рамки.

Вградената рамка обаче не винаги е злонамерена. Наскоро споделихме инструмент, Sniply, за да добавите подканваща фраза (CTA) към всяка връзка към уебсайт, която споделяте. Той прави това, като вгражда целия ви сайт във вградена рамка и прилага div върху съдържанието ви с призива за действие.

Но съм доста внимателен по отношение на моето съдържание и усилията, които съм положил Martech Zone, така че не искам никой да поставя в рамка моето съдържание, дори и с платформа за споделяне на връзки. При извършване на някои изследвания има доста начини да се справите с това.

Как да спрете iframing вашето съдържание с 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 заглавка, специално предназначена да контролира дали вашият сайт може да бъде вграден в a <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, все още може да има някои стари или по-рядко срещани браузъри, които не го поддържат напълно.

Как да спрете iframing вашето съдържание с HTML

Вече има мета таг Content-Security-Policy, който може да бъде разгърнат, който деактивира възможността за iframe вашето съдържание:

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

Ефективността на HTML мета тага е ограничена, защото не всички браузъри спазват Content-Security-Policy когато е зададен с помощта на мета таг.

Как да спрете iframing вашето съдържание с HTTP хедъри

По-добре е да използвате HTTP заглавките X-Frame-Options or Content-Security-Policy за контрол на кадрирането. Тези опции са по-надеждни и сигурни и работят дори ако JavaScript е деактивиран. Методът на JavaScript трябва да се използва само в краен случай, ако нямате контрол над сървъра за задаване на HTTP заглавки. За всеки пример заменете yourdomain.com с действителния ви домейн.

Apache – Променете своя .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";

IIS – направете това, като добавите следното към вашия web.config файл:

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

WordPress – направете това, като добавите този код към вашия файл 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');

Тези конфигурации ще позволят страницата ви да бъде вградена във вградени рамки само в точния домейн, който посочите, но не и в поддомейни на домейни. Ако искате да разрешите определени поддомейни, ще трябва да ги посочите изрично, като subdomain1.yourdomain.com subdomain2.yourdomain.com, и така нататък.

Разрешете iframing вашето съдържание от множество домейни

Можете да посочите множество домейни с HTTP отговора на Content-Security-Policy и директивата frame-ancestors. Интервал трябва да разделя всеки домейн. Ето един пример:

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

Apache – Променете своя .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";

IIS – направете това, като добавите следното към вашия 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>

Разрешаване на iframing вашето съдържание от домейн с заместващи символи

Можете също да посочите заместващ знак за всички поддомейни с Content-Security-Policy Заглавка на HTTP отговор и директива за рамки-предци. Ето примери за Content-Security-Policy код, който трябва да се актуализира:

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

Apache – Променете своя .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";

IIS – направете това, като добавите следното към вашия web.config файл:

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

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основателят на Martech Zone. Дъглас е помогнал на десетки успешни стартъпи на MarTech, съдействал е за надлежна проверка на над $5 милиарда в придобивания и инвестиции на Martech и продължава да помага на компаниите при прилагането и автоматизирането на техните стратегии за продажби и маркетинг. Дъглас е международно признат експерт и лектор по дигитална трансформация и MarTech. Дъглас също е публикуван автор на ръководство за манекени и книга за бизнес лидерство.

Свързани статии

Бутон "Нагоре" горе
Близо

Открит е рекламен блок

Martech Zone е в състояние да ви предостави това съдържание безплатно, тъй като осигуряваме приходи от нашия сайт чрез приходи от реклами, партньорски връзки и спонсорство. Ще сме благодарни, ако премахнете блокера си за реклами, докато разглеждате нашия сайт.