Содержание
Иногда при создании веб-сайта вам может понадобиться, чтобы ссылка открывалась в новой вкладке. Однако вы можете не понимать, что это может сделать ваших пользователей уязвимыми для вредоносных атак, которые называются “tabnabbing”.
И хотя нет ничего надежного, есть способ хотя бы смягчить последствия: использование атрибутов noopener и noreferrer. Именно об этом вы узнаете в этом кратком руководстве.
Что такое Tabnabbing?
Табнаббинг - это тип фишинговой атаки, целью которой являются неактивные вкладки в вашем браузере. Пока вы сосредоточены на текущей вкладке, ссылка на предыдущую может быть перехвачена, и вы будете перенаправлены с нужного сайта на вредоносный, похожий на настоящий.
Поскольку вредоносный сайт выглядит очень похоже на оригинальный, пользователь, как правило, не знает, что страница, на которой он находится, не является законной, когда он возвращается на эту вкладку. Из-за этого пользователь вводит свои личные данные, не зная, что на другой стороне кто-то ждет, чтобы украсть их.
К числу способов, с помощью которых злоумышленники могут скомпрометировать известный веб-сайт, относятся:
- вредоносная реклама
- сторонние виджеты, установленные на сайте, которые впоследствии были скомпрометированы
- вредоносный пользовательский контент (например, сообщения на форуме), содержащий несанированный JavaScript
Краткий пример Tabnabbing
Вспомните, как сайт с вашими персональными данными автоматически выходит из системы, если вы слишком долго неактивны. Поскольку это означает, что ваше внимание находится в другом месте, злоумышленник может подменить настоящую страницу очень убедительной подделкой.
Когда вы вернетесь на эту вкладку, вы не заметите разницы, поэтому снова войдете на сайт, и теперь фишер получит доступ к вашим личным данным.
Как и в случае с фишинговыми атаками, цель этого действия - обмануть ничего не подозревающего пользователя и заставить его ввести конфиденциальную информацию (обычно логин или финансовые данные) на поддельном сайте.
Разумеется, это проблема, которой вы хотите избежать, когда на ваш сайт приходят посетители! Вы же хотите быть уверены, что люди будут в безопасности при переходе по вашим ссылкам, верно?
Поэтому сейчас вы узнаете, как сделать свой уголок интернета немного безопаснее - для начала научитесь открывать новую вкладку.
Как открыть ссылку в новой вкладке в HTML
Чтобы открыть ссылку в новой вкладке, напишите ссылку, как это делается в HTML, а затем просто добавьте атрибут target, установив значение blank, например, так: target="_blank":
Научитесь кодировать бесплатно на сайте
<a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp.org!</a>
<p />
Как открыть новую вкладку в HTML
На странице это будет выглядеть следующим образом:
Как добавить атрибут Noopener/Noreferrer
К сожалению, чем больше вкладок у вас открыто (кто не работает в браузере в режиме многозадачности?), тем больше вы подвержены табернабингу. Это связано с тем, что чем дольше вкладка остается неактивной, тем выше вероятность того, что фишер может нанести удар, подменив настоящую страницу поддельной.
Как же предотвратить это? Добавив rel="noopener noreferrer" к вашему якорю, например, так:
Научитесь кодировать бесплатно на сайте
<a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer"
>freeCodeCamp.org!</a
>
<p />
Добавление rel=“noopener noreferrer”
Зачем использовать noopener и noreferrer?
Использование noopener предотвращает доступ плохих игроков и ссылок к предыдущей вкладке или окну, которое открыло текущее. Это делается путем установки свойства Window.opener() в null.
Добавление noreferrer не позволяет внешним сайтам узнать, что вы на них ссылаетесь, а значит, данные о вашем трафике не будут передаваться им.
Завершение работы
Теперь вы должны понимать, что такое табернаббинг и как защитить от него свои ссылки (и пользователей). Надеюсь, вам это было полезно, и удачи вам!
Если вы действительно нашли это полезным, у меня есть еще статьи по техническим вопросам в моем блоге. Если вы хотите пообщаться, я есть на linkedin!
Если вы хотите почитать обо всем этом подробнее, вот некоторые ресурсы: