Сегодня я поделюсь с вами веб-знанием. Если у вас уже есть опыт веб-разработки, вы, вероятно, уже это знаете. Однако для тех, кто в этом новичок, разобраться все же необходимо.
Мы знаем, что в сетиaПо умолчанию метка перепрыгивает адрес ссылки в текущем окне, если нужно открыть в новом окне, нужно указатьaдобавить тегtarget="_blank"Атрибуты.
<a href="http://kaysonli.com/" target="_blank">1024译站</a>
Кстати, есть интересное явление, я давно обнаружил, что иностранные сайты склонны переходить на текущую страницу, а отечественные сайты любят открывать новые окна. Если не верите мне, можете проверить. Я не знаю, является ли это культурной разницей в дизайне взаимодействия или привычкой технического развития.
Конечно, оба подхода имеют свои плюсы и минусы. Переход на текущую страницу работает более согласованно, не будет резко отвлекать внимание пользователя, а также уменьшит количество окон браузера (страниц с вкладками). Но это очень проблематично для сцен, в которых необходимо неоднократно возвращаться на начальную страницу. Например, на странице результатов поиска обычно необходимо просмотреть и сравнить несколько целевых адресов, и их удобнее держать в нескольких окнах.
Сегодня речь идет не только о различиях в пользовательском опыте, но и о безопасности и производительности.
Риски безопасности
если просто добавитьtarget="_blank", после открытия нового окна новая страница может пройтиwindow.openerполучить исходную страницуwindowобъектов, даже между доменами. Хоть у междоменных страниц и есть ограничения на доступ к свойствам этого объекта, все же есть рыба, которая проскальзывает в сети.
Это вывод консоли страницы веб-страницы, открывающей новое окно. можно увидетьwindow.openerНекоторые атрибуты, доступ к некоторым атрибутам заблокирован из-за ограничений междоменной политики безопасности.
Тем не менее, есть еще возможности для некоторых операций. такие как изменениеwindow.opener.locationЗначение указывает на другой адрес. Подумайте об этом, вы только что просматривали определенный веб-сайт, а затем открыли новое окно, но новое окно изменило исходный веб-адрес, не зная об этом. Для чего это можно использовать? Ловля рыбы! Когда вы вернетесь на фишинговую страницу, которая была замаскирована под страницу входа в систему, возможно, вы неправильно ввели пароль учетной записи.
Существует также способ играть, если вы вошли в систему, некоторые операции могут просто отправитьGETЗапрос окончен. Изменяя адрес, вы выполняете непреднамеренную операцию, которая на самом деле является CSRF-атакой.
проблемы с производительностью
Помимо последствий для безопасности, существуют также потенциальные проблемы с производительностью. пройти черезtarget="_blank"Новое открытое окно разделяет процесс с исходным окном страницы. Если эта новая страница выполняет много плохого кода JavaScript и занимает много системных ресурсов, ваша исходная страница также пострадает.
решение
попробуй не использоватьtarget="_blank", если вы должны использовать его, вам нужно добавитьrel="noopener"илиrel="noreferrer". такое новое окноwindow.opennerто естьnullИ это заставит новое окно запускаться в отдельном процессе, не перетаскивая процесс исходной страницы. Конечно, некоторые браузеры оптимизируют производительность, и даже без этого атрибута новые окна будут открываться в отдельных процессах. Но из соображений безопасности добавим.
Я намеренно использую свой блог1024 станция переводаПопробуйте, нажмите на внешнюю ссылку внутри, чтобы открыть новую страницу,window.opennerобеnull. Просмотр обнаружения элементов страницы,aдобавлены тегиrel="noreferrer". Блоги генерируются с помощью Hexo, и кажется, что эта установка стала здравым смыслом.
Кроме того, дляwindow.openспособ открыть новую страницу, вы можете сделать это:
var yourWindow = window.open();
yourWindow.opener = null;
yourWindow.location = "http://someurl.here";
yourWindow.target = "_blank";
Увидев этот довольно темпераментный логотип, почему вы не обращаете внимания?