Большинство веб-разработчиков даже не догадываются:
Страница, на которую мы ссылаемся с использованием 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
Открыть в новом окне
Рад приветствовать Вас на блоге сайт! В сегодняшней статье мы начнем говорить о языке гипертекстовой разметки html
. Данная публикация будет первой в своем роде (и далеко не последней), так как прежде я ничего подобного не писал.
План поста:
А вот сейчас, когда я набрал необходимые знания и проверил их на практике, с удовольствием поделюсь ими со своими читателями. Ведь недаром, сколько сил и времени на первоначальном этапе было потрачено, к примеру для того, чтобы знать, как вставить ссылку в html . Естественно, после прочтения моего поста Вы также будете это знать и уметь делать.
Вообще, стоит отметить, что теги ссылок просто необходимы в работе оптимизаторов, потому что их хлеб, это как раз поисковая оптимизация и , и естественно без ссылок гуру в области SEO скорее всего не обходятся, что уж говорить про обычных блоггеров:).
Пожалуй, html тег ссылки A является одним из моих самых используемых, на ряду, с тегом img, который необходим для вывода изображений в тексте. В среднем, в каждой публикуемой мной статье, проставляется примерно пять ссылок, как на внутренние страницы, так и на внешние.
Не стоит забывать о том, что теги для сайта html используются не только при написании постов. Также, они будут нужны при изменении кода установленного Вами шаблона на CMS WordPress или любой другой системы управления сайтом.
Поэтому, нужно изучить хотя бы самые основные html теги , чтобы в дальнейшем не иметь проблем при работе со ссылками. К примеру, если Вы пользуетесь «Визуальным редактором», когда пишите свои статьи, то это не очень хорошо, потому как, если данный редактор не будет работать, Вы даже не будете знать элементарного кода, чтобы проставить ссылку.
В общем, знание основных понятий в языке разметки html, я считаю, сильно поможет Вам и упростит жизнь. Все таки время, которые Вы потратите сейчас на изучение, возможно нового для Вас материала, не будет потрачено зря.
Также существует еще очень много нюансов, которые облегчат Вам работу, и о которых, Вы прочитаете ниже в моей статье – это и rel=” nofollow” , и target=“_ blank” , и много еще чего интересного связанного со ссылками.
Тег ссылки А – создаем гиперссылку в html документе с анкором и без него
Как я уже выше успел заметить, ссылка один из самых используемых мною html тегов. Нужны они для того, чтобы пользователи могли без особых усилий из одного документа переходить на другой с помощью одного щелчка мышкой.
Однако, чтобы указать путь гиперссылке, нужно обязательно использовать атрибут href . Благодаря ему можно и нужно указывать URL страницы, на которую Вы хотите сослаться. Это могут быть как внутренние страницы Вашего сайта, так и страницы любого другого ресурса во всемирной паутине.
Анкор html тега ссылки А весомый фактор, который учитывают поисковые роботы, поэтому на него нужно обратить особое внимание. Я рекомендую использовать в анкоре ключевые слова, по которым Вы хотите, чтобы Ваша статья попала на первые позиции в выдаче.
Разобравшись немного с теорией гиперссылок в html документе, можно приступить и к наглядным примерам. Вот такой код будет иметь ссылка:
Как видите, ссылка начинается с открывающейся скобки «<», затем идет html тег A, после него должен быть обязательный атрибут href и знак равенства. Далее, следуют две скобки следующего типа – «”», между ними нужно указать URL адрес ссылающегося ресурса, при использовании «http://». Затем, нужно указать анкор ссылки и в конце концов закрыть тег ссылки А при помощи «».
Также, я советую Вам использовать безанкорные ссылки, так как, если на Ваш ресурс будут вести только гиперссылки с анкором это может вызвать вопросы у поисковых систем и привести к плохим последствиям. Наверняка, Вы слышали о нашумевшем алгоритме Google, который имеет устрашающее название Пингвин:).
Открытие ссылки в новом окне. Атрибут target _blank
Что же, с html тегом А разобрались, но это еще не все. Существует еще множество атрибутов, которые будут полезны Вам при работе со ссылками. Один из них – атрибут target _blank .
Нужен он для того, чтобы вставленная Вами в html документ ссылка открывалась в новом окне интернет-браузера. Это очень полезно, когда Вы пишите одну объемную статью и ссылаетесь на свои прошлые публикации. Таким образом, читаемая страница пользователем остается открытой, а ссылки открываются уже на других вкладках в браузере.
Target blank в html используют очень часто так, как это помогает, в плане поведения посетителей на Вашем сайте, то есть влияет на его поведенческие факторы. Поэтому, если Вы до сих пор не используете атрибут target с параметром _blank, рекомендую очень внимательно прочитать данный раздел.
Как Вы могли заметить, особой разницы, где будет проставлен необходимый атрибут – нет, так как их порядок не имеет значения внутри html тегов.
Атрибут rel nofollow и тег noindex. Закрываем ссылку от индексации
Приступим к работе с атрибутом ссылок rel в html документе. Данный атрибут с параметром nofollow служит для того, чтобы не передавать вес Вашей страницы на какую-либо другую.
Как известно в любой страницы, даже в только, что созданной и не имеющей внешних ссылок с других ресурсов есть свой вес, который выше нуля. Пользователи не могут этого видеть, но вот поисковые системы это все учитывают.
Поэтому, чтобы внутренний вес Ваших страниц не уплывал от Вас, некоторые ссылки нужно заключать атрибутом rel nofollow . Ссылки, включающие в себя, данный атрибут не будут передавать вес другим сайтам.
Естественно, атрибут rel nofollow не стоит использовать, когда Вы ссылаетесь на внутренние страницы Вашего сайта, так как грамотная внутренняя перелинковка залог успешной оптимизации ресурса и дальнейшего его развития.
Я использую вышеупомянутый атрибут только, если ссылаюсь на внешние сайты. К примеру, как Вы могли заметить, часто в конце своих статей я предлагаю постетилям стать моим читателем в твиттере (), и даю ссылку на свой аккаунт, естественно эту ссылку я заключаю в rel nofollow. Выглядит это следующим образом:
Опять таки, где будет размещен rel с параметром nofollow, перед атрибутом href или после него, не имеет значения. Также в таких ссылках не стоит прописывать ключевые слова в анкоре, так как это не имеет никакого смысла, ведь мы предварительно делаем ссылку nofollow , а значит она не передает вес.
Теперь стоит обсудить тег noindex . Он служит для того, чтобы поисковые роботы не индексировали не нужные элементы страницы. При чем, это касается не только гиперссылок, но и определенных участков текста.
Кстати, я зайдя на любой сайт сразу вижу, где гиперссылка закрыта от индексации, а где наоборот открытая. Все благодаря, отличному дополнению для браузера Opera . Также, с помощью данного плагина я могу отслеживать и другие параметры ресурсов, такие как , а также AlexaRank.
Ссылка якорь и как ее сделать. Атрибут Name
А сейчас я, возможно, для многих открою весьма занимательную вещь при работе со ссылками. Лично я узнал о ней лишь после того, как более полугода пользовался WordPress. Так вот, сейчас речь пойдет о якоре ссылок .
Благодаря ему, а также при использовании хэш-ссылки , можно ссылаться не просто на какую-то статью, но и на место в ней, которое необходимо, то есть на определенный участок текста. Это ннужно, когда публикация очень объемная и найти на ней нужную информацию будет затруднительно.
Сначала, нужно в статье, на которую Вы хотите сослаться выбрать участок текста, до которого будет прокручиваться страница в интернет браузере. То есть, если Вы даете ссылку, допустим о настройке (не является примером якоря), то и атрибут name должен размещаться в необходимом участке публикации.
Как видите, атрибут name не имеет анкора, так как якорь состоит из открывающегося и закрывающегося тега A. Параметр атрибута Вы должны задать сами, указывается он после знака равенства и скобок, как показано выше на примере.
Теперь непосредственно в новом посте нужно указать хэш-ссылку, используя заранее приготовленный якорь. Таким образом, ссылка будет открывать сразу то место в тексте, которое необходимо. Данная хэш-ссылка будет иметь следующий вид:
После этого читатели Вашего сайта смогут, переходя по таким ссылкам, добираться сразу до определенного участка на странице.
Что же, на этом у меня все, если возникли какие-либо вопросы, задавайте их в комментариях. Отмечу, что эта не последняя статья по html, в обозримом будущем будут еще публикации на эту тему.
Видео-эпилог: художник очень быстро рисует картины на стекле
The only currently relevant value of target is _blank . The other values of target were used to specify specific frames. However, frames have been deprecated in HTML5 .
Default target
If no target is specified, the link will open in the current context, unless the user or browser specifies otherwise.
a target=”_blank” Open in New Browser Tab (or Window)
The target attribute specifies where the linked document will open when the link is clicked. The default is the current window. If target="_blank" , the linked document will open in a new tab or (on older browsers) a new window.
Why Open in a New Browser?
The most common reason to use `target=”_blank” is so that offsite links open in a separate tab. This allows a user to click on a reference and come back to it later without leaving the current page. It keeps visitors on your site longer and improves most of your metrics: bounce rate, conversion, pages visited.
Open All External Links in a New Tab with JavaScript
You don"t need to manually add target="_blank" to every link on your site. If you link out a lot (which you should do), it is easy to add some JavaScript code to your site and turn all external links into _blank links automatically.
jQuery(document.links) .filter(function() { return this.hostname != window.location.hostname; }) .attr("target", "_blank");
(You can see a slightly modified form of this code in action on every page of this website.) This trick requires jQuery , but there is a good chance you are using it already. It is used in the most popular frameworks and content management systems, including WordPress , Drupal , and Twitter Bootstrap . If you need to do it without jQuery, that can be done as well. 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, this cleans up your markup considerably.
Reasons not to use `target=”_blank”
Some people argue that users do not prefer to open links in a new browsing context. They think that doing so is similar to popup ads and other annoying behavior. With the rise of tabbed browsing , this argument has largely gone away. Most users prefer to open links in a new tab, because it allows them to come queue referenced links for later reading without losing their current browsing context.
Values of the target Attribute
| Value Name | Notes |
|---|---|
| _blank | Opens the linked document in a new tab or window. |
| _parent | Opens the link in the parent frame. Frames are deprecated in HTML5. |
| _self | Open the link in the current frame. |
| _top | Opens the link in the top-most frame. Frames are deprecated in HTML5. |
| frame name | Opens the link in the named frame. Frames are deprecated in HTML5. |
Описание
Вы можете определить окно, в которое будет загружаться веб-страница, открытая по ссылке. Для этого используется атрибут target , в качестве его значения указывается имя окна или фрейма. Если target не установлен, возвращаемый результат показывается в текущем окне.
Синтаксис
Значения
В качестве значения используется имя окна или фрейма. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.
Blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .
Если для тега
Значение по умолчанию
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного .
Пример 1. Открытие ссылки в новом окне
Пример 2
Браузеры: Настольные Мобильные ?
| Internet Explorer | Chrome | Opera | Safari | Firefox |
| 2 | 1 | 2 | 1 | 1 |
| Android | Firefox Mobile | Opera Mobile | Safari Mobile |
| 1 | 1 | 6 | 1 |
✖
Браузеры
В таблице браузеров применяются следующие обозначения.
- - элемент полностью поддерживается браузером;
- - элемент браузером не воспринимается и игнорируется;
- - при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
