Разбиване на 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>
Има няколко недостатъка на този подход:
- Разчитане на JavaScript: Ако потребителят е деактивирал JavaScript, този метод няма да работи.
- Закъснения: Може да има малко забавяне преди изпълнението на JavaScript, по време на което рамкираната версия на вашия сайт все още може да бъде видима.
- Ограничения за различни източници: В някои ситуации политиката за същия произход може да попречи на този скрипт да работи по предназначение. Ако родителският документ е в друг домейн, той може да няма достъп
top.location.href
. - Потенциал за разбиване на кадри: Има и скриптове (наречени разбиващи кадри), които могат да попречат на скриптовете за разбиване на кадри да работят.
По-добрият подход е да се използват заглавки на HTTP отговор.
X-Frame-Options и Content-Security-Policy
И двете X-Frame-Options
намлява Content-Security-Policy
(CSP) са заглавки на HTTP отговор, използвани за подобряване на сигурността на уебсайт. Всеки от тях служи за малко по-различни цели и има различни нива на гъвкавост.
X-Frame-Options
е по-стара HTTP заглавка, специално предназначена да контролира дали вашият сайт може да бъде вграден в a <frame>
, <iframe>
, <embed>
или <object>
на друг сайт. Има три възможни директиви:
DENY
– Страницата не може да бъде показана в рамка, независимо от сайта, който се опитва да го направи.SAMEORIGIN
– Страницата може да се показва само в рамка от същия произход като самата страница.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 SAMEORIGIN
Header 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>