Target = "_blank" и другие значения атрибута target. Валидный target="_blank" Плохой повод: страница с бесконечной прокруткой
Читайте также
На многих сайтах применяется практика открывать внешние ссылки в новом окне. Часто таким образом открываются, например, ссылки на сайт разработчиков или результаты выдачи поисковой системы. Как правило, для этого используется атрибут тега < >:
Вообще говоря, указывать пользователю, как ему открыть ссылку некрасиво. Гуру юзабилити сайтов в один голос утверждают, что пользователь сам в состоянии решить, как ему открыть ссылку. Он разберется в своих окнах без наших с вами пожеланий по этому поводу. Более того, мы нарушим и работу стандартной кнопки браузера «Назад». Такое грубое вмешательство в привычки, скорее всего вызовет неприязнь!
Кроме того создается плохое впечатление: «Пользователь уходит с сайта! Он может сюда никогда не вернуться! А-а-а! Что делать? Давайте откроем новую ссылку в другом окне! Может быть, когда он посмотрит все, что ему нужно, то закрыв это окно, он опять попадет к нам и уж тогда-то точно станет постоянным посетителем!»
Смысл, надеюсь, ясен — наполняй сайт качественным полезным и интересным контентом и тогда посетители вернуться осознанно и самостоятельно.
Однако кроме моральной есть еще и техническая сторона вопроса — атрибут target отсутствует в спецификации XHTML 1.0 Strict и, соответственно, не пройдет валидацию!
Валидное решение: JavaScript
Если, несмотря на предыдущие абзацы, вы все-таки решили (или вас заставили) открывать страницу в новом окне, давайте хотя бы сделаем это валидно.
Тут на помощь придет JavaScript. Попробуем перехватить событие onclick ссылки и принудительно открыть новое окно с помощью функции window.open(). После чего запретим переход по ссылке в родном окне, указав return false:
Ссылка откроется в новом окне
Проверяем полученное решение: .
Все замечательно. Браузеры уверенно открывают ссылку в новом окне. Валидатор радует нас зеленым сообщением об успехе. Казалось бы можно успокоиться, но не тут-то было! Давайте попробуем поставить в браузере функцию жесткой блокировки всплывающих окон и снова перейти по ссылке!
Более удачное решение
Блокировка всплывающих окон предназначена главным образом для борьбы с надоедливой рекламой. Такая функция есть во всех современных браузерах. Некоторые браузеры даже предлагают разные уровни блокировки. Например в Opera 9+ можно блокировать либо только «нежелательные» окна либо все подряд.
Уж не знаю какой процент пользователей так радикально борется с всплывающими окнами, а только при таких настройках вместо открытия окошка просто появиться маленькая подсказочка «всплывающее окно блокировано». Более того, даже это проявление реакции браузера на щелчок в настройках можно отключить. В этом случае ссылка просто потеряет функциональность: «Я кликаю, а ничего не происходит!»
Если прочитав это, кто-то сказал: «Всем не угодишь! Ну кто же им доктор, что у них все отключено!», то нам с такими не по пути. Для остальных продолжим.
Ссылка откроется в новом окне
Тут мы воспользовались тем, что функция window.open() возвращает значение true, если окно открыто успешно и false, в противном случае. То есть, в случае, когда ссылка благополучно открылась в новом окне, мы блокируем открытие ссылки в своем родном окне, т.к. return будет!true=false. И наоборот, если окно открыть не удалось, return true позволит ссылке отработать в штатном режиме.
Большинство веб-разработчиков даже не догадываются:
Страница, на которую мы ссылаемся с использованием 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 тега . В XHTML применение этого атрибута запрещено.
Синтаксис
...Обязательный атрибут
Значения
В качестве значения используется имя окна или фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.
Blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .
Значение по умолчанию
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного .
HTML5 IE Cr Op Sa Fx
Открыть в новом окне
target=»_blank используется, чтобы тег открыл ссылку в новом окне. Но что такое target HTML ? Почему он должен быть blank ? И самое интересное, почему вначале стоит подчеркивание? Давайте подробнее рассмотрим этот код и разберемся, что он делает.
Атрибут target
Значения target
Четыре наиболее распространенных значения атрибута target :
_self
Единственная ситуация, в которой это может произойти, если в HTML
использован тег
_blank
Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript , а не HTML .
Это значение атрибута target HTML лучше всего использовать для открытия на новой вкладке ссылок на внешние сайты или на PDF-файлы . Благодаря этому после закрытия этих вкладок пользователь снова попадает на ваш сайт. Но этим не следует злоупотреблять, так как пользователю будет довольно сложно ориентироваться, если каждая ссылка будет открываться на новой вкладке.
_parent
Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов