Всім привіт. Поговоримо про один атрибуті в посилань, який напевно відомий вам, це атрибут target=”_blank”, він дозволяє відкривати посилання у новій вкладці. Безліч сайтів, так і на нашому ресурсі теж використовуються посилання на зовнішні ресурси, що відкривається за допомогою використання даного атрибуту.
Існує один нюанс, про який не всі здогадуються, сторінка на яку відбувається перехід отримує частковий контроль над посилається на неї сторінку, за допомогою властивості window.opener в javascript. Насправді це вразливість, яка існує вже значний час, але не всі про це знають.
https://sites.google.com/site/bughunteruniversity/nonvuln/phishing-with-window-opener
Таким чином, зі сторінки на яку ви посилаєтеся може виконуватися js код, який вас не дуже обрадує. Один з поширених випадків, це може бути фишинговая сторінка, наприклад, яка може виробляти редирект з раніше довіреної сторінки. Це відбувається з тієї причини, що браузеру не було повідомлено про те, що сторінка не повинна мати доступу до батьківського вкладці.
Як вирішити цю проблему?
Проблему вирішує сторона, яка публікує посилання, і це треба розуміти, за вас це ніхто робити не буде. В якості вирішення даної проблеми можна використовувати один з декількох методів.
Перший більш простий, це додавання атрибута rel=”noopener” до зовнішніх посиланнях. Приміром, якщо у вас вже є атрибут rel=”nofollow” ви можете їх використовувати разом:
rel=”nofollow noopener”
Зверніть увагу, що в деяких браузерах даний метод може не працювати, це було помічено в браузері Firefox, в якості альтернативи в цьому випадку так само можна використовувати rel=”noreferer”
Другий варіант, це зробити перехід на зовнішні сторінки через свою спеціально підготовлену для цього. На ній слід виконати код, який власне і не дасть можливості зворотного доступу в коді до вашої сторінки:
window.opener = null;
Третій варіант — відкрити посилання в новій вкладці, за допомогою коду js.
var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = targetUrl;
Існує так само і інші методи, через iframe, які не дуже зручні, з цієї причини публікувати їх тут не стану.
Стаття англійською, де так само добре описується суть даної теми, з гарним прикладом демострації уразливості:
https://mathiasbynens.github.io/rel-noopener/
На цьому поки все, всім всього доброго!
Додав: htmaker, 24.09.2018 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
Анімація набору тексту на JQuery плагіні — TypeIt
Рубрика: Html, CSS, Javascript
