Безопасный JS, чем опасны ссылки с target blank, зачем писать rel noopener

17.06.18 ИТ / JavaScript 7225

Переходы по ссылкам в браузерах, почтовых программах и в прочих местах могут быть небезопасны. Многие с осторожностью относятся к ссылкам, а некоторые пользователи и вовсе напрочь отказываются переходить по ссылкам, думая, что там непременно вирус. Здесь нужно соблюдать баланс, не быть параноиком и в то же время не переходить по некоторым ссылкам.

Какие могут быть опасности? Не так давно, стало известно об одной уязвимости в браузерах. Ее суть заключается в том, что при переходе по ссылке, страница, на которую перешел пользователь, может получить доступ к предыдущей странице с помощью JavaScript, объекта window.opener. Чаще всего это опасно, когда новая страница будет открыта в новой вкладке, то есть если пользователь перешел по ссылке с атрибутом target="_blank".

Что может произойти после такого перехода? На том сайте, на который Вы перешли, может быть размещен JavaScript код, который обратится к открытой вкладке и поменяет там некоторые данные, например, подменит страницу. Пользователь, вернувшись на такую вкладку, попросту может не заметить подмены и продолжит работу с этой страницей. Например, была открыта страница в почтовом сервисе, пользователю будет предложено ввести пароль для подтверждения какого-либо действия - естественно, этот пароль сразу же будет передан с фейковой страницы злоумышленнику.

Как видно, уязвимость достаточно серьезная. Возникает вопрос, как ее устранить? Производители всех современных браузеров уже оперативно выпускают обновления для всех своих продуктов, в которых такой уязвимости уже нет. Но как быть, ведь не все пользователи обновляют браузеры сразу, а некоторые и вовсе могут не обновлять.

Уже сейчас, не дожидаясь обновлений, можно устранить уязвимость самостоятельно. Для этого важно к каждой ссылке, особенно с атрибутом target="_blank", прописывать атрибут rel со значением noopener: rel="noopener". Что это дает? Этот атрибут запрещает целевой странице обращаться к исходной, таким образом доступа не будет и значит ничего подменить не получится. Вот почему сейчас часто можно видеть ссылки не только с nofollow, но и с добавленным noopener. Только что, был дан ответ на вопрос, зачем писать rel="noopener".

Как быть, если нужно совместить два значения в одном атрибуте? Просто перечислить их через пробел, например, так: rel="nofollow noopener". Но это еще не все, не все браузеры понимают noopener, поэтому лучше дописать еще и noreferrer. В итоге ссылка с запретом индексации и защитой от уязвимости для всех браузеров будет выглядеть таким образом: rel="nofollow noopener noreferrer".

Есть еще одно решение, глобальное, которое позволит защитить все ссылки на странице без прописывания noopener. Для это достаточно в JS-файле Вашего сайта, который подключается на все страницы сайта до полной загрузки страницы - обнулить объект window.opener таким образом: пропишите window.opener = null.

Мало того, что значение noopener повышает безопасность, оно еще и повышает производительность. Если сказать просто, сложный JavaScript обрабатывается на одном домене, но нагрузка идет и на страницу, откуда произошел переход. В случае же использования rel="noopener", доступ к window.opener предотвращается и доступа не будет также и к кросс-потокам. Это повышает производительность. А браузер Google Chrome оптимизирован под эту особенность еще больше, он открывает подобные страницы в своем собственном процессе, поэтому его производительность выше других браузеров.

Таким образом, нужно позаботится о безопасности своих проектов уже сейчас, применить те меры, которые описаны в этой статье.