Більшість веб-розробників навіть не здогадуються:
Сторінка, на яку ми посилаємося з використанням target="_blank", отримує доступ до сторінки-джерела через об'єкт window.opener .
Наприклад, таким чином щойно відкрита вкладкаможе змінити window.opener.location, тобто. замість попередньої вкладки непомітно підвантажити зовсім іншу сторінку.
Найжахливіше те, що ця вразливість присутня на багатьох популярних вітчизняних і зарубіжних сайтах: тоді як у Facebook її виправили кілька днів тому, вона все ще працює, наприклад, в Яндекс.Пошті.
Приклад атакиСпираючись на таку поведінку браузерів, можна вигадати безліч сценаріїв, ось найпростіший:
1. Жертві надсилається лист, можливо, з підробленої адреси. Зміст листа не має значення: головне - це змусити жертву перейти за посиланням зі шкідливим кодом. Наприклад, це може бути прохання зацінити мі-мі-мішних котиків на кшталт того, що нижче. Target="_blank" Яндекс додає до всіх листів автоматично.
2. Жертва відкриває листа в Яндекс.Пошті, кликає на посилання, за яким у новій вкладці відкривається сайт-прокладка, що виконує шкідливий код, який замість Яндекс.Пошти завантажує фішинговий сайт, дуже схожий на оригінальний, але, наприклад, прохаючи повторно ввести логін і пароль, а також, щоб зняти підозри, справді робить переадресацію на котиків.
Приклад такого коду:
// Підміна оригінальної Яндекс.Пошти на фейк window.opener.location = "http://e-m-a.il/yandex.ru"; // Переадресація на котиків, щоб зняти підозри window.location = "https://imgur.com/0A5ZGBN";
3. Жертва, що довіряє Яндексу і подивилася на котиків, повертається на попередню вкладку з поштою. Так як у ній вона нічого не відкривала, а також адресу не змінювала, то, швидше за все, вона поведеться на фейк і введе свої логін та пароль, які насправді вирушать зловмиснику.
Єдине, що може викликати підозри – іншу адресу у сторінки, але її можна зробити дуже схожою на оригінальну, а на мобільних пристрояхвін часто прихований за умовчанням.
ЛікуванняНа щастя, виправити все можна досить легко: до всіх посилань target="_blank" потрібно додатково додавати атрибут rel="noopener noreferrer" .
Якщо ви не збираєтеся чекати, поки це виправлять на сайтах і браузерах, рекомендуємо додати собі в TamperMonkey/GreaseMonkey наступний User Script:
// ==UserScript== // @name NULL Opener object // @namespace nullopenerobjectns // @description Clears the window.openeer object. // @version 1 // @grant none // @run-at document-start // ==/UserScript== (function() ( "use strict"; window.opener = null; ))();
Доброго часу доби, шановні читачі. Давно не виходив випуск Відповідей на запитання, думаю, багато хто вже зачекався на відповіді на свої запитання. Хтось із вас уже знайшов відповідь на своє запитання без моєї допомоги, перепрошую, що не я дала вам відповіді. Виправлятимуся. На жаль, сьогодні я також не відповім на всі запитання, а лише на одне.
Мені здалося це питання досить цікавим та корисним, тому я вирішила приділити йому особливу увагу. Отже, питання.
Чи можна використовувати тег target="_blank" для того, щоб посилання відкривалося в новому вікні браузера? Чи це не шкідливо? Чи впливає це на щось?
Дуже цікаве питання, річ у тому, що атрибут тега , що відкриває посилання в новому вікні або в новій вкладці браузера, target = "_blank", один з найбільш неоднозначних у HTML. Хоча я сама користуюся тільки ним і не раз використовувати своїм читачам, варто все ж таки розібратися в цьому питанні і постаратися дійти якоїсь думки.
Тут варто розглядати ситуацію з двох сторін, використання target з погляду валідації та відкриття посилання в новому вікні або вкладці браузера з точки зору юзабіліті. Почну з першого.
Атрибут target="_blank" є невалідним атрибутом і його використання допускається лише у перехідних Transitional документах:
Для порівняння, у Blogger є таким:
містить інформацію про тип документа, є обов'язковим елементом веб-сторінки, який повідомляє браузеру, як інтерпретувати цю сторінку. Я не вдаватимуся до історії створення HTML, XML, XHTML – все це матеріал не для однієї статті. Але суть я намагатимусь передати.
Якщо йдеться про Blogger, то наш шаблон є сумішшю двох мов – HTML та XML, саме у таких випадках необхідно вказувати – XHTML 1.0 Strict. Документи цього типу повинні мати чіткий синтаксис, а специфікації для документів цього типу відсутній атрибут target="_blank". Саме тому для нас цей атрибут є невалідним і по суті його заборонено використовувати.
Якщо ж йдеться про інші сайти, чи можна використовувати атрибут target="_blank", то треба дивитися вихідний код сторінки, саме запис .
Тип документа задається розробником конкретного сайту, залежно від того, яка мова або версія використовується при верстці сайту.
Що робити у такій ситуації?
Я знаю лише два вирішення цієї ситуації. І обидва варіанти далекі від ідеалу.
Перший варіант – щоб документ був валідним, можна використовувати спеціальні JavaScript або JQuery скрипти, які будуть виконувати відкриття сторінок у новій складці браузера.
Мінус цього способу: якщо в налаштуваннях браузера вимкнено JavaScript, сторінка відповідно не відкриється в новому вікні.
Другий варіант - використовувати target = "_blank" і більше не мучитися цим питанням. Незважаючи на те, що цей атрибут є невалідним, він все одно підтримується всіма браузерами. І його використання ніяк не впливає на індексацію сайту пошуковими системами.
Першу частину питання ми з вами розглянули, але, як уже сказала, є й інша сторона питання – юзабіліті, зручність для відвідувача. Чи зручно читачам відкривати посилання в новій вкладці.
Певна частина (я не можу сказати на скільки багато) розробників вважають поганим тоном позбавляти користувача можливості самому вирішити, як йому відкрити сторінку, у тій же вкладці чи новій. А також, більше ая частина просунутих (досвідчених) користувачів, вважають, що вони самі можуть вирішити, як їм відкрити посилання, адже це передбачено, хоча б у тій же мишці. З іншого боку, в інтернеті дуже багато користувачів з рівнем нижче середнього, і багато хто не знає, що за допомогою тієї ж мишки можна відкривати будь-яке посилання в новому вікні.
Якщо ви ще не знаєте, як це зробити, я розповім вам. У кожної мишки обов'язково є коліщатко, так ось якщо ви, навівши курсор миші на посилання, натиснете на коліщатко, то посилання відкриється в новому вікні. Або є мишки з трьома кнопками, і цю функцію виконує середня клавіша. Але як я сказала, далеко не всі користувачі інтернету знають про таку приємну дрібницю.
Також, з погляду багатьох користувачів, зручно, щоб внутрішнє посилання відкривалося у тому ж вікні (вкладці) браузера, а зовнішні посилання – у новій вкладці, для багатьох це просто і логічно.
Саме через такі протилежні думки і через різний рівень знань користувачів, атрибут target="_blank" і взагалі питання відкриття посилань у новому вікні, є темою, що найбільше обговорюється.
Яка моя думка щодо цього? Я сама була новачком, я знаю багато людей, які все, що знають про інтернет – це Яндекс і Однокласники, а вже про те, що таке монітор, навіщо стільки кнопок на клавіатурі, а навіщо взагалі потрібне коліщатко мишці, просто поняття не мають. звичайно, такі прогалини швидко заповнюються). Я сама вважаю, що відкривати новий сайт у тій же вкладці, де я зараз знаходжусь – це вкрай незручно. Навіть якщо я справді збираюся піти з сайту, я не сильно напружуся, якщо закрию попередню вкладку. Я хочу, щоб посилання всередині сайту відкривалося в тій же вкладці, а зовнішнє у новій. Це моя особиста думка, і на істину я не претендую.
Якщо ви серйозно задумалися над цим питанням, і вирішили використати спеціальний скрипт, я постаралася знайти для вас рішення. Даний скрипт підійде для будь-якого сайту, CMS та для платформи Blogger, на прикладі Blogger і покажу.
Заходимо в Дизайн - Змінити HTML, знаходимо код і перед ним вставляємо код:
Якщо ви хочете попередити своїх користувачів про те, що посилання буде відкрито в новій вкладці, можна застосувати стиль до посилання, як це зроблено у мене. Для цього шаблон перед рядком ]]> додаємо такий стиль:
External (
padding: 0 10px 2px 0;
background: url(http://lh6.googleusercontent.com/_G92voTj-yF0/TcFG68RdfLI/AAAAAAAABfA/QJM25G6lInk/externallink.gif) no-repeat right center;
}
Я виклала свої значення поля padding. Залежно від використовуваного шрифту та налаштувань відображення тексту, вам потрібно буде підігнати ці цифри під себе. Також ви можете завантажити картинку у свій альбом або взагалі використовувати іншу.
Хочу сказати, що я тестувала три різні скрипти, і запропонований вище не скрізь працює. Якщо у вас не працює скрипт, запропонований вище, можете спробувати наступні варіанти:
http://sites.google.com/site/seobiblioteka/extlinks.js
http://sites.google.com/site/seobiblioteka/external.js
Але останні два скрипти не підтримують автоматичне завантаження стилів, тому, якщо ви хочете використовувати стиль для зовнішнього посилання відмінним від внутрішнього, то не забувайте надавати посилання класу class="external".
На цьому про використання target="_blank" та відкриття посилання у новій вкладці все. Сподіваюся, я відповіла на запитання читача і всім іншим ця інформація стане в нагоді.
Шановні блогери, якщо ваше питання пов'язане з Blogger, настійно рекомендую задавати його на форумі. У блозі відповіді публікуються не так часто, і не зовсім регулярно, і на досить елементарне питання доводиться чекати кілька тижнів. Задавши питання на форумі, ви протягом кількох годин вже отримаєте відповідь від мене або від інших користувачів.
Бажаю гарних вихідних.
Тільки поточно відповідне значення target is _blank . Інші значення target були використані для конкретних конкретних рамок. However, frames have been deprecated в HTML5 .
Default targetЯкщо не target specified, то link буде відкритий в поточному контексті, без користувача або браузера specifies otherwise.
a target = "_blank" Open in New Browser Tab (or Window)Target atribut specifies where the linked document will open when the link is clicked. Default is the current window. Якщо target="_blank" , поставлений документ буде відкритий в новому аркуші або (у списку заголовків) в новому window.
Why Open in a New Browser?Найбільш загальна відповідь на використання `target=”_blank” is so that offsite links open in a separate tab. Це дозволяє користувачеві натиснути на посилання і повернути його до останнього без поточної сторінки. Це Keeps visitors on your site longer and improves most of your metrics: bounce rate, conversion, pages visited.
Open All External Links in New Tab with JavaScriptВи не потрібні, щоб manual add target="_blank", щоб скористатися всіма лінками на вашому сайті. _blank links автоматично.
jQuery(document.links) .filter(function() ( return this.hostname != window.location.hostname; )) .attr("target", "_blank");
(Ви можете дізнатися, як правильно змінити форму цього коду в дії на будь-якій сторінці цього сайту.) You are using it already. Це використовується в найбільш популярних кадрахроботи і вмісту управління системами, включаючи WordPress , Drupal , і Twitter Bootstrap . Якщо ви потребуєте це без jQuery, що може бути як добре. Here is a “plain JavaScript” version:
Function externalLinks() ( for(var c = document.getElementsByTagName("a"), a = 0;a< c.length;a++) { var b = c[a]; b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank") } } ; externalLinks();
Besides making it easier, ці cleans up your markup considerably.
Reasons not to use `target=”_blank”Кілька людей argue, що користувачі не мають змогу отримувати нові сторінки в новому форматі сканування. Вони думають, що робить це є подібним до об'ємних ads і інших усвідомлення behavior. With the rise of tabbed browsing, Цей argument has largely gone away. Most users prefer to open links in new tab, because it allows them to come queue referenced links for later reading with losing their current browsing context.
Values of the target Attribute| _blank | Opens linked document in new tab or window. |
| _parent | Opens link в parent frame. Frames є deprecated в HTML5. |
| _self | Open link в поточному кадрі. |
| _top | Opens link в top-most frame. Frames є deprecated в HTML5. |
| frame name | Opens link in the named frame. Frames є deprecated в HTML5. |
За промовчанням, при переході за посиланням документ відкривається у поточній вкладці браузера. Цю поведінку можна змінити за допомогою атрибуту target елемента . Як значення використовується ім'я кадру, задане атрибутом name елемента або зарезервоване ключове слово. При вказуванні імені кадру посилання буде відкриватися у кадрі.
У XHTML застосування цього атрибуту заборонено.
Синтаксис ЗначенняЯк значення використовується ім'я кадру, задане атрибутом name . Якщо встановлено неіснуюче ім'я, відкриється нова вкладка браузера. Як зарезервовані імена використовуються такі.
Blank Завантажує сторінку в нову вкладкубраузер. _self Завантажує сторінку до поточної вкладки. _parent Завантажує сторінку у фрейм-батько; якщо кадрів немає, це значення працює як _self . _top Скасує всі кадри та завантажує сторінку у повному вікні браузера; якщо кадрів немає, це значення працює як _self .
Значення за замовчуваннямПрикладА, атрибут target
Відкрити в новій вкладці
БраузериУ таблиці браузерів застосовуються такі позначення.
- - Елемент повністю підтримується браузером;
- - елемент браузером не сприймається та ігнорується;
- - під час роботи можлива поява різних помилок, або елемент підтримується з застереженнями.
Число вказує версію браузреа, з якої елемент підтримується.
Радий вітати Вас на блозі сайт! У сьогоднішній статті ми почнемо говорити про мову гіпертекстової розмітки html. Дана публікаціябуде першою у своєму роді (і далеко не останньою), бо колись я нічого подібного не писав.
План посту:
А ось зараз, коли я набрав необхідні знання та перевірив їх на практиці, із задоволенням поділюся ними зі своїми читачами. Адже недарма, скільки сил і часу на початковому етапі було витрачено, наприклад, для того, щоб знати, як вставити посилання в html . Природно, після прочитання мого посту Ви також знатимете це і вмітимете робити.
Взагалі, варто зазначити, що теги посилань просто необхідні в роботі оптимізаторів, тому що їхній хліб, це якраз пошукова оптимізаціяі , і звичайно без посилань гуру в області SEO швидше за все не обходяться, що вже говорити про звичайних блогерів:).
Мабуть, html тег посилання A є одним з моїх найбільш використовуваних на ряду з тегом img, який необхідний для виведення зображень у тексті. У середньому, у кожній статті, що публікується мною, проставляється приблизно п'ять посилань, як на внутрішні сторінки, і зовнішні.
Не варто забувати, що теги для сайту html використовуються не тільки при написанні постів. Також вони будуть потрібні при зміні коду встановленого Вами шаблону на CMS WordPress або будь-якій іншій системі керування сайтом.
Тому потрібно вивчити хоча б найголовніші html теги, щоб надалі не мати проблем при роботі з посиланнями. Наприклад, якщо Ви користуєтеся « Візуальним редактором», коли пишіть свої статті, це не дуже добре, тому що, якщо даний редактор не буде працювати, Ви навіть не знатимете елементарного коду, щоб проставити посилання.
Загалом знання основних понять у мові розмітки html, я вважаю, сильно допоможе Вам і спростить життя. Все ж таки час, який Ви витратите зараз на вивчення, можливо нового для Вас матеріалу, не буде витрачено дарма.
Також існує ще дуже багато нюансів, які полегшать Вам роботу, і про які Ви прочитаєте нижче в моїй статті – це і rel=” nofollow” , і target=“_ blank” , і багато чого цікавого пов'язаного з посиланнями.
Тег посилання А - створюємо гіперпосилання в html документі з анкором і без нього
Як я вже вище встиг помітити, посилання один з найбільш використовуваних мною html тегів. Потрібні вони для того, щоб користувачі могли без особливих зусиль з одного документа переходити на інший за допомогою клацання мишкою.
Однак, щоб вказати шлях гіперпосилання, потрібно обов'язково використовувати атрибут href. Завдяки йому можна і потрібно вказувати URL сторінки, на яку Ви хочете послатись. Це можуть бути як внутрішні сторінки Вашого сайту, так і сторінки будь-якого іншого ресурсу у всесвітньому павутинні.
Анкор html тегаА вагомий фактор, який враховують пошукові роботи, тому на нього потрібно звернути особливу увагу. Я рекомендую використовувати в анкорі ключові слова, за якими Ви хочете, щоб Ваша стаття потрапила на перші позиції у видачі.
Розібравшись з теорією гіперпосилань в html документі, можна приступити і до наочних прикладів. Ось такий код матиме посилання:
Тут має бути текст Вашого гіперпосилання, тобто анкор
Як бачите, посилання починається з дужки, що відкривається.