Эта статья была впервые опубликована в публичном аккаунте: CoyPan, как и ожидалось.
Эта статья переведена на:medium.com/front-end - Я…Оригинальное название: Запретить отправку HTTP-заголовков Referer с вашего веб-сайта.
Открытие ссылки в новом окне — очень распространенная логика в разработке интерфейса, которая может направить пользователя на новое доменное имя. мы можем использоватьtarget='_blank'для достижения этой функции. Я уверен, что каждый будет использовать его в одном из своих проектов.target='_blank, но я не уверен, что все знают о подводных камнях этого использования.
Когда используется внешняя ссылкаtarget=_blankКстати, эта внешняя ссылка откроет новую вкладку браузера. В этот момент новая страница открывается и занимает тот же процесс, что и исходная страница. Это также означает, что если эта новая страница имеет какие-либо проблемы с производительностью, например, большое время загрузки, это также повлияет на производительность исходной страницы. Если вы откроете страницу с тем же доменом, вы сможете получить доступ ко всему содержимому исходной страницы на новой странице, включаяdocumentобъект (window.opener.document). Если вы открываете междоменную страницу, но не можете получить к ней доступdocument, но вы по-прежнему можете получить доступlocationобъект.
Это означает, что если вы вставите ссылку, которая открывает новую страницу в новом окне на вашем сайте или в статье, новая страница может использоватьwindow.opener, чтобы изменить исходную страницу в некоторой степени.
Вы можете обратиться к этому примеру:Это .code распыляет .IO/Adam тянет i/...
(здесь я сделал небольшую гифку, чтобы вы могли увидеть эффект от приведенного выше примера)
Давайте посмотрим, что происходит в приведенном выше примере? При переходе по ссылке (в открытомdocument), браузер откроет эту страницу. И на этой странице проходит абзацJavaScriptкод: пройтиwindow.openerчтобы изменить исходную страницу (ту, с которой вы пришли). Немного утомительно, но может быть вредно.
Итак, вопрос: как нам предотвратить это? использовать во всехtarget=_blankНа ссылку, которая открывает новую страницу, добавьтеrel="noopener".
<a href="https://niteshsoni.info" rel="noopener"></a>
использовалrel=noopenerПозже, при открытии новой страницы по ссылке, вредоносныйJavaScriptкод не пройдетwindow.openerчтобы посетить исходную страницу. Это обеспечит запуск новой страницы в отдельном процессе.
В старых браузерах вы можете использоватьrel=noreferrerсвойство, имеет тот же эффект. Однако это также препятствуетRefererЗаголовок отправляется на новую страницу.
<a href="https://niteshsoni.info" rel="noopener noreferrer"></a>
В приведенном выше примере с использованиемrel="noreferrer", когда пользователь щелкает эту гиперссылку, чтобы перейти на новую страницу, доступ к новой странице становится невозможен.referrerИнформация. Это будет означать, что новая страница понятия не имеет, откуда пришел пользователь.
если вы пройдетеJavaScriptсерединаwindow.openЕсли вы открываете страницу, все вышеперечисленное применяется, потому что вы также открываете новое окно. В этом случае необходимо очиститьopenerОбъект:
var newWindow = window.open();
newWindow.opener = null;
Мне кажется, что используя первое решение (в каждомtarget="_blank"добавить в ссылкуrel="noopener") не имеет явных недостатков. Этот вопрос показывает, насколько легко найти дыры в безопасности вашей веб-страницы.
Резюме автора
Это очень короткая статья, которая в основном знакомит с тем, как использовать<a target="_blank">Проблемы безопасности при открытии вкладок в новом окне. Доступно на новых страницахwindow.openerдля управления исходной страницей. Если новая и старая страницы находятся в одном и том же домене, исходной страницей можно произвольно манипулировать на новой странице. Если это другой домен, новая страница все равно может пройтиwindow.opener.location, доступ к исходной страницеlocationобъект.
Представьте, что вы находитесь на своей собственной странице, через<a target="_blank" href="http://b.com">Откройте новое окно и перейдите на страницу б. В данный момент на странице б есть фрагмент кодаwindow.opener.location = 'http://c.com'. То есть страница a автоматически перейдет на страницу c. Если страница c является фишинговым веб-сайтом, который выглядит так же, как и страница a, пользователь может быть пойман.
Решение состоит в следующем:target="_blank"из<a>метка, добавитьrel="noopener"Атрибуты. При использованииwindow.openспособ открыть страницу,openerОбъект имеет значение null. Побочным эффектом этого является то, что в некоторых браузерах более ранних версий новая страница не может быть получена.refererИнформация.
написать на обороте
В этой статье представлена ситуация, из-за которой легко вызвать проблемы с безопасностью при разработке интерфейса.Проблема невелика, но ее относительно легко игнорировать. Впервые автор сталкивается с этой проблемой.
В соответствии с ожиданиями.